StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h2><strong>@font-face code</strong></h2> <p>You can add <code>src: local('ò?'),</code> which looks for local font with this name, forcing browser to ignore local fonts if they happen to have the same name as your custom font. You can also use this inversely to restrict custom fonts from downloading. <em>see mobile support</em></p> <p>I generally see the <code>?#iefix</code> line second after the standard <code>.eot</code> src, though I can't say I have ever needed it, nor know if specific positioning is required (apart from the <code>.eot</code> being listed first).</p> <h2><strong>Additional control over the fonts</strong></h2> <p>If you are looking for more control with the fonts in the scenario where fonts fail to load, or dealing with the FOUC in IE, I have a jQuery plugin which will let you hide fonts while they are loading, and allow you to alter the font size on fail so your fallback font doesn't destroy your layout. <a href="https://stackoverflow.com/questions/12312323/how-to-know-if-a-font-font-face-has-already-been-loaded/12316349#12316349">How to know if a font (@font-face) has already been loaded?</a></p> <h2><strong>IE6-8 bug</strong></h2> <p>Additionally, IE6-8 can have issues with some font's .eot file. This can be fixed by either (<a href="https://stackoverflow.com/a/12459447/1455709">full guide here</a>):</p> <ol> <li>Converting a new .eot file online. If this doesn't work, then the problem is the file properties themselves.</li> <li>Use FontForge to edit the name properties of the font file, then resave and reconvert.</li> </ol> <h2><strong>CORS</strong></h2> <p>Seems to only relate to IE and FF. All other browsers (only latest versions tested) don't have problems.</p> <p>CORS are a common problem with fonts and occur when you are loading fonts from another domain or hostname. This includes specifying your site with a <code>www</code> or not. The <code>@font-face</code> code needs to be relatively referenced, as does the CSS file. You will also have issues if defining a <code><base></code> tag in your html. If this isn't possible, or if you don't want to worry about CORS, then you'll need to place the following code in an <code>.htaccess</code> file in your font directory:</p> <pre><code><FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch> </code></pre> <h2><strong>MIME Types</strong></h2> <p>404 issues on font serving may be caused by incorrect MIME definitions, see more here: <a href="https://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts">Mime type for WOFF fonts?</a></p> <h2><strong>Mobile Support</strong></h2> <p>Mobile support is pretty bad. Android doesn't properly support it until 4.0, and Windows Mobile, as far as I am aware doesn't support it at all. I am investigating any work around or solutions for this. Best I have so far is to use <a href="https://stackoverflow.com/questions/12312323/how-to-know-if-a-font-font-face-has-already-been-loaded/12316349#12316349">How to know if a font (@font-face) has already been loaded?</a> to display a picture of the text on font load failure. This really only works for site titles and icons, otherwise it's a horribly poor work around, bad for SEO and bad UX.</p> <p><a href="http://caniuse.com/fontface" rel="nofollow noreferrer">See <code>@font-face</code> support.</a></p> <p>Additionally, Android 2.2 - x.x.x versions will fail if your <code>@font-face</code> uses <code>local()</code>, which is also used as a fix for IE. Multiple stylesheets may be needed if you want to cover all your bases. See more here: <a href="https://stackoverflow.com/a/4520467/1455709">https://stackoverflow.com/a/4520467/1455709</a></p> <h2><strong>SVG and Chrome</strong></h2> <p>Chrome won't use the SVG font if you're including the <code>#fontName</code> in the url. It'll also use WOFF before SVG - and doesn't do a good job rendering it. This is probably the reason why everyone sooks about crappy font rendering in Chrome... To overcome this is an additional @font-face declaration is required:</p> <pre><code>@media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: 'myFont'; src: url('fonts/myFont.svg') format('svg'); } } </code></pre>

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