Search code examples
cssembedded-fonts

CSS: Bulletproof @font-face: Smiley variation

Possible Duplicate:
CSS @font-face - what does “src: local('☺')” mean?

Hi,

I came across this article - Bulletproof @font-face syntax

http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

Here is the syntax of bulletproof,

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

but I don't understand what he says about the smiley face in the local(). What does it mean? Is it a standdard which is supported across browsers, PCs and Apples? Can I put something else in?

Here is what he explains,

Added 2010.02.04: There has been concern over specifying local font names. The primary reason is that you cede control to the user's machine, potentially showing a locally installed font instead of the one you want to serve. While that will load faster, there's a very small chance the file could be wrong.

To account for this gotcha, I've specified a local font name of '☺'. 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. This technique is recommended if you think a locally installed version of this font is not in your best interest.

thanks.

Solution

  • The smiley is used as the name of a font that cannot possibly exist (or is, at least, extremely unlikely) so that a local font that happens to have the same name as the desired fony will not be used