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

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

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