Using CSS3 and @font-face to use any custom font on a web site

June 4, 2011

I should have written about this long ago, but better late than never – time to share my experiences. Typography is an important part of user experience, and with CSS3 @font-face we can offer users any font we want to.

CSS3 @font-face

Font-face works just like the @media directive, where you declare a font-face’s family name and the source of the font file(s) you want to use. Additionally you can also control the font’s weight and style. A very simple example looks like this:

@font-face {
	font-family: "ChantelliAntiquaRegular";
	src: local("☺"), url("Chantelli_Antiqua-webfont.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

The smiley character there is basically just a way to avoid referencing a local font on the machine/device and not ending up with what you hoped for. Paul Irish describes this in more detail in Bulletproof @font-face syntax.

Then to use the font you just refer to it like any other font family, i.e.:

h1 {
	font-family: "ChantelliAntiquaRegular";
}

Various font formats

However, there’s a multitude of font formats to use, so let’s break down each of them:

TrueType (.ttf)

The most common font format on Windows and Mac. Considered a raw format, as it’s not optimized for the web.

OpenType (.otf)

Built based on TrueType, offering more capabilities. Also considered a raw format.

WOFF – Web Open Font Format (.woff)

WOFF is an open compressed version of TrueType/OpenType fonts, which also supports metadata inclusion separated from the font data. It is regarded as an optimal format for web font usage.

EOT – Embedded Open Type (.eot)

Designed by Microsoft to be used for fonts on web pages. Can be created from the TrueType font format.

SVG (Scalable Vector Graphics) Fonts (.svg)

Font rendering based on SVG. You can also use .svgz which is a gzipped version of SVG fonts.

Web browser support

Having shown basic usage of @font-face and having gone through various existing font formats, let’s look at web browser support.

@font-face

The support for the @font-face is quite widely implemented:

• Internet Explorer 4+ (yes, for real)
• Mozilla Firefox 3.5+
• Google Chrome 4+
• Safari 3.1+
• Opera 10+

WOFF support

• Internet Explorer 9+
• Mozilla Firefox 3.6+
• Google Chrome 6+
• Safari 6+
• Opera 11.1+

OpenType support

• Mozilla Firefox 3.5+
• Google Chrome 4+
• Safari 3.1+
• Opera 10+
• iOS Mobile Safari 4.2+

TrueType support

• Internet Explorer 9+ (although a bit unclear)
• Mozilla Firefox 3.5+
• Google Chrome 4+
• Safari 3.1+
• Opera 10+
• iOS Mobile Safari 4.2+

EOT support

• Internet Explorer 4+

SVG Fonts support

• Google Chrome 4+
• Safari 3.1+
• Opera 10+
• iOS Mobile Safari 3.2+

What this means in practice is that you need to support WOFF, TrueType (or OpenType), EOT and SVG fonts for your web page to reach as many as possible.

A real-world example of using @font-face

With various font formats supported across the board, this is how a real-world example could look like:

@font-face {
	font-family: "ChantelliAntiquaRegular";
	src: url("Chantelli_Antiqua-webfont.eot");
	src: local("☺"), url("Chantelli_Antiqua-webfont.woff") format("woff"), url("Chantelli_Antiqua-webfont.ttf") format("truetype"), url("Chantelli_Antiqua-webfont.svg#webfontZjhIjbDc") format("svg");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	/* This declaration targets Internet Explorer */
	font-family: "ChantelliAntiquaRegular";
	src: url("Chantelli_Antiqua-webfont.eot");
}

@font-face {
	/* This declaration targets everything else */
	font-family: "ChantelliAntiquaRegular";
	src: url(//:) format("no404"), url("Chantelli_Antiqua-webfont.woff") format("woff"), url("Chantelli_Antiqua-webfont.ttf") format("truetype"), url("Chantelli_Antiqua-webfont.svg#webfontMFqI76bT") format("svg");
	font-weight: normal;
	font-style: normal;
}

As you can see here, first we declare a reference for the .eot font file, to make sure it works in older versions of Internet Explorer. Then we have the bullet-proof approach of avoiding local font files and then specifying various font file references and their formats in consecutive order until the web browser finds a format it supports.

Naturally, this means that you will need to have many formats of the same font to be available to target as many end users as possible.

A demo

If you go to my CSS3 @font-face test page, which is part my CSS3 test suite, you can see this code in action and see how it is rendered in various web browsers.

Font Squirrel

An excellent resource both for finding open fonts, free to use, and to generate the above @font-face code and corresponding font files, is Font Squirrel. They have ready kits for download and also their @font-face generator – just upload a font file and get lots of formats and ready CSS code back.

Security and protected fonts

This is all fantastic, right? Now can offer any font to the end users of the web sites we build, and our customers can finally use their own font. Well… Since you refer directly to the font files and make them publicly available on your web server, that means anyone can download them. And, as an extension of that, they can install the fonts on their machines, use on their own web sites etc.

While that might not seem like a problem to you, it’s about rights and ownership for the font(s) in use, and it is something you are required to consider.

When using Font Squirrel’s @font-face generator, you have an option that the font should not be installable on any desktop machine, leaving it only working on other web sites. Some customers will be cool with that. However, if you are using a bought font from a font foundry, chances are that you will not be allowed to have that available on your web server (same goes for some companies’ custom fonts).

In that case, Typekit could be an option for you, where they store all the fonts and they will only be accessible from your web site and completely protected. You can look at their pricing and see if it’s interesting.

Therefore, in the end, you need to take each case into consideration and do what’s right. My completely personal view would be:

1. Choose an open font or find an open font that looks close enough to what you want.
2. Use the customer’s font and ask them if it’s ok as long as it’s not possible for anyone else to install it on their machines.
3. Look at Typekit and see if they can offer what you need.

Now, go use some amazing fonts!

See the article here: Using CSS3 and @font-face to use any custom font on a web site

Tags: chantelli_antiqua, css, eot, format, internet, safari, src, svg, url