Code Snippets Gallery
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.
Loading ...
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');
}
I agree with Eddie, except do TTF and OTF fonts all have EOT versions? I’m not sure, for example, you can find both a TTF and EOT version of the Calibri font. It looks like there’s a line command utility out there to convert TTF and OTF fonts to EOT so that might be the best solution, but it sure seems like a chore.
fontsquirrel.com allows you to upload a font (make sure the license allows this) and will then create the various versions of the font for you.
Hi,
I don’t understand where I could find *.eot file or *.otf file. There is a method to generate it?
Thank you.
Those are the font files. The extension .otf is an open-type font.
What should i do if a font has spaces for example I have a font called “some font” but the file name is somefont.ttf
exactly what you just did: put the two words “in quotes”
As mentioned above fontsquirrel.com.
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.
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...
}
Really thank you man