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:

 @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/





Jay is the CEO and founder of WP Hosting, a boutique style managed WordPress hosting and support service. He has been working with Plesk since version 9 and is a qualified Parallels Automation Professional. In his spare time he likes to develop iOS apps and WordPress plugins, or draw on tablet devices. He blogs about his coding journey at http://wpguru.co.uk and http://pinkstone.co.uk.