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
While @font-face relies on native browser rendering the same as web safe fonts
Reducing HTTPRequest, page weight (speeding up load time) and production time across the board (from art directors, project managers, content managers, developers and QA)
Avoiding image replacement hacks that can be hard to maintain
Keeping your brand look and feel across all meduims
Print stylesheets work with @font-face, woohoo!
Simple to implement
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:
images are distorted when a page is magnified using a browser’s zoom function
images are difficult to maintain – a graphic designer and sometimes a system administrator are need to change an image (images can be generated by the web server, but the quality is unlikely to match that of images created by a designer);
images are less than ideal for search engine visibility & SEO. Search engines are important because Internet users rely on search engines to find information and to find specific websites1. Search engines love text, text that they can match to user search queries. It is possible to specify text using the alt attribute of an image tag <img> , but the alt text does not have the same semantic value as text which would otherwise be in a text tag such as a <h1> , <h2> or <p>. Why? In part because search engines cannot know with certainty if the text in the image is the same text as is specified in the alt attribute – there’s a problem of trust. There is also the issue of speed. Google is clear on this point, page loading time is one of the more than 200 factors that Google takes into account when ranking results. Some designers think they can specify the image text as usual in the html document then use CSS to move it far outside the visual area of the page using text-indent:-9999px, margin:-4000px, left:-2000em or similar approaches. Hidden text techniques are explicitly frowned upon by Google and this “trick” has been discussed by Google employee Maile Ohye in her personal blog.
images create accessibility problems. The tools that read text aloud need to note when they find an image… they can’t just read an image’s alt text and pretend it is body text; the image could be a photo….
some text replacement with images tricks doesn’t work in all browsers. One of the more recent fads has been the use of Flash to render text. FYI Flash isn’t supported on iDevices.
is web distribution via image embedding covered by the font’s usage license?
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:
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.
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.
Place the files on the web server; check mime type settings for at least IIS (font/otf, image/svg+xml).
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):
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.
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 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