How to use a custom font in CSS

- by

CSS-LogoDid 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)

Source: http://www.w3.org/TR/2013/CR-css-fonts-3-20131003/



If you enjoy my content, please consider supporting me on Ko-fi. In return you can browse this whole site without any pesky ads! More details here.

2 thoughts on “How to use a custom font in CSS”

Leave a Comment!

This site uses Akismet to reduce spam. Learn how your comment data is processed.