Webfonts Not Working

Support
#1

Hi,

I am having trouble with web fonts I have added them to the font folder in the child theme and added their location to the style.css file. Can you please help?

Thanks,
Joanne

Pro/Cornerstone Using Font Manager with Externally Hosted @font-face resources
#2

Hello There,

Thanks for writing in! I have checked your fonts and it seems that you only uploaded *.woff2. please keep in mind that you will need to include .ttf, .eot, .woff, .woff2 and svg. Take this code as an example:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Hope this helps.

#3

Great, thanks!

#4

You are welcome!

#5

Hi, I have just noticed that this has solved the problem in Safari but not in Firefox, chrome or android. Can you please help as the website is live and looks very messy without the correct fonts.

Thanks,
Joanne

#6

Hi there,

I checked your site and there seems to be an extra closing curly brace } with the CSS code in the child theme that might causing the issue.

Please remove it and clear your cache.

Let us know how it goes.

Thank you.

#7

Hi,

Thanks for you help. Unfortunately that hasn’t worked. What do you suggest?

Thanks,
Joanne

#8

Hi Joanne,

Try adding .woff2 files of your font.

This is more of a font issue than theme issue.

For more information, please refer to the link below.

Thanks

#9

Thank you, that worked on Chrome but not Firefox.

Also, I have added Flama semi condensed and thats not working on any browser.

#10

Hi Joanne,

I checked your site and there seems to be an extra “src:” in flama_semicondensedbold font-face
with the CSS code in the child theme that might causing the Flama semi not working.

Please remove it and clear your cache.

Let us know how it goes.

Thank you.

#11

Hi,

Thanks, that worked for Safari but not Chrome or firefox even when I cleared cache.

Also, babbage-bold font is not working in Chrome or Firefox, I am concerned as the site is live, any help much appreciated.

Thanks,
Joanne

#12

Hi Joanne,

Font files aren’t loading due to Cross-origin issue, looks like it’s not allowed to load asset from www and your site is configured for that.

Please check the secure note.

Hope this helps.

#13

Great, that worked, thank you very much!

Joanne

#14

You’re most welcome!