CSS @font-face – what does “src: local(‘☺’)” mean?

by

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.

More Related Contents:

  1. Using custom fonts using CSS?
  2. Are eot, ttf, and svg still necessary in the font-face declaration?
  3. CSS @font-face not working with Firefox, but working with Chrome and IE
  4. Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading
  5. Why is @font-face throwing a 404 error on woff files?
  6. Wait for fonts to load before rendering web page
  7. Why should we include ttf, eot, woff, svg,… in a font-face
  8. @font-face EOT not loading over HTTPS
  9. @font-face anti-aliasing on windows and mac
  10. @font-face works in IE8 but not IE9
  11. CSS @font-face absolute URL from external domain: fonts not loading in firefox
  12. @font-face src: local – How to use the local font if the user already has it?
  13. Multiple font-weights, one @font-face query
  14. Google warning: Resource interpreted as Font but transferred with MIME type application/octet-stream
  15. Fallback fonts on special characters
  16. CSS @font-face not working in IE8
  17. font-face with wrong MIME type in Chrome
  18. Internet Explorer @font-face is failing
  19. Non-Standard fonts in web?
  20. On IE CSS font-face works only when navigating through inner links
  21. Using @font-face with Rails 3.1 app?
  22. Downloadable font on firefox: bad URI or cross-site access not allowed
  23. Fix custom font line-height with CSS
  24. Is quoting the value of url() really necessary?
  25. What does the forward slash mean in the CSS font shorthand?
  26. CSS to prevent child element from inheriting parent styles [duplicate]
  27. Stylesheet not updating when I refresh my site
  28. How to use a unitless CSS variables and later add the needed unit?
  29. Chrome renders colours differently from Safari and Firefox
  30. How to remove outline border from input button

Leave a Comment