CSS3 @font-face: no more flash

September 23rd, 2010 by Alex Leave a reply »

Time to move away from sIFR, cufon and all that strange stuff. Let’s start from W3C description of @font-face. As you may see, the form of the rule is as follows:

@font-face { <font-description> }

Now, let’s see what the <font-description> is. Basically it’s a font-family descriptor followed by the src descriptor, so the next rule should be valid:

@font-face {
	font-family: 'HelveticaRegular';
	src: url('helvetica.ttf');
}

Additionally, we can specify a font-weight and font-style of this font-family. Like this:

@font-face {
	font-family: 'HelveticaRegular';
	src: url('helvetica.ttf') format('truetype');
	font-style: normal;
	font-weight: normal;
}
 
.myclass {
	font-family: 'HelveticaRegular';
}

Now, all elements with font-family HelveticaRegular will be non-italic and normal weight by default. Now, let’s see what the browsers say…

Internet Explorer

Yes yes, him again. But, it’s no that bad as you might think. It does support the @font-face for 10 years already, but with one small difference: it doesn’t support TrueType fonts (ttf) but it supports Embedded OpenType (eot).

So, what we need is to convert TTF to EOT and put it in css like this:

@font-face {
	font-family: 'HelveticaRegular';
	src: url('helvetica.eot');
	src: url('helvetica.ttf') format('truetype');
}

Gecko and WebKit

These guys support TrueType and OpenType fonts (TTF and OTF, not EOT), and Gecko since 3.6 supports the WOFF format (Web Open Font Format). So basically, all you need is the same TrueType font.

Opera

Since 10.0 Opera supports TrueType and OpenType fonts too. The earlier 9.0+ versions supported SVG format, which is still supported by the newest too.

Mobile?

Luckily, iPhones and iPads support one format too – the SVG.

So we have 4 formats here: TTF, EOT, OTF and WOFF. Let’s find out how to get those.

Getting all that bundle..

First, let’s get the font we liked. I recommend going to fontex.org or dafont.com

Another great service is FontSquirrel’s font-face generator. Simply upload a font and get a ready bundle for all the browsers. You’ll get a pack with ready CSS, all the formats generated and a demo page

<style>
@font-face {
	font-family: 'newfacebookRegular';
	src: url('/projects/fonts/opnew_facebok-webfont.eot');
	src: url('/projects/fonts/new_facebok-webfont.woff') format('woff'), url('/projects/fonts/new_facebok-webfont.ttf') format('truetype'), url('/projects/fonts/new_facebok-webfont.svg#webfontB4W84jfk') format('svg');
	font-weight: normal;
	font-style: normal;
}
.newfacebookRegular {
	font-family: 'newfacebookRegular';
}
</style>
<span class='newfacebookRegular'>Now let's check if you see the custom font here</span>

Now let’s check if you see the custom font here

This page can be found by searching for:

helvetica eot



1 comment

  1. Very nice sharing thanks for sharing 🙂