Note that there are some explanatory texts on larger screens.

plurals
  1. PO@font-face not working in mobile Webkit
    text
    copied!<p>I'm having trouble getting <code>@font-face</code> 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.</p> <p>It works in all desktop browsers, from IE7 to IE9, FF3.5, Safari 4, and Opera.</p> <p>The fonts and CSS are from FontSquirrel:</p> <pre><code>@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; } </code></pre> <p>I've checked the SVG ID in the SVG font source, and they all match up.</p> <p>Could it be because I've got some letter-spacing rules later on in the CSS?</p> <p>Thanks!</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload