Lesson Weekend

While building web layouts, oftentimes we want to use particular fonts to give our content the desired look, feel, and readability. In this lesson, we'll review how to import a free third-party font into our own project for use. We'll also discuss several rad resources to find free fonts along the way.

Locating Free Fonts

Several great resources include:

But, of course, these are only a few. A quick Google search for "free fonts" reveals tons more resources! Poke around, see which sites you like, and consider bookmarking your favorites later.

Font File Types

After selecting a free font, most resources allow you to download a .zip file containing the font itself and other associated files (image samples of what the font looks like, text files containing license and copyright information, etc.)

It'll likely contain one (or more) of the following file types. Let's discuss each:

  • .eot stands for Embedded Open Type. This is a font format originally made by Microsoft. It's the proprietary standard for Internet Explorer.

  • .woff or .woff2 stands for Web Open Font Format. As the name suggests, this format was made specifically for use on the web by Mozilla. These often load the fastest, because they're actually just compressed versions of OTF/TTF (discussed below.) They're also growing in popularity. The World Wide Web Consortium recently stated that it expected WOFF to eventually become the "single, interoperable [font] format" for all browsers.

  • .ttf or .otf, standing for TrueType Font and OpenType Font. Each of these are dual-purpose font types meant to work for both screens and printers. OTF is a slightly newer version of TTF, with a few extra features like extra space to include more characters.

  • .svg stands for Scalable Vector Graphics. These fonts are actually vector re-creations of a typeface. This allows them to have a much smaller file size, making them especially ideal for mobile applications.

However, not all browsers support all font types. You can check out what current browsers support in the Browser Support for Font Formats section of the W3Schools' article CSS3 Web Fonts.

For more information on different font types, check out Creative Market's blog post The Missing Guide to Font Formats: TTF, OTF, WFF & SVG.

Linking a Free Fonts

Great, but after we select and download our font, how do we actually get it up and running in a website? Let's review

Project Directory

First off, the font file(s) we just downloaded will need to be placed in the project directory. Different frameworks, codebases, companies, and languages have different preferred locations for font assets, so this may differ depending on the project you're working on. (For basic HTML projects here at Epicodus, a fonts directory is alright!)

@font-face CSS Rule

Regardless of where you place font files, we can apply those fonts to our project in our stylesheet(s) using the @font-face rule, which looks like this:

@font-face {
  font-family: myFontsName;
  src: url(exact_filepath_from_this_stylesheet_to_font.woff);
}
  • font-family denotes what we'll refer to this particular font as throughout the rest of the stylesheet. Because we provide the value myFontsName, we'll use the term myFontsName in any rules that refer to this particular font.

  • src points toward the location of the font file we downloaded and placed in our directory. Notice the url() portion surrounding the filepath. This is required.

  • These two descriptors are required. But there's additional optional configurations, too. (We'll discuss those in a moment.)

  • It's also recommended to place the @font-face rule at the top of your stylesheet.

Once the @font-face rule is present, we can refer to the font throughout the rest of our stylesheet by defining elements' font-family property as the font we just added:

@font-face {
  font-family: myFontsName;
  src: url(exact_filepath_from_this_stylesheet_to_font.woff);
}

body {
  font-family: myFontsName;
}

Here, notice the font-family value of body matches the font-family value of the @font-face rule we just defined. That's how CSS knows which font to apply to this element.

Additional @font-face Descriptors and Values

There are more descriptors we can add to the @font-face rule, too. While font-family and src (seen above) are required; these are all optional:

  • font-stretch refers to how "stretched" the font should be. The default is normal, but the following values are all valid:

    • condensed
    • ultra-condensed
    • extra-condensed
    • semi-condensed
    • expanded
    • semi-expanded
    • extra-expanded
    • ultra-expanded
  • font-weight refers to how bold the font appears. Default is normal, but the following are also valid options:

    • bold
    • Number values between 100 and 900.
  • font-style Refers to how the font should appear. Default is normal, but the following are also accepted:

    • italic
    • oblique

Meaning we could customize our @font-family rule above like this, if we so desired:

@font-face {
  font-family: myFontsName;
  src: url(exact_filepath_from_this_stylesheet_to_font.woff);
  font-weight: bold;
  font-style: italic;
  font-stretch: semi-expanded;
}

body {
  font-family: myFontsName;
}

Or, if we only wanted this font to take on these extra visual properties in the body element of our page, we could also do something like this:

@font-face {
  font-family: myFontsName;
  src: url(exact_filepath_from_this_stylesheet_to_font.woff);
}

body {
  font-family: myFontsName;
  font-weight: bold;
  font-style: italic;
  font-stretch: semi-expanded;
}

And that's it! You should now know both what to consider in selecting a font for a project, where to find free font resources, and how to actually "get" them into your next project. Great work.

Lesson 5 of 36
Last updated more than 3 months ago.