@Font-Face not working in only Safari…?

[jenycz]

Hey guys –

I’m working on our site over at http://www.socialnetworkmd.com and I’m having some issues with @Font-Face working correctly in Safari. It’s working fine in every other browser (Chrome’s fine, not a web-kit issue I don’t think) but I just can’t put my finger on what’s going on in Safari.

@font-face {

font-family: 'BebasNeueRegular';

src: url('/wp-content/themes/boilerplate/fonts/BebasNeue-webfont.eot?') format('eot'),

url('/wp-content/themes/boilerplate/fonts/BebasNeue-webfont.woff') format('woff'),

url('/wp-content/themes/boilerplate/fonts/BebasNeue-webfont.ttf') format('truetype'),

url('/wp-content/themes/boilerplate/fonts/BebasNeue-webfont.svg#webfontfvFLBU0N') format('svg');

font-weight: normal;

font-style: normal;



}

That’s the code – straight from Font-Squirrel using the new bullet-proof @font-face syntax… I’ve only added the /wp-content/themes/boilerplate/fonts/ for the file path.

I’m running in circles here so any help would be greatly appreciated!

– Jack

[jamygolden]

Usually, the style.css is within the theme folder, so it would normally look something like this:

@font-face {

font-family: 'BebasNeueRegular';

src: url('fonts/BebasNeue-webfont.eot?') format('eot'),

url('fonts/BebasNeue-webfont.woff') format('woff'),

url('fonts/BebasNeue-webfont.ttf') format('truetype'),

url('fonts/BebasNeue-webfont.svg#webfontfvFLBU0N') format('svg');

font-weight: normal;

font-style: normal;

}

[jenycz]

wolfcry, for you the menu text is showing up as that font and all in one line, no crazy spacing?

[bernoulli]

This might be a bit old but I just ran into this problem with the squirrel and after an hour of wanting to kill someone I found the problem. I haven’t found a fix for Chrome, but it’s working in Safari now.

I’m using multiple faces of Lato in a wordpress site. Instead of using ‘LatoBlack’ I changed it to ‘Lato’ and then changed the font-weight to 900 instead of normal. Defining the fonts this way seems to work well with Safari. Chrome seems to hate it and just renders the fonts as Times New Roman with no other styling. I was having the same problem with using google fonts in wordpress which is why I’m trying @font-face.

Since I’m using a particular theme I’m also defining my paths relative to the css file and the using an include in the style.css to load my fonts.css file where I declare the fonts. in my case I’m using ../../fonts/filename.ttf etc.

This might work for some people so figured I’d share.

Thanks

[chrisburton]

I do not recommend changing the name of the font in your CSS. This is in case others already have it installed, it will automatically load that first.

[bernoulli]

Well it turns out I DID solve it, at least so far on Mac. Here it is:

font-squirrel and font registries that create webkits generate the CSS using ” and ‘ around the URLs. This seems to jack things up. They also set all the weights and styles to normal which also seems to wreak havoc.

here is the code generated by font squirrel for 2 of the faces of Lato:

@font-face {

font-family: 'LatoBlackItalic';

src: url('Lato-BlackItalic-webfont.eot');

src: url('Lato-BlackItalic-webfont.eot?#iefix') format('embedded-opentype'),

url('Lato-BlackItalic-webfont.woff') format('woff'),

url('Lato-BlackItalic-webfont.ttf') format('truetype'),

url('Lato-BlackItalic-webfont.svg#LatoBlackItalic') format('svg');

font-weight: normal;

font-style: normal;



}



@font-face {

font-family: 'LatoBlack';

src: url('Lato-Black-webfont.eot');

src: url('Lato-Black-webfont.eot?#iefix') format('embedded-opentype'),

url('Lato-Black-webfont.woff') format('woff'),

url('Lato-Black-webfont.ttf') format('truetype'),

url('Lato-Black-webfont.svg#LatoBlack') format('svg');

font-weight: normal;

font-style: normal;



}

Here is what I changed it to that actually works in Safari and Chrome and Firefox:

@font-face {

font-family: Lato;

src: url(../../fonts/Lato-BlackItalic-webfont.eot);

src: url(../../fonts/Lato-BlackItalic-webfont.eot?#iefix) format(embedded-opentype),

url(../../fonts/Lato-BlackItalic-webfont.woff) format(woff),

url(../../fonts/Lato-BlackItalic-webfont.ttf) format(truetype),

url(../../fonts/Lato-BlackItalic-webfont.svg#LatoBlackItalic) format(svg);

font-weight: 900;

font-style: italic;



}



@font-face {

font-family: Lato;

src: url(../../fonts/Lato-Black-webfont.eot);

src: url(../../fonts/Lato-Black-webfont.eot?#iefix) format(embedded-opentype),

url(../../fonts/Lato-Black-webfont.woff) format(woff),

url(../../fonts/Lato-Black-webfont.ttf) format(truetype),

url(../../fonts/Lato-Black-webfont.svg#LatoBlack) format(svg);

font-weight: 900;

font-style: normal;



}

I also am using the browser specific javascript to I can set per-browser CSS because chrome doesn’t render thin fonts as nicely which is a whole other thing.

Lastly, I also added @charset UTF-8; to the top of my css font file.

There are other fonts I am still having a little trouble with, specifically Oswald, which is not rendering in Firefox, but so far I seem to be on the right track. Hopefully this helps someone. Has been a pain in the ass for me.

[bernoulli]

Chris if you know a better way, please let me know. I’m not a programmer by trade and have been struggling through this crap for weeks. So far this is what has worked. I suppose I could change the names to something unique, like LatoMan to avoid conflicts, but the weight and styles seems to confuse certain browsers as well as the quotes and apostrophes.

[chrisburton]

@bernoulli what exactly is your issue. I think you may misunderstand the problem in general. The fact is you shouldn’t change the font name.

[bernoulli]

I had a problem where the fonts were not displaying in Safari. I’m using multiple faces of Lato font. Once I changed the font names so they were all the same, and changed the style and weight of each to one of the numbered weights or normal/italic, then Safari rendered all of them perfectly. I also tried a unique name and the font worked fine, i.e. I changed Oswald to MrOswald. I’ll rename the fonts to something quite specific to the domain to ensure it will be unique.

Chrome had the same problem. It would not pull the Lato font and would resort to using Helvetica or Times New Roman instead. It only worked when I removed the quotes and apostrophes from the file path after making the other changes first.

The only problem left now is that Firefox is not rendering the Oswald font, but it renders all others. I checked the HTTP headers and it is loading up the Oswald.eot file but is displaying helvetica instead.

[chrisburton]

Can you package the css file and the fonts (if legal) into a zip file and link me? Maybe I can help you further.

[bernoulli]

the site is not live so I can’t provide links as it’s on a password protected testing server. If you would like to contact me through email I can post that and then give you temp access to the server.

[Author]

Posts