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?

Acupressure Mat & Pillow

Aching back from coding all day? Try Back Problems

Relieve your stress, back, neck and sciatic pain through 1,782 acupuncture points for immediate neck pain relief. Made for lower, upper and mid chronic back pain treatment, and improves circulation, sleep, digestion and quality of life.

$$ Check price
144.87144.87Amazon 4.5 logo(1,890+ reviews)

More Back Problems resources

Build modern and responsive webpages

Responsive Typography

Build modern and responsive webpages Try Front-end

Responsive web design helps your site maintain its design integrity on a variety of screen sizes, but how does it affect your typography? With this practical book, graphic designers, web designers, and front-end developers alike will learn the nuts and bolts of how to get the best appearance from type without sacrificing performance on any device.

$ Check price
24.9924.99Amazon 4.5 logo(3+ reviews)

More Front-end resources