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.