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

Importing Fonts

4:39 with Anwar Montasir

Previously, we learned that users viewing our sites need to have the typefaces we choose installed on their computers. Otherwise, the browser will not display them. Besides the limited number of web-safe typefaces installed on a user's computer, we're also able to provide our own fonts by importing web fonts. Web fonts are special types of fonts that are optimized for screen display, and they're linked to our web pages from an external source, then activated when needed.

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

    Previously, we learned that users viewing our sites, 0:00
    need to have the type faces we choose installed on their computers. 0:04
    Otherwise, the browser will not display them. 0:09
    Besides the limited number of web safe typefaces installed on a user's computer, 0:13
    we're also able to provide our own fonts, by importing web fonts. 0:19
    Web fonts are special types of fonts that are optimized for screen display. 0:24
    And they're linked to our webpages from an external source, 0:29
    then activated when needed. 0:34
    There are different ways we can import a web font with CSS. 0:37
    The first method we're going to cover here is the @font-face at-rule. 0:42
    This method is useful if you're providing a type face on a web server, 0:47
    as I've done in our fonts folder, 0:51
    where I've provided three different file formats for 0:54
    the Abolition Regular web font designed by Mattox Shuler, 0:58
    who previously taught a Treehouse course on web typography. 1:02
    The varied file formats are only necessary if you need to support older browsers. 1:07
    Modern browsers will all accept the WOFF or 1:15
    Web Open Font Format, so we'll just import that one file. 1:19
    Underneath the comment, in our style sheet that says Web Fonts, 1:25
    let's create a new font-face at-rule. 1:30
    The first thing we need to do is name our font, with the font-family declaration. 1:35
    This declaration names our font so we can use it later in our stylesheet. 1:44
    We could technically call it whatever we want, but 1:49
    Abolition Regular makes the most sense since that's the name of our web font. 1:52
    Now we'll use the SRC property to point 1:58
    our style sheet to the location of our WOFF file. 2:02
    Note the ../ which means backup one folder, 2:10
    from the CSS folder, we need to backup to the root directory, 2:14
    then look for the file within the fonts folder. 2:20
    We'll also specify to our browser that this font is present in the WOFF format. 2:24
    The font-face at rule only prepared our document to use 2:35
    the Abolition Regular typeface we provided. 2:39
    The typeface hasn't been applied yet to any of our selectors. 2:43
    Since Abolition Regular is a display typeface available only in all caps, 2:47
    it's not a good body copy choice. 2:53
    So I'll apply it to my h1 and h2 elements. 2:56
    I've provided a font stack using 3:07
    web safe fonts in case Abolition Regular 3:12
    doesn't load for some reason, 3:18
    though it most likely will. 3:23
    I've also included a font-weight declaration to make my headings 3:28
    have a normal rather than a bold weight, 3:32
    since Abolition Regular wasn't designed to be made bold. 3:35
    That's what the term regular in its name indicates. 3:39
    font-weight accepts the keywords normal and bold, 3:43
    as well as a series of numerical values. 3:48
    We'll look at those numbers in our next video. 3:51
    Finally, let's increase 3:55
    the size of our headings 4:01
    using the rem measurement. 4:06
    I'm increasing the h3 size as well, 4:19
    even though that one doesn't use the Abolition typeface. 4:21
    Go ahead and preview in the browser, and you can see that our headings look 4:26
    quite a bit more interesting typographically than they did before. 4:31

    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