Grow your CSS skills. Land your dream job.

@Font-Face not working in only Safari…?

  • # February 14, 2011 at 10:03 am

    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

    # February 14, 2011 at 12:15 pm

    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;
    }
    # February 14, 2011 at 12:17 pm

    what problem are you having? it’s working for me here Safari 5.0.3/Mac

    # February 15, 2011 at 3:32 pm

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

    # February 15, 2011 at 7:59 pm

    hmm, I’m on a different computer today and Safari 5.0.3/Mac is not displaying that font, but it’s not on two lines either. I’ll check my desktop tomorrow and confirm.

    # February 16, 2011 at 10:22 am

    I apologize jenycz, I was wrong and in fact Safari was not displaying that font. It looks like there’s an error in your stylesheet (perhaps a character encoding problem?). This is what Safari displays as the css in styles.css

    @font-face {
    font-family: 'BebasNeueRegular';
    src: url('fonts/BebasNeue-webfont.eot?') format('eot'),
    url('fonts/BEBAS___-webfont.woff') format('woff'),
    url('http://www.socialnetworkmd.com/wp-content/themes/boilerplate/fonts/BebasNeue-webfont.ttf') format('truetype'),
    url('fonts/BebasNeue-webfont.svg#webfontfvFLBU0N') format('svg');
    font-weight: normal;
    font-style: normal;

    }
    # November 14, 2011 at 8:05 pm

    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

    # November 14, 2011 at 9:04 pm

    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.

    # November 14, 2011 at 9:19 pm

    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.

    # November 14, 2011 at 9:22 pm

    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.

    # November 14, 2011 at 9:23 pm

    @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.

    # November 14, 2011 at 9:42 pm

    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.

    # November 14, 2011 at 9:51 pm

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

    # November 14, 2011 at 10:03 pm

    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.

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".