03. Getting Fonts font-family, font-face

There are two ways you can get fonts loaded onto a reader's browser - either by using a browser's default, or importing your own.

1) Font-family

This group of fonts comes pre-loaded from the user's browser. Although they are limited in option, we have the assurance that they will readily be available. Additionally, we do not have to worry about licensing, which is a common issue for other fonts.

Examples include: Arial, Georgia, Times New Roman, Impact, Comic Sans, Courier New.

2) Font-face

If you want to use a font outside of the user's default font styles, we can use the @font-face method. With this, the font is downloaded from either a hosting website or from your own server.

This may take more bandwidth, so make sure the aesthetics are worth the extra loading time!

Here is how we use this:

@font-face {
  font-family: 'SlimJimFont';
  src: url('/public/fonts/slimjimfont.eot');

Here, the font "SlimJimFont" is to come from your public/fonts directory. Notice that this format is .eot.

There are several other font formats, and you should include them all in case your user's browser does not support a particular format. Thus you should place all the different formats in this order:

  1. eot
    • Embedded Open Type.
    • Created by Microsoft over 15 years ago.
    • The only type supported by IE8 and below.
  2. woff
    • Web Open Font Format.
    • Developed by Mozilla.
    • Loads faster than other formats because they use a compressed version structure.
    • Most likely the next generation font format option.
  3. tff/otf
    • TrueType Font and OpenType Font.
    • These fonts can be illegally copied.
  4. svg
    • Scalable Vector Graphics
    • vector re-creation of the font.
    • Small file size, making it ideal for mobile use.

One last note! Before you use @font-face fonts - make sure you read through the license, as some may come with a fee!

Websites that offer fonts for downloads

There are a good amount of websites that allow you to choose and download fonts. Here are just a few:

FontSquirrel allows you to choose from high-quality free fonts for commercial use.

Google web fonts allows you to access over 600 font families! Google Fonts.

Type Depot has a number of free fonts for download, along with great commercial fonts to buy.

1001 Free Fonts doesn't actually have 1001 free fonts. It has even more! Choose from a large selection from 64 categories.

Aching back from coding all day?

Foam Seat Cushion

Aching back from coding all day? Try Back Problems

This foam seat cushion relieves lowerback pain, numbness and pressure sores by promoting healthy weight distribution, posture and spine alignment. Furthermore, it reduces pressure on the tailbone and hip bones while sitting. Perfect for sitting on the computer desk for long periods of time.

$ Check price
99.9599.95Amazon 4.5 logo(9,445+ reviews)

More Back Problems resources

Build modern and responsive webpages


Build modern and responsive webpages Try Front-end

This book teaches HTML as if it's for anyone - hobbyists, students, and professionals - and it's full-color throughout. It utilizes information graphics and lifestyle photography to explain the topics in a simple way that is engaging. You can progress through the chapters from beginning to end or just dip into topics of particular interest at your leisure.

$ Check price
29.9929.99Amazon 4.5 logo(926+ reviews)

More Front-end resources