Back to testcases

CSS Fonts

Below should be working examples of headings replaced with a custom font.

Browser Support

Code

Based on Paul Irish's Bulletproof @font-face syntax, but altered to support a wider range of browsers as well as serving up the font faster.

@font-face {
	font-family: 'Capture it';
	src: url('Capture it.eot');
	src: local('Capture it'), 
	     url('Capture it.svg#CaptureIt') format('svg'),
	     url('Capture it.ttf') format('opentype');
}

h1, h2, h3, h4, h5, h6 { 
	font-family: "Capture it";  
}

Understanding the code

First of all we need to define a name for the font to reference to from our font-family attributes:

@font-face {
	font-family: 'Capture it';

It's worth noting that the reference name does not necessarily have to be the same as the font name, but it's wise to keep them consistent with each other just in case you run into a browser which does not support @font-face but have the font installed locally.

Next up we need to deal with Internet Explorer. Internet Explorer does not support TTF, OTF nor SVG fonts but instead uses its own EOT format. Internet Explorer deviates from the W3C's CSS Font specification and do not support comma-separated lists. We must therefore put Internet Explorer's font declaration on its own line:

src: url('Capture it.eot');

Since Internet Explorer does not support comma-separated lists, the first item in the list needs to be the local declaration:

src: local('Capture it'),

We do this for two reasons:

  1. Take the following as an example:

    src: url('Capture it.ttf') format('opentype');

    Internet Explorer does not support format hinting but will try to make sense of the string anyway. So instead of ignoring the font, it'll request the following invalid URL, leading to a '404 File Not Found' page:

    capture%it.ttf')%20format('opentype

    Since it does not understand the local() declaration at all, it'll ignore the statement altogether.

  2. Browsers other than Internet Explorer will start off by looking for a local copy of the font before progressing to download it.

Next, we specify the SVG font:

 url('Capture it.svg#CaptureIt') format('svg'),

SVG fonts is supported by a variety of browsers, including Safari 3.1+, Chrome 0.3+ and Opera 10+. We serve up the SVG font because while Chrome got support for TTF, it's disabled by default. That, and the fact that it's half the size of TTF :-)

You are required to refer to the font by id (#CaptureIt in the example), which points to the XML entry which holds the font data. Because of this you can embed several SVG fonts into the same file if you'd like to.

Finally we serve the TTF version:

url('Capture it.ttf') format('opentype');

TTF has wide support as well, consisting of Safari 3.1, Chrome 2.0+, Opera 10+ and Firefox 3.5+. However, Firefox is the only one that will actually use the TTF version as the other browsers support the SVG font.

I decided to use 'opentype' instead of 'truetype' as the format hint since it encompasses both TTF and OTF. While Chrome does not support OTF, it does not matter since it's already using the SVG version. One edit to change the format is easier than two, isn't it?

To wrap the whole thing together we try out our new font by styling the headings:

h1, h2, h3, h4, h5, h6 { 
	font-family: "Capture it";  
}

Now sit back and admire the result :-)

Tools