Did you know that with CSS 3 you can load custom true type fonts and use them on your website?
It’s relatively simple to do too. First you define a new font face with a URL to your file, then you call it just like you would call a pre-defined font.
In this example I’m using the Old Typewriter font from http://www.dafont.com/old-typewriter.font. Once unzipped you’ll end up with a standard .ttf file that you can reference like so:
@font-face {
font-family:"Old-Typewriter";
src:url(Old-Typewriter.ttf);
}
Now you can style your text via the font-family property:
.your-class {
font-family:"Old-Typewriter";
}
Where to get custom fonts
There are several sites that offer true type fonts for download. They’ll work in Word and Pages too once installed on your local machine. Here are some of my favourite sites for finding nice fonts:
Note that some fonts have usage restrictions: Even though you may be able to download them, check the license and see if you’re allowed to use them, or find out if you must buy a license before you do.
Also note that once you upload the font to your server it can be accessed by everybody.
Compatible Font Types
You’ll be pleased to hear that CSS supports several font types to be used as described above:
- TrueType (.ttf)
- Web Open Font Format (.woff)
- OpenType (.otf)
- Embedded OpenType (.eot)
- SVG Fonts (.svg, .svgz)
You can also link to existing online fonts, then simply @import them in your CSS. Here’s an example:
@import url(http://fonts.googleapis.com/css?family=Lato); .your-class { font-family: Lato, Helvetica, sans-serif; }