141

I'm using @font-face for the first time and downloaded a font-kit from fontsquirrel

The code they recommend inserting into my CSS is:

@font-face {
    font-family: 'junctionregularRegular';
    src: url('Junction-webfont.eot');
    src: local('☺'), 
        url('Junction-webfont.woff') format('woff'), 
        url('Junction-webfont.ttf') format('truetype'), 
        url('Junction-webfont.svg#webfontoNEpZXy2') format('svg');
}

Now, the smiley face thing has me stumped. But so too does the number of urls in the src - why do they recommend so many files and will they all be sent to the browser when a page is rendered? Is there any harm in removing all but the .ttf?

stephenmurdoch
  • 34,024
  • 29
  • 114
  • 189
  • @font-face The last src property takes precedence in the CSS cascade, meaning that the CSS will be parsed from bottom to top. – logu Feb 10 '16 at 11:08

2 Answers2

100

if you read the notes in font-squirrel's font-face generator, you'll see that it was a gotcha by paul irish.

Here is the excerpt from his blog post:

And.. regarding @font-face syntax

I now recommend the bulletproof smiley variation over the original bulletproof syntax.

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
       url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

From the bulletproof post:

Yes, it's a smiley face. The OpenType spec indicates any two-byte unicode characters won't work in a font name on Mac at all, so that lessens the likelihood that someone actually released a font with such a name.

There are a few reasons why smiley is a better solution:

  • Webkit+Font Management software can mess up local references, like turning glyphs into A blocks.

  • On OS X, Font Management software may alter system settings to show a dialog when trying to access a local() font that's accessible outside of Library/Fonts. More detail on my bulletproof post. Font Explorer X is also known to mess up other stuff in Firefox.

  • Although it's unlikely, you could reference a local() font which is completely different than what you think it is. (Typophile post on different fonts, same name) At the very least its a risk, and you're ceding control of the type to both the browser and host machine. This risk may not be worth the benefit of avoiding the font download.

These are all pretty edge case issues, but it's worth considering.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
corroded
  • 21,406
  • 19
  • 83
  • 132
  • 12
    thanks a lot ☺ it's clear now - I have just found [this](http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/) article on nicewebtype.com which answers all of my other questions too – stephenmurdoch Sep 13 '10 at 07:18
  • 10
    so, in essence, the local portion of that code says "this font is locally known as X", and we are using the smiley to prevent the browser from possibly using the wrong font with the same name (for the reasons stated above). nice :) – abelito Jun 04 '12 at 15:14
  • 3
    Do you actually need a `local()` statement? Is it redundant? Shouldn't the browser use your first `url()` without it? – Simon East Oct 11 '13 at 06:34
  • When I view my css source in chrome dev tools the smiley face shoes up like this: ☺ Is that correct? – Anthony Oct 30 '13 at 18:20
  • 1
    @Simon: The local statement is there to support IE6 - 8 (see the linked blog post) so unless you don't care about these browsers it's needed. – Stijn de Witt Jan 08 '14 at 21:08
  • @Anthony: Hard to say for sure but it looks like a character encoding problem. Unicode characters are 32 bit numbers (codepoints) which are most of the time encoded as UTF-8. UTF-8 uses variable length characters. ASCII characters (codepoints 0 .. 127) use 1 byte but all codepoints above use more. Mostly 2 but it can go up to 4 or 6 even I believe... The more 'exotic' the character, the more bytes are used. So usually when you see a single character displayed as multiple characters it's an encoding problem. Experiment with your browser's View -> Encoding menu. – Stijn de Witt Jan 08 '14 at 21:11
  • FYI modern implementations (e.g., Font Squirrel, Google Fonts) are now using `url('GraublauWeb.eot?#iefix') format('embedded-opentype')` instead of `local('☺')`. – thdoan Nov 21 '14 at 04:38
41

The local(☺︎) is a css hack to divert IE6-8 from downloading fonts it can't use (it can only use fonts in EOT format).

Explained: The last src property takes precedence in the CSS cascade, meaning that the CSS will be parsed from bottom to top. The local(☺︎) will make IE skip the src at the bottom, without wasting bandwidth downloading fonts it can't use, and rather go straight to the font in .eot format (defined on the line above in your question) that it will use. The smiley is just to ensure there won't be a local font with that name (character combination).

Read more here: http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

Magne
  • 16,401
  • 10
  • 68
  • 88