Question

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?

Answer 1

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.