General Question

tomasreichmann's avatar

Implementing CSS @font-face from start to finish?

Asked by tomasreichmann (125points) November 7th, 2009

I am looking into @font-face property. I have found an article about the CSS solutions (http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/), but I couldn’t find any more info about the files used.

The CSS:
@font-face {
font-family: ‘Graublau Web’;
src: url(‘GraublauWeb.eot’);
src: local(‘Graublau Web Regular’), local(‘Graublau Web’),
url(‘GraublauWeb.otf’) format(‘opentype’);
}

What files do I need for this to work and where can I get them? All I have are standard .ttf and sometimes .otf font files.

Observing members: 0 Composing members: 0

1 Answer

irondavy's avatar

The files you’re looking for are the EOT and OTF/TTF (interchangeable here) files. The other src values are saying “if they already have this font then sweet, just use that.”

IE requires EOT files while the rest use OTF/TTF. Microsoft provides software for converting OTF into EOT here:

http://www.microsoft.com/typography/web/embedding/weft3/download.aspx

Answer this question

Login

or

Join

to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
or
Knowledge Networking @ Fluther