Code Snippets Gallery

Blog > Code Snippets > CSS > Using @font-face Submit one!

Using @font-face

For TrueType fonts:

@font-face {
       font-family: Calibri;
       src: local("Calibri"), url("fonts/calibri.ttf") format("truetype");
       font-weight: normal;
       font-style: normal;
}

body {
       font-family: Calibri, sans-serif;
}

Note the “local” source. It will try to find a local copy first, then if not found, download a copy.

For OpenType fonts:

@font-face {
	font-family: Delicious;
	src: url('Delicious-Roman.otf');
}

@font-face {
	font-family: Delicious;
	font-weight: bold;
	src: url('Delicious-Bold.otf');
}

h3 { font-family: Delicious, sans-serif; }

Note this example has the same named font family with the same source file, only with a bold weight.

Using both formats (fallbacks):

src: url(../fonts/LateefRegAAT.ttf) format("truetype-aat"),
       url(../fonts/LateefRegOT.ttf) format("opentype");

Internet Explorer:

<!--[if IE]>
<style type="text/css" media="screen">

@font-face{
font-family:'Fontin-Regular';
src: url('Fontin-Regular.eot');
}

</style>
<![endif]-->

IE needs font in .EOT, embedded open type format, to work.

Responses

  1. Eddie says:

    Just as a suggestion, i think you should use the Paul Irish Bulletproof Method. This seems to be a more direct, quicker (less HTTP requests) format. Example:


    @font-face {
    font-family: Delicious;
    src: url(Delicious-Roman.eot);
    src: local('Delicious'), local(Delicious'),
    url(Delicious-Roman.otf) format('opentype');
    }

  2. Hi,
    I don’t understand where I could find *.eot file or *.otf file. There is a method to generate it?
    Thank you.

  3. For using a true type font do I need to specify a local font? It’s a home made font which no one will probably use.

  4. Thomas J says:

    I had a problem with the font I used not rendering properly when in small sizes. A few hours later (and a couple of grey hairs) I found that if your stylesheet is using


    @media screen {
    styles...
    }

    @media print {
    styles...
    }

    the @font-face needs to be outside. Like this:

    @font-face {}

    @media screen {
    styles...
    }

    @media print {
    styles...
    }

  5. Muhammad says:

    Really thank you man

Leave a Comment

Remember:
  • Be nice.
  • Wrap all code in <pre> and <code> tags. (single or multiple lines) and escape it first (turn <'s into &lt;'s).
  • You may use regular HTML stuff like <a href="">, <em>, and <strong>