Font: font-family, @font-face, sifr and cufón

font-family

Like it or not, Web Safe fonts will be the basis of all internet text for the foreseeable future and with good reason; fonts such as Verdana and it’s serif counterpart Georgia were created for Microsoft specifically to be readable on small computer screens. Most body text on the internet is around 12px high ... that’s not a lot of room to get fancy!

Web Safe fonts
Font name Font-family Example text
Arial Arial, Helvetica, sans-serif This is an example sentence containing bold, italics and abbr.
Comic Sans MS Comic Sans MS, cursive This is an example sentence containing bold, italics and abbr.
Courier New Courier New, Courier, monospace This is an example sentence containing bold, italics and abbr.
Georgia Georgia, serif This is an example sentence containing bold, italics and abbr.
Impact Impact, Charcoal, sans-serif This is an example sentence containing bold, italics and abbr.
Tahoma Tahoma, Geneva, sans-serif This is an example sentence containing bold, italics and abbr.
Times New Roman Times New Roman, Times, serif This is an example sentence containing bold, italics and abbr.
Trebuchet MS Trebuchet MS, Helvetica, sans-serif This is an example sentence containing bold, italics and abbr.
Verdana Verdana, Geneva, sans-serif This is an example sentence containing bold, italics and abbr.

↑ Top

@font-face

@font-face was first proposed in the CSS2 specs and has been available for use in Internet Explorer since version 5, so you would think it would be well established by now, right? Not quite. The Internet Explorer implementation uses a proprietary Embedded Open Type (EOT) file format and the other major browsers have only recently began to support @font-face linking to TrueType (TTF) or OpenType (OTF) fonts; Safari since version 3.2, Firefox since version 3.5 and Opera since version 10. Chrome has recently added support as of version 4.0.249.78, however, Chrome only supports the use of Scalable Vector Graphics (SVG) files in @font-face, as does the iPhone version of Safari…

So that makes three file formats that must be included to cover the majority of the active browsers today - TTF or OTF, EOT and SVG. But to be future proof we should also include one more and that is the Web Open File Format (WOFF). WOFF is currently supported by Firefox 3.6 and there are high hopes that Microsoft will include WOFF support in IE9. If this is the case, WOFF should emerge as the cross platform standard for font files on the web.

Fortunately, through the good work of people like Paul Irish and Font Squirrel, the process of getting all your font formats and the correct CSS is made super easier. Font Squirrel have a @font-face Generator which allows you to convert files into all the required formats, it even gives you the CSS to drop into your stylesheets. eg: 

@font-face {
font-family: 'ChunkFiveRegular';
src: url('Chunkfive.eot');
src: local('ChunkFive'), local('ChunkFive'), url('Chunkfive.woff') format('woff'), url('Chunkfive.ttf') format('truetype'), url('Chunkfive.svg#ChunkFive') format('svg');
}

The League of Moveable Type

Type Kit

Example: Chunk Five Regular

Example: Raleway Thin

↑ Top

sIFR

sIFR 3 is an open source Flash and Javascript solution for dynamic fonts on the web. It uses javascript to replace the text element and insert a Flash object containing the dynamically generated text. It can sometimes produce clearer results to @font-face but is much harder to implement, the method requires a SWF file containing the font (made a lot easier by the sIFR generator), it also requires some CSS and Javascript rules that can be a little mind bending at first glance.

Note: This method will not work on all platforms, including the iPhone and those with Javascript or Flash disabled. I personally use a Flash blocker (FlashBlock for Firefox and ClickToFlash for Safari) which displays sIFR as a grey box.

Example: Chunk Five Regular

Example: Raleway Thin

↑ Top

cufón

Cufón is the new kid on the block (for me at least). It converts font paths to Vector Markup Language (VML) paths stored in JSON which are displayed using Javascript. Understand? Don’t worry, neither do I… the important thing is it renders fast, does not use Flash and has most the benefits of @font-face (apart from selecting text).

Example: Chunk Five Regular

Example: Raleway Thin

↑ Top

kilbot's recommendation

Prior to 2010, sIFR was one of the most reliable ways to dynamically generate web fonts, however with the adoption of @font-face by the major browsers - and the growing anti-flash movement - it is now my least favoured technique. For corporate websites that require the most reliable method with the smallest footprint I really recommend sticking with web safe fonts. Arial, Verdana and Georgia are still classy ... and you can do a lot of interesting things with whitespace, colours and icons wink

For websites that can be a little more adventurous and don’t mind taking an extra 50-100KB hit, my first choice would be using the @font-face rule with a free & open-source font (for example: The League of Moveable Type). Some trial and error still may be necessary to check the readability across browser, especially older Windows systems which don’t provide anti-aliasing. If the font you require is not legible using the @font-face CSS rule, cufón is an effective, short-term hack solution.

↑ Top

blog comments powered by Disqus