14

I'm having trouble getting @font-face to behave in any mobile Webkit browser I've tested--Safari on an iPhone 3GS, the default Android 2.2 browser, and Dolphin browser on Android.

It works in all desktop browsers, from IE7 to IE9, FF3.5, Safari 4, and Opera.

The fonts and CSS are from FontSquirrel:

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('../fonts/League_Gothic-webfont.eot');
    src: local('☺'),
        url('../fonts/League_Gothic-webfont.woff') format('woff'),
        url('../fonts/League_Gothic-webfont.ttf') format('truetype'),
        url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LatinModernRoman10Bold';
    src: url('../fonts/lmroman10-bold-webfont.eot');
    src: local('☺'),
        url('../fonts/lmroman10-bold-webfont.woff') format('woff'),
        url('../fonts/lmroman10-bold-webfont.ttf') format('truetype'),
        url('../fonts/lmroman10-bold-webfont.svg#webfonthCDr6KZk') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LatinModernRoman10BoldItalic';
    src: url('../fonts/lmroman10-bolditalic-webfont.eot');
    src: local('☺'),
        url('../fonts/lmroman10-bolditalic-webfont.woff') format('woff'),
        url('../fonts/lmroman10-bolditalic-webfont.ttf') format('truetype'),
        url('../fonts/lmroman10-bolditalic-webfont.svg#webfontegrLi3sm') format('svg');
    font-weight: normal;
    font-style: normal;
}

I've checked the SVG ID in the SVG font source, and they all match up.

Could it be because I've got some letter-spacing rules later on in the CSS?

Thanks!

UpTheCreek
  • 31,444
  • 34
  • 152
  • 221
bigsweater
  • 498
  • 1
  • 6
  • 19

2 Answers2

17

As it turns out, the syntax was wrong. I stumbled across this solution via twitter:

http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

It worked perfectly. Just checked in all major browsers, and my fonts show up, including on Android and iOS.

Now, my CSS reads like so: 

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('../fonts/League_Gothic-webfont.eot#') format('eot'),
        url('../fonts/League_Gothic-webfont.woff') format('woff'),
        url('../fonts/League_Gothic-webfont.ttf') format('truetype'),
        url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LatinModernRoman10Bold';
    src: url('../fonts/lmroman10-bold-webfont.eot#') format('eot'),
        url('../fonts/lmroman10-bold-webfont.woff') format('woff'),
        url('../fonts/lmroman10-bold-webfont.ttf') format('truetype'),
        url('../fonts/lmroman10-bold-webfont.svg#webfonthCDr6KZk') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LatinModernRoman10BoldItalic';
    src: url('../fonts/lmroman10-bolditalic-webfont.eot#') format('eot'),
        url('../fonts/lmroman10-bolditalic-webfont.woff') format('woff'),
        url('../fonts/lmroman10-bolditalic-webfont.ttf') format('truetype'),
        url('../fonts/lmroman10-bolditalic-webfont.svg#webfontegrLi3sm') format('svg');
    font-weight: normal;
    font-style: normal;
}

Glad to know there's a better bulletproof solution out there than the dang smileyface hack.

Hope this helps somebody!

bigsweater
  • 498
  • 1
  • 6
  • 19
  • 1
    You are missing an apostrophe on your second "eot" Also, what's the smiley face hack... I've never heard of that? :) ☺ – Albert Renshaw Jan 26 '12 at 22:45
  • 1
    Thanks for the heads up! Edited. You can read about the smileyface syntax [at Paul Irish's blog](http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/). – bigsweater Feb 22 '12 at 18:36
  • 3
    You should outline what you changed and why. It looks like you got rid of your smiley and added `#') format('eot'),` to your eot fonts. The spec seems to indicate it should have format('embedded-opentype'). – xr280xr Mar 12 '15 at 21:52
0

According to http://caniuse.com/woff, Android 2.3, 4, 4.1, 4.2 and 4.3 do not support woff fonts. So you must add ttf as well. I am testing on Android 4.1 and 4.2 and woff seemed to be ok! But on 4.0.3, I had to add tff fonts.

See this link http://sanchez.org.ph/use-host-and-download-google-fonts-on-your-own-website/ to see how to download ttf fonts from Google.

Jeremy
  • 38
  • 6