Bummer! You have been redirected as the page you requested could not be found.

Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Typography for Designers

Well done!

You have completed Typography for Designers!

Sign up for Treehouse Back to Library

How to Install Fonts

3:20 with Hope Armstrong

Now that we have some general knowledge about typography, let’s install some shiny, new fonts and look at what to consider when choosing a typeface.

Resources

Font websites

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [MUSIC] 0:00
    With all this talk about fonts, 0:05
    you're probably itching to get some new ones of your own. 0:06
    You're probably familiar with the standard set of fonts that come on your computer. 0:10
    These are called system fonts and Android, iOS, Windows, and 0:15
    Mac each have a different selection. 0:20
    These are immediately usable on your computer, 0:23
    although there's a relatively small selection. 0:26
    If you do decide to design with those system font, 0:30
    when it's time to develop it with code, you can either find a web font that allows 0:33
    everyone to see the font, even if they don't have it installed or 0:37
    you can create what's called a font stack in your code. 0:42
    It's a list that tells the browser which fonts to use. 0:46
    For example, you may prefer Helvetica, which is available on all Macs but 0:49
    not all Windows computers. 0:54
    So you can add Ariel as a fallback 0:57
    which is available on nearly every Windows computer. 1:00
    Luckily system fonts aren't the only option. 1:03
    There are tons of fonts available for download and they're easy to install. 1:07
    Here's how to install a font. 1:13
    Find a font foundry, or a font distributor website. 1:15
    Then sort by the features you are looking for, more on that later. 1:19
    When you find the one, download and install it on your computer. 1:24
    You may notice there is more than one file per font style. 1:47
    This can happen if there are different formats. 1:51
    Here are the common font formats OpenType, TrueType, 1:55
    EOT, WOFF, WOFF2, and SVG. 2:01
    Files with an OTF extension are open type fonts. 2:06
    This is the preferred format because it includes the most customization options, 2:10
    and has widespread support across platforms. 2:15
    Files with a TTF extension are true type fonts, 2:18
    this is what was used before the open type format. 2:22
    While they still work well, they don't have the extras that open type fonts have. 2:27
    Files within EOT extension use a format created by Microsoft. 2:33
    They're meant to be used on the web, however, 2:37
    they only work in Internet Explorer. 2:40
    WOFF files are the preferred format for web fonts. 2:44
    These files are compressed which means they load faster. 2:47
    WOFF2 is a newer iteration of WOFF, 2:50
    the difference is that they're more compressed. 2:55
    It's well supported across all the major browsers. 2:57
    If you're targeting Internet Explorer or older browser versions, 3:01
    WOFF has the most support. 3:05
    SVG fonts are not recommended 3:07
    unless you're trying to support very old versions of Safari. 3:11
    Check out the teacher's notes for websites where you can find fonts to download. 3:16

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up