Font Embedding

Font embedding has become the saviour of typography on the web. Without it, we would still be stuck using the usual array of ‘web-safe’ fonts such as Arial, Georgia and Verdana. Not that there is anything wrong with them, just designers needed more choice and variety is the spice of life as they say. In fact web-safe fonts certainly played their part in forcing designers to create readable body text as they’re all very readable at smaller sizes.

@font-face

Advantages:

• Easy to setup (see previous post)
• Behaves exactly the same as regular text
• Even works in IE6+ (albeit through Microsoft’s proprietary format)

Disadvantages:

• Limited use of fonts due to no form of copy protection

TypeKit

Advantages:

• Huge selection of commercial fonts to choose from
• All the benefits of @font-face but with copy protection

Disadvantages:

• You don’t own the font for use in Photoshop designs etc.
• Relies on JavaScript
• Isn’t free (although it isn’t expensive)

Typotheque

Advantages:

• Doesn’t use JavaScrip, only CSS
• All the benefits of @font-face but with copy protection

Disadvantages:

• Seemingly expensive

Cufon

Advantages:

• Works across all browsers

Disadvantages:

• Requires JavaScript
• Can’t select text

sIFR

Advantages:

• Works across all browsers

Disadvantages:

• Requires Flash

Font Discovery

WhatTheFont

Have you ever found a great font but don’t know what it is? I frequently get asked what font I’ve used for the Inspect Element logo. Well now you can snap a screenshot and upload it to WhatTheFont which will return a list of the best matches of fonts. There have only been a couple of times where it hasn’t found the font I’ve been looking for but has worked flawlessly otherwise.

MyFonts

MyFonts gives you the ability to view an extensive selection of fonts with custom text before you buy.

FontShop

Online font store founded by extremely well respected typographer and designer Erik Spiekermann.

I Love Typography

You won’t go wrong by following I Love Typography to keep up with what’s going on in the world of Typography.

Education

Typedia

As the name suggests, Typedia aims to be an encyclopaedia of Type by blending the world of crowd-sourcing and social media and community. Not only is this a great place for font discovery but also a great place to learn about typography.

Free Fonts

Fonts available for @font-face embedding

You can’t just start using any font on the web. You have to respect individual licenses so this is a great resource displaying all fonts that have been specifically approved for @font-face embedding. The list is kept up to date as more fonts are added.

The League of Moveable Type

The League of Moveable Type, an open-source type movement, is very much a quality over quantity collection of free fonts.

exljbris Font Foundry

Similarly, exljbris Font Foundry is a collection of a few absolutely great fonts. All fonts are created and released by Jos Buivenga.

dafont

On the other end of the scale, dafont contains a huge number of fonts but finding a good font is like looking for a needle in a haystack. There are a few good hidden gems to be found though.

Font Squirrel’s Free @font-face Kits

A number of free fonts for you to download complete with the CSS you need to use the fonts on your site.

One more thing…

Don’t forget to check out Elliot Jay Stocks’ 8 Faces magazine when it launches as all signs point to it being excellent.

Very Simple

The good news is that it is a very simple method, unlike efforts such as sIFR which require both javascript and flash for implementation.

Below is the code implemented right here on Inspect Element:

@font-face {

     font-family: Anivers;

     src: url(../fonts/Anivers.otf) format("opentype");

}

This basically defines a font It’s important to note that you can create whatever name for the font-family property you want as this is what you’ll be referencing to further on in your CSS. In this case I’ve called it the same as the font name. Genius right? It’s best to call it by the name of the font for consistency.

Now you can reference the font-family anywhere in your CSS as you have been doing with the regular web-safe fonts. Here is an example of using this font on an H2 tag:

h2 { font-family: 'Anivers', 'Arial'; font-size: 20px; }

Interestingly the @font-face property can be used anywhere in a CSS file, even after the elements you style with it.

Browser Compatibility

Currently only Firefox 3.5 and webkit browsers such as Safari and Google Chrome will render. Of course, older browsers such as IE6 and IE7 will not support it and with IE8′s distinct lack of CSS3 features, that doesn’t support it either. Defining a second font for browsers that lack support is highly recommended. As you can see in the example above, Arial has been setup as the for those browsers to fall back on.

Examples of @font-face in the Wild

The Potential of Web Typography shows what a site can look like using @font-face for all text. Although this site’s creators claim that Firefox 3.5 displays the site as intended, I noticed that it doesn’t render the ‘x’ in Firefox at the top of the page. It renders perfectly in Safari however.

tap tap tap elegantly uses Fontin for titles.

Elliot Jay Stocks’ makes very good use of Graublau across his portfolio site.

Usage

Of course, all of this means that you can’t just use any font you want, even fonts you’ve purchased. This method makes it very easy for any visitor to extract the font in use and use it themselves. Basically stealing. Font creators work extremely hard so stick to using free fonts or fonts specifically licensed for @font-face usage.