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

Enhancing Design with CSS

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Google Fonts

4:59 with Anwar Montasir

In our last video, we learned how to provide a web font along with our website files and include a reference to our font in our CSS. And while that was great practice, most of us probably don’t have a bunch of web fonts sitting around on our computers to upload to our website. Plus, uploading web fonts requires a license from the type foundry granting you permission to do so. So the method we just learned isn’t one you’ll put into practice all that often, but it forms the foundation for our next lesson, in which we use the web’s most popular online library of free web fonts.

Further reading

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

    In our last video, we learned how to provide a web font along with 0:01
    our website files and include a reference to our font in our CSS. 0:06
    And while that was great practice, most of us probably don't have a bunch 0:11
    of web fonts sitting around on our computers to upload with our website. 0:16
    Plus, uploading web fonts requires a license from the type foundry 0:21
    granting you permission to do so. 0:26
    So the method we just learned isn't one you'll put into practice all that often, 0:30
    but it forms the foundation for our next lesson 0:35
    in which we use the web's most popular online library of free web fonts. 0:39
    Google Fonts has quite a few advantages. 0:45
    It's free, it offers over 1,000 web fonts, and 0:48
    the interface is fairly straightforward to work with. 0:52
    But when you first arrive, 0:55
    it's easy to feel a bit overwhelmed by the choices offered. 0:58
    The best way to get started is to settle on a category of fonts. 1:02
    I'm looking to improve my body copy for my Lake Tahoe site. 1:07
    So I don't want a handwriting or display typeface, 1:12
    as these are only useful for small bits of copy, like a heading or logo. 1:16
    I can also eliminate the monospace category. 1:22
    Monospace means every character has the exact same width, 1:26
    which is useful for coding. 1:30
    Our workspace is in a monospace typeface, but it's not great for web body copy. 1:33
    So that leaves us with serif versus sans serif. 1:40
    And while either can work great for web body copy, 1:44
    I'm going to focus on the sans serif category for now. 1:47
    Sans serif means our letters won't have decorative strokes at the end, 1:52
    the way a serif typeface like Times New Roman does. 1:57
    That narrows our choices, but I'm still not sure which one is appropriate for 2:01
    my Lake Tahoe body copy. 2:06
    I'll try switching the preview to paragraph and 2:09
    choosing one that's easy to read. 2:12
    I'll try clicking on Work Sans. 2:17
    Work Sans is available in nine font weights, 2:22
    everything from ultra light, represented by the number 100, 2:26
    to heavy, represented by the number 900. 2:32
    And while it's possible to include all nine weights in our style sheet, 2:36
    we shouldn't include more than we absolutely need, as doing so 2:40
    slows down page performance. 2:45
    I'm going to select Light 300, 2:47
    Light 300 Italic, and Bold 700. 2:52
    And look at that, Google Fonts has provided an embed code with instructions. 2:58
    Let's first copy the link elements and paste into the head of 3:06
    our HTML document right above the link to our own style sheet. 3:12
    Then we can copy the font family declaration and 3:20
    apply it to our body selector. 3:25
    Notice that I changed our text color and included a font-weight declaration 3:42
    to specify the light or 300 version of the Work Sans web font. 3:48
    And when we preview in the browser, our body copy is in Work Sans Light. 3:54
    You might notice that we never wrote a @font-face at-rule this time, but 4:03
    that doesn't mean we're not using one. 4:07
    I'm going to copy the link from Google web fonts and paste into a browser. 4:10
    And when it loads, you can see that Google Fonts has written the font 4:17
    face at rule for us and provided Work Sans in the WOFF format. 4:22
    Great, now you have a handy free resource for adding new web fonts to your webpage. 4:28
    Just remember to use Google Fonts sparingly. 4:35
    It might be tempting to combine six or seven typefaces in one web page, 4:39
    but doing so would really slow loading time. 4:44
    Now that we've improved out typeface, we'll use the remainder of this stage to 4:49
    work on the size and the spacing of our text. 4:54
    That's coming up next. 4:57

    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