How to use a custom font in CSS

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:

Now you can style your text via the font-family property:

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/

About Jay Versluis

Jay is a medical miracle known as a Super Survivor. He runs two YouTube channels, five websites and several podcast feeds. To see what else he's up to, and to support him on his mission to make the world a better place, check out his Patreon Campaign.

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

  1. You can also link to existing online fonts, then simply @import them in your CSS. Here’s an example:

Add your voice!