8

This might be a bit of hasty conclusion, but my question arose when I find that FontSquirrel.com does not generate the smiley (☺) with their @font-face generator.

Instead of the usual bulletproof standard (as laid out by Paul Irish regarding the smiley), the FontSquirrel's @font-face generator generates only this:

@font-face {
font-family: 'sansationregular';
src: url('sansation_regular-webfont.eot');
src: url('sansation_regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('sansation_regular-webfont.woff') format('woff'),
     url('sansation_regular-webfont.ttf') format('truetype'),
     url('sansation_regular-webfont.svg#sansationregular') format('svg');
font-weight: normal;
font-style: normal;
}

I realize it might be too hasty to conclude that by FontSquirrel abandoning the smiley means the smiley is no longer relevant, but considering FontSquirrel's @font-face generator seem to be the most popular and the most used generator out there, it makes me wonder why they don't include the smiley anymore. Especially because they seem to have included it before...

Just in case anyone's not familiar with the smiley, there is a good explanation here.

Community
  • 1
  • 1
deathlock
  • 2,756
  • 5
  • 27
  • 48

2 Answers2

5

EDIT - Ran into some more info that may interest: https://stackoverflow.com/a/4520467/1455709

Android 2.2 devices will suffer from local() usage, your @font-face wont work at all.

I can confirm that on Android 2.3.6 (default browser) local() will break your @font-face declaration.

Android 4.0 (default browser) works fine with local().

Unsure of everything in between. So again, I think it's down to your user base, or the effort you want to go to with multiple stylesheets to ensure your font works everywhere.

Well, they are only generating the code needed to display your font on all browsers. It's your decision as to whether you want to take the "risk" as to whether the user has a font by that name installed locally.

Depends on your audience I would say.

  • Does anyone really install fonts onto their local machine anymore? A lot of people on this site might, designers defiantly will, but the general public? Probably not.

  • What's the chance that the font your using has the same name as another different font? Small.

  • What's the chance the user has that particular other font installed? Very small.

If you want to ensure that the user downloads and uses your particular font, use it.

If you want to use Windows fonts (you're probably not allowed) and want them visible on Macs, then you wouldn't want to use the smiley face, so as to save every Windows user from downloading a font they already have (that actually is the same).

If you want to use a custom font called 'Verdana' you will defiantly want to use a smiley face. That, or make the font-family unique... I guess with a smiley face... But that would look messy, so use the local attribute.

Community
  • 1
  • 1
Patrick
  • 3,490
  • 1
  • 37
  • 64
0

The newest "bullet proof" method can always be found by using fontsquirrel's WEBFONT GENERATOR.

So since writing your question, .woff2support has been added.

Anyone wishing to clarify what the up-to-date method is the you should do the following.

Upload a tiny font file and this will generate a zip file with your font converted into all formats but more importantly it also contains a CSS file with the "bullet proof" method.

Which currently looks like this.

@font-face {
    font-family: 'font-name';
    src: url('fontawesome-webfont-webfont.eot');
    src: url('fontawesome-webfont-webfont.eot?#iefix') format('embedded-opentype'),
         url('fontawesome-webfont-webfont.woff2') format('woff2'),
         url('fontawesome-webfont-webfont.woff') format('woff'),
         url('fontawesome-webfont-webfont.ttf') format('truetype'),
         url('fontawesome-webfont-webfont.svg#font-name') format('svg');
    font-weight: normal;
    font-style: normal;

}
TarranJones
  • 4,084
  • 2
  • 38
  • 55