Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>if you read the notes in font-squirrel's font-face generator, you'll see that it was a gotcha by paul irish. </p> <p>Here is the excerpt from his <a href="http://paulirish.com/2010/font-face-gotchas/#smiley" rel="noreferrer">blog post</a>:</p> <hr> <blockquote> <h3>And.. regarding <code>@font-face</code> syntax</h3> <p>I now recommend the bulletproof smiley variation over the original bulletproof syntax.</p> <pre><code>@font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('☺'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype'); } </code></pre> <p>From the bulletproof post:</p> <blockquote> <p>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.</p> </blockquote> <p>There are a few reasons why smiley is a better solution:</p> <ul> <li><p>Webkit+Font Management software can mess up local references, like turning glyphs into A blocks. </p></li> <li><p>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.</p></li> <li><p>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.</p></li> </ul> <p>These are all pretty edge case issues, but it's worth considering.</p> </blockquote>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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