@font-face and FontSquirrel

Creating various font file types: FontSquirrel

If you have a font that you are legally allowed to redistribute, you don’t need to use these services. You do, however, need to convert your font into EOT, SVG, WOFF, etc.

We now know the syntax for the two fonts used in our webpage. The main question now is, "how do we get all these font files?"

One of the easiest services is Font Squirrel’s @font-face generator at http://www.fontsquirrel.com/fontface/generator. This service allows you to select fonts from your desktop, and convert them to TrueType, EOT, WOFF, SVG, SVGZ and even base-64 encoded with a few clicks of your mouse.

FontSquirrel is a free service. When using it, check on ‘Expert’ to be able to select your character set. Add your fonts, select ‘Expert’, then create your own settings and add your own character subsets.

Here are the options provided by font-squirrel:

  1. Apply Hinting to improve rasterization in Windows.
  2. Fix vertical metrics to normalize the "padding" on the top and bottom of the font to be the same across browsers and platforms.
  3. Remove Kerning to reduce filesize.
  4. WebOnly™ making the font uninstallable on a desktop computer.
  5. Subset Fonts to remove extraneous glyphs from your font reducing filesize, as explained above.
  6. Style Linking to include font property descriptors, adding the appropriate font-weight and font-style statements to the @font-face at-rule when creating the sample CSS.
  7. Base64 encoding of font in a CSS stylesheet as a data URI
  8. OpenType features allowing the "flattening" of selected fot features like ‘small caps’.
  9. Adjust spacing by loosening or tightening the "tracking" of a font. The value is in units of the em square. If the em square is 2048, then adding 50 units of padding makes the spacing slightly looser.

If you so choose, Font Squirrel can create web only fonts files that are not installable. Check the WebOnly box under Misc Options to disable font installation by your visitors.

Font Squirrel can also create smaller font-files by only including a subset of characters. Select the character type and language(s) other than accent-less Latin characters. You can also select the ability to remove kerning and/or even include small caps if the font allows.

For our newspaper, we can select what character set we want or need. For our font Carnevalee Freakshow, which is used for our ads and displays in uppercase, we need a small subset of letters. I recommend including uppercase, numbers, punctuation and the unicode characters of 2122, 00ae, 00a9 (trademark, registered and copyright symbols).

For the League Gothic font I would recommend a more expanded character subset. League Gothic is used for the article titles, which like our ads, are all uppercase. We do not need to include lowercase letters. However, we do need to consider that users may translate our content into other languages. We need to include capital letters, numbers, and punctuation. We should also include the capital letters of accented and non-roman character sets. The page in its current state is using a very small subset of characters, but what if someone uses translate.google.com into Greek?

When employing @font-face, minimize font file size as much as reasonably possible while making sure to include enough characters that a translated version of your site is still accessible.

Once you’ve uploaded your font for processing and selected all your options, hit "Download your kit". FontSquirrel provides a download containing your font files with the extensions requested, a demo HTML file for each font face style, stylesheet from which you can copy and paste CSS markup directly into your stylesheet.

To target all browsers, make sure you have created TTF, WOFF, EOT and SVG font file formats. Once you have created the font files, upload the web fonts to your server.

Copy and paste the CSS code provided, changing the path the font folder. For whichever selectors you want to implement your included font, modify the font-family property value to include the name of your font.

Troubleshooting

If your fonts aren’t loading in a particular browser, it could be a browser quirk.

If the font is not showing in any browser, it could very well be the path in your CSS. Check to make sure that the font file is actually where you expect it to be. Web Inspector (webkit), DragonFly (Opera) or Firebug (the Firefox extension) will indicate if the file is missing.

FontSquirrel provides a specimen and a png of windows rendering. Check the font-demo.html for your file to make sure that the specimen looks like the png. If it does, you know that the font is working, and that the issue is fixable.

If you’re sure that the path is correct and the file is where it is supposed to be and is a working font file it may be an .htaccess issue.

If your fonts are on an IIS Windows server, realize that Windows does not serve up files if it does not understand the MIME type. Add WOFF to your list of MIME types.

There are also some browser security features. IE9 and Firefox both require that fonts be served from the same domain as the rest of the webpage.

Potential Cons of @font-face

Fonts can improve performance and decrease maintenance time if used instead of text images. But remember that font files can be huge. Really huge. If you need a particular font for a banner ad, it may make more sense with limited text requirement to create an image instead of including font files. Weigh the pros and cons.

When considering including multiple font files with your site, consider performance. Multiple fonts not only increase your sites download speed, but font overuse can be tacky and the wrong font can may your content difficult to read.

Browsers won’t render a font until the entire font has downloaded. There is the potential of text appearing before the font is loaded, creating a Flash of Unstyled Text (FOUT). To try to prevent this from happening, make your file sizes as small as possible, gzip them, include your @font-face rules at the top of your CSS file at the top of the page, and generally employ all the tricks you employed to make sure image files loaded fast.

Of course, I don’t want to scare you away from using @font-face. I just want to encourage you to not take the decision to include various fonts too lightly.

Published by

Estelle Weyl

My name is Estelle Weyl. I an open web evangelist and community engineer. I'm a consulting web developer, writing technical books with O'Reilly, running frontend workshops, and speaking about web development, performance, and other fun stuff all over the world. If you have any recommendations on topics for me to hit, please let me know via @estellevw.