StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I've had the exact same issue trying to get webfonts to work on <strong>imeveryone</strong>. As of now, there doesn't seem to be anywhere on the internet that states this directly, so I'll do it here:</p> <p><strong><em>The 'local()' syntax used to <a href="http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/" rel="nofollow noreferrer">stop IE choking on file formats IE doesn't support</a> also <a href="http://code.google.com/p/android/issues/detail?id=10609" rel="nofollow noreferrer">stops Android from loading fonts that Android does support</a>.</em></strong> </p> <p>Oh dear. But it's easily fixed. The important thing is to ignore the 'Bulletproof Font Face' local IE workaround. It's a neat hack, and shouldn't break Android, but it does, blame Google.</p> <p><a href="http://mwhenry.com/blog/2009/12/font-face-support-table/" rel="nofollow noreferrer">Android does support TTF and OTF</a> files. The <strong>proper syntax to support both Android and IE (and every other browser) happy is as follows</strong>.</p> <p>O 1) You need two separate style sheets for fonts, before any regular style sheets:</p> <pre><code><link rel="stylesheet" type="text/css" href="/css/fonts.css" />  </code></pre> <p>O 2) In the normal style sheet, used by Android and most other browsers, don't use the local hack:</p> <pre><code>@font-face { font-family: 'LeagueGothicRegular'; src: url('/static/fonts/League_Gothic-webfont.woff') format('woff'), url('/static/fonts/League_Gothic-webfont.ttf') format('truetype'), url('/static/fonts/League_Gothic-webfont.svg#webfontOTINA1xY') format('svg'); font-weight: normal; font-style: normal; } </code></pre> <p>O 3. In the IE specific style sheet, continue as normal:</p> <pre><code>@font-face { font-family: 'LeagueGothicRegular'; src: url('/static/fonts/League_Gothic-webfont.eot'); } </code></pre> <p>That's all you need to get working webfonts across all browsers. For now. <strong>Someday Google will fix Android and MS will fix IE, so this answer won't apply anymore.</strong> </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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