A collection of great @font-face resources summed up in one page!

Dislaimer: Some @font-face infomation has been deprecated due to newer browser versions and standards spec updates.

@font-face is the future

The days of being limited to just a handful of fonts on the web are rapidly coming a thing of the past. The problem is no longer a lack of viable solutions but rather an abundance of them. Technologies like Cufon, sIFR, FLIR and @font-face all represent different groups of developers placing bets on what they believe is to be the future of web typography. The @font-face CSS method is among the strongest, simplest and the most flexible out of those competitors in the game. @font-face is very simple to implement and brings cross-browser compatibility to your site. Over the last few years @font-face services have arisen in making it even easier to use custom fonts in your web designs.

Benefits of @font-face

But what about image replacements? deeper thoughts on old problematic habits

Of all of the problems that novice web designers can create when working with the web, the use of images to render web text seems to be the most widespread problem. Every approach presents at least one, if not all, of the following problems:

Today, the use of images to represent text is obsolete, thanks to @font-face

Just thinking about all the problems which arise through the use of images to present text on web pages is enough to bring on a migraine. Fortunately, an elegant solution now exists: it entails the automatic loading of any missing fonts by the browser using the CSS @font-face property – thus avoiding the need to create images to render text, with all the associated problems. Yes, the same CSS which savvy designers have come to rely on to make stunningly compelling web sites without breaking the web with Flash or other closed technology.

As the web goes, the technology is old: it has existed in Internet Explorer, and Internet Explorer only, since 1997. Other browser vendors have been ambivalent about the approach, due to issues surrounding copyright and patents. Yet over the last year and a half or so all the other major browsers have adopted font downloading solutions and, through automatic browser updates, it is safe to say that any of the techniques for using images to render fonts can now be considered obsolete. Long live the web!

How? On a practical level, there are four main steps:

  1. Verify that the fonts to be used are not encumbered by commercial licenses or buy the necessary license(s). This step is not new, it is also necessary for fonts distributed on the web through images. Many commercial fonts are sold for single computer use – no digital distribution is allowed. For example, Adobe fonts can not be used on the web except by subscription. Yet it should be noted that there are many quality fonts available without license constraints. The following collections are dedicated to free web fonts: Font Squirrel, Google Web Fonts (In May 2010 Google announced the release of free fonts for the Web. The primary reason is probably due to the need to support some fonts from Microsoft Office in Google Docs. Many of the fonts are also available elsewhere. The beauty of Google project is that Google takes care of license verification and hosting), Dieter Steffmann, Larabie Fonts and Font ex.
  2. Prepare the fonts in three formats:. .woff, the format of the future, already supported by almost all of the latest generation browsers, .eot for versions of Internet Explorer 4+ (IE8+ supports ttf / otf), .ttf or .otf for all the others. Fortunately there is already an online font conversion service which does everything with a few clicks.
  3. Place the files on the web server; check mime type settings for at least IIS (font/otf, image/svg+xml).
  4. Insert the appropriate CSS code for the fonts in the web pages that will use the font. Following the examples given here, the result should look something like this (svg has been deprecated since modern mobile/table browsers support other font types):

	@font-face {
	  font-family: 'Source Code Pro';
	  font-weight:normal;
	  font-style:normal;
	  font-variant:normal;
	  src: url("Source Code Pro-Book.eot");
	  src: local('☺'),
	    url("Source Code Pro-Book.woff") format("woff"),
	    url("Source Code Pro-Book.ttf") format("truetype"),	
	}
	@font-face {
	  font-family: 'Source Code Pro';
	  font-weight:bold;
	  font-style:normal;
	  font-variant:normal;
	  src: url("Source Code Pro-Demi.eot");
	  src: local('☺'),
	    url("Source Code Pro-Demi.woff") format("woff"),
	    url("Source Code Pro-Demi.ttf") format("truetype"),	}
	@font-face {
	  font-family: 'Source Code Pro';
	  font-weight:normal;
	  font-style:oblique;
	  font-variant:normal;
	  src: url("Source Code Pro-BookObli.eot");
	  src: local('☺'),
	    url("Source Code Pro-BookObli.woff") format("woff"),
	    url("Source Code Pro-BookObli.ttf") format("truetype"),	}
	@font-face {
	  font-family: 'Source Code Pro';
	  font-weight:bold;
	  font-style:oblique;
	  font-variant:normal;
	  src: url("Source Code Pro-DemiObli.eot");
	  src: local('☺'),
	    url("Source Code Pro-DemiObli.woff") format("woff"),
	    url("Source Code Pro-DemiObli.ttf") format("truetype"),
	}
	

If the font will be used in all, or almost all, pages, it is recommended that the font information be placed in an external CSS file. That will facilitate maintenance and speed up page loading time for visits including multiple pages. Keep in mind there is a CSS Fonts Module Level 3 "Candidate Recommendation" for a new property: unicode-range.

So what's this ☺

There has been concern over specifying local font names. The primary reason is that you cede control to the user's machine, potentially showing a locally installed font instead of the one you want to serve. While that will load faster, there's a very small chance the file could be wrong. To account for this gotcha, specify a local font name of '☺'. 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. This technique is recommended if you think a locally installed version of this font is not in your best interest.

The smiley variation is Paul Irish's new recommendation. ← Click through to read why.

Available Font Types (a little history)

TrueType (.ttf)
TrueType is an outline font standard originally developed by Apple Computer in the late 1980s as a competitor to Adobe’s Type 1 fonts used in PostScript. Source
OpenType (.otf)
OpenType is a format for scalable computer fonts. It was built on its predecessor TrueType, retaining TrueType’s basic structure and adding many intricate data structures for prescribing typographic behavior. Source
OpenType PS (.otf)
In addition, we have the PostScript (PS) “flavor”, sometimes known as OpenType PS or CFF-based OpenType and having an “.otf” file suffix. Adobe and font producers including Elsner+Flake, Emigre, Storm and URW++ typically produce fonts in the OpenType PS flavor. Source
OpenType TT (.ttf)
OpenType terminology redefines Windows TrueType fonts as “the TrueType (TT) flavor of OpenType”, sometimes called OpenType TT and having a “.ttf” file suffix. Microsoft and other font producers including Linotype typically produce OpenType fonts in the OpenType TT flavor. Since OpenType TT fonts are for all practical purposes internally the same format as Windows TrueType fonts, there are no problems getting such fonts to work in Windows. Even Windows 3.1 from 1992 will display such fonts. Source
Embedded OpenType (.eot)
Embedded OpenType fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages. Source
Scalable Vector Graphics (.svg)
Scalable Vector Graphics is a family of specifications of an XML-based file format for describing two-dimensional vector graphics, both static and dynamic (i.e. interactive or animated). Source
Web Open Font Format (.woff)
The format itself is intended to be a simple repackaging of OpenType or TrueType font data, it doesn’t introduce any new behavior, alter the @font-face linking mechanism or affect the way fonts are rendered. Many font vendors have expressed support for this new format so the hope is this will open up a wider range of font options for web designers. Source

@font-face — major browser compatibility chart

Browser Support .ttf .otf .eot .svg .woff
IE6-8IE6-IE8 No No Yes No No
IE9+IE9+ Partial Partial Yes Partial Yes
FirefoxFirefox 3.6+ Yes Yes No Yes Yes
FirefoxFirefox 35+ Yes Yes No Yes Yes
ChromeChrome 5+ Yes Yes No Yes Yes
SafariSafari 5.1+ Yes Yes No Yes Yes
OperaOpera 12.1+ Yes Yes No Yes Yes
No None Yes Yes Partial Partial

@font-face resources, sites & more info.

@font-face videos/presentations

Paul Irish @font-face 101

Squeezing The Best Out Of Webfonts

Employing Custom Fonts