articles / Custom fonts on the web with @font-face

Table of Contents

Introduction

Expanding the font repertoire a webdesigner could use on websites has been a dream for a few years now. We have all based our designs upon fonts like Helvetica, Arial, Verdana or (even) Times New Roman. Designers have been using images for logos, tags or even headings for a long time to be able to get custom typography into their design. During the last couple of years Flash and Javascript technics has appeared to solve the custom font problems, but those technics require that the user has flash installed or javascript turned on in their browser.

Say hello to @font-face. It is a css rule that lets users temporary install and display custom fonts when the user visit your website. I am going to go through the different browser implementations and how the browsers display the custom fonts.

Licensing

By adding custom fonts to your site you might run into truble if you don’t sort out what you are allowed to do from the font creator. Some font designers have restrictions soo you would have to buy a custome license for the web, some are open source or have CC licences and some arn’t allowed on the web at all. Allmost every font you download/buy comes with a read me file that declares what license the font have. All the fonts used on this page is ready for the web and you can check them out in the fonts used section below. I’ve included a link section that points out some web ready font foundries.

Fontfileformats

  • TrueType(.ttf)
  • OpenType(.otf)
  • Embedded OpenType(.eot)
  • Scalable Vector Graphics(.svg)
  • TrueDoc(.pfr)
  • Web Open Font Format(.woff)

During 2009 more and more developers started using @font-face to implement custom fonts in their webdesigns. There is however currently no standard on what file format designers should use. Different browsers currently support different file formats. Microsoft has released the .eot file format for approval by the W3C as a web font standard. The open source community with support from the Mozilla foundation has submitted the .woff format for approval by the W3C as the open source alternative to .eot. Both formats are currently processed by the W3C and I would reckon we would see some standardization for a web font format during 2010.

Browser compatibility

Internet Explorer Mozilla family Safari Chrome Opera Netscape
.ttf No 3.5 3.1 2.0* 10.0 No
.otf No 3.5 3.1 No 10 No
.eot 4 No No No No No
.svg No No 3.1 0.3 10.0 No
.pfr 4 (with plugin) No No No No 4-6
.woff No 3.6 No No No No

(*) Disabled by default. Can be activated via a command line switch

Table is licensed with Creatice Commons 3.0 by-sa from author Wikipedia

Convert your font

There is a couple of onlines services out there that you can use to convert your font. My favorite by far is onlinefontconverter.com. You just add your fonts as an attachment to the mail and write in the subject field the kind of format you want it converted into.

  1. Open your mail program and add convert@onlinefontconverter.com to the “To” field.
  2. Add the format you want it converted to as the subject
  3. Attach the font files you want converted

You of course have to own the appropriate license for the fonts you want converted.

The file size of the svg file you get from the onlinefontconverter.com is rather large, so I recommend that use a Java toolkit called Batik. If you are on a Mac you already have Java installed and only need to download Batik. If you are on a windows machine you need to download and setup Java first.

The next thing you need to do is open a terminal or command line and run the following:

java -jar /path-to-where-the-script-is-stored/batik-1.7/batik-ttf2svg.jar FontName.ttf -o FontName.svg -id font

The Batik toolkit only support TrueType as input format.

Webkit – Safari and Chrome

Both Safari and Chrome use the webkit to render webpages. Custom fonts have been supported since Safari 3.1 and Chrome 3.0.

CSS code

/*
===========================================
Diavlo is a font by Jos Buivenga (exljbris) -> www.exljbris.nl
===========================================
*/
@font-face { font-family: "DiavloLight"; src: url(diavlo_light.svg#diavlo_light) format("svg"); }

Internet Explorer

Custom fonts with @font-face in Internet Explorer have been around since IE4. There is however a twist to get your fonts up and running on the most common webbrowser. IE only support Embedded OpenType(.eot) or DocType(.ptr) file format. The Internet Explorer team has however said that they look into the Web Open Font Format(.woff) format for version 9 of their browser.

CSS code

/*
===========================================
Diavlo is a font by Jos Buivenga (exljbris) -> www.exljbris.nl
===========================================
*/
@font-face { font-family: "DiavloLight"; src: url(diavlo_light.eot);  }

Firefox

Firefox has had support for @font-face since version 3.5 with the .otf and .ttf formats. Version 3.6 of firefox adds the support of the .woff format.

CSS code

@font-face { font-family: "ChunkFive"; src: url('Chunkfive.otf') format('opentype'), url('Chunkfive.woff') format('woff');}

Opera

Opera has supported Scalable Vector Graphic (.svg) fonts since version 9 of their browser. They added support for both Truetype(.ttf) and OpenType(.otf) in version 10 of the Opera browser.

CSS code

/*
===========================================
Diavlo is a font by Jos Buivenga (exljbris) -> www.exljbris.nl
===========================================
*/
@font-face { font-family: "DiavloLight"; src: url(diavlo_light.otf) format("opentype"); }

How to declare custom fonts for all browsers

If you want custom fonts displayed in Internet Explorer, Firefox, Chrome, Safari or Opera you would want to declare the css like this.

@font-face {
	font-family: 'ChunkFive';
	src: url('Chunkfive.eot');
	src: local('ChunkFive'), local('ChunkFive'), url('Chunkfive.woff') format('woff'), url('Chunkfive.otf') format('opentype'), url('Chunkfive.svg#ChunkFive') format('svg');
}

That is .eot format for Internet Explorer, .woff format for Firefox 3.6 + other browsers when they get support for it and the .otf and .svg format for Safari/Chrome/Safari on iPhone/Android browser.

How custom fonts get displayed in the different browsers

I have created a test page with Chunk as the huge header font and Junction as the paragraph font. All the images are 1:1 size ratio with no other post production than labeling them.

Windows

As you can see custom fonts looks choppy in Firefox and Internet explorer. Both Firefox and Internet Explorer use Windows own font rendring system and it does not apply any anti aliasing. The two webkit based browsers, Safari and Chrome looks fine due to webkits own font rendering system. Opera as well has its own font rendering system soo custom fonts looks fine in that browser.

Linux

I currently have limited access to linux based computers thats why there is only two screenshots. Both screenshots are taken from the browsershots.org website. The rendering of the large Chunk font under Debian has some huge issues. The custom fonts looks fine in Opera 10 on Ubuntu 8.

Mac

All browsers on the mac render the text fine due to the build in font anti aliasing on Mac.

Optimize the loading of fonts

As more web browsers get on the Web Open Font Format(.Woff) bandwagon we would be able to scrap out some of the font formats from our markup. For now you could at least scrap out the the Internet Explorer specific font with the IE conditional tag.

<!--[if IE]>
<style type="text/css">
@font-face { font-family: Chunk; src: url("fonts/Chunkfive.eot");}
</style>
<!--[endif]-->

Another solution to speed up the site loading is to load a seperate css file with all the font information depending on your browser when the DOM is ready.

//jQuery version
$(document).ready(function() {
var fontURL = ”;

if(jQuery.browser.msie)
fontURL = ’style-ie-fonts.css’;
else if(jQuery.browser.safari)
fontURL = ’style-safari-fonts.css’;
else if(jQuery.browser.mozilla)
fontURL = ’style-mozilla-fonts.css’;
else if(jQuery.browser.chrome)
fontURL = ’style-chrome-fonts.css’;

if (document.createStyleSheet) {
document.createStyleSheet(fontURL);
} else {
var cssLink = $(document.createElement(“link”));
cssLink.attr({
rel: “stylesheet”,
type: “text/css”,
href: fontURL
});
$(“head”).append(cssLink);
}
});

Improved the jQuery code from Vegard Sandvold’s comment below.

Fonts used in this article

Chunk

This is the bold font used in the site headings and on the navigation on this site. The font is found on The League of Moveable Type.

Junction

This font is used for the general paragraphs on this page. Check out and download the font from The League of Moveable Type.

Fontin

This is a font by Jos Buivenga (exljbris). “The Fontin is designed to be used at small sizes. The color is darkish, the spacing loose and the x-height tall. “

Diavlo

This is a font by Jos Buivenga (exljbris). “Diavlo is a free font that contains 5 weights”.

Jellyka

Jellyka Estrya’s Handwriting is a handwritten font that works great for font sizes over 50px. Check it out and download the font on dafont.com

Commercial foundries which allow @font-face embedding

Foundries with a general support for @font-face embedding

Foundries with @font-face support for selected fonts

General support for @font-face announced

This list is derivative from Webfonts.info – Creative Commons BY 3.0 licensed

Tags:

This article was updated at 3:28 pm on April 11th, 2010 by Kenneth D. Nordahl

Comments

9 Responses to “Custom fonts on the web with @font-face”

Lucian:

March 23rd, 2010 at 5:36 PM

Really, really great article! But I have a simple question, the @font-face property is a CSS2 or CSS3 property?

Sorry for my English, and, again, thanks for the amazing article!

Vegard Sandvold:

April 4th, 2010 at 10:37 PM

Nice write-up on cross-browser font face usage, Kenneth!

I think your JavaScript for loading fonts needs a small adjustment in order to work with IE. $(‘head’).append(“”) won’t work. AFAIK, only way to make IE load a stylesheet this way is to call the non-standard function createStyleSheet().

Perhaps you want to try something like this:

$(document).ready(function() {
var fontURL = ”;

if(jQuery.browser.msie)
fontURL = ’style-ie-fonts.css’;
else if(jQuery.browser.safari)
fontURL = ’style-safari-fonts.css’;
else if(jQuery.browser.mozilla)
fontURL = ’style-mozilla-fonts.css’;
else if(jQuery.browser.chrome)
fontURL = ’style-chrome-fonts.css’;

if (document.createStyleSheet) {
document.createStyleSheet(fontURL);
} else {
var cssLink = $(document.createElement(“link”));
cssLink.attr({
rel: “stylesheet”,
type: “text/css”,
href: fontURL
});
$(“head”).append(cssLink);
}
});

Eddy Proca:

May 19th, 2010 at 6:37 PM

Chrome doesn’t seem to support truetype, do you know how to get it to work there? Thanks!

Raj:

June 5th, 2010 at 5:58 PM

Hi KDN, this is a great article!

I have been using cufon for the first time on one of my projects. As much as i like it, the delay and blurriness is not ideal. Will definitely be giving this a try on Monday. Do you know if there is as much of a delay, if any using this?

Cheers!

Leave a comment

*Required