Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Confused about @font-face

I am trying to load my fonts in, but in browser, I see only sans serif font. I don't see 'Font Awesome' font that I have loaded with font-face. Thanks.

  <!doctype html>
          <html>
      <head>
    <title>Thing</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <header>
        <h1>Industrious</h1>
    </header>
    <header class="main-header">

          </header>
      </body>
  </html>

MY CSS

       @font-face {
font-family: 'Font Awesome';
src: url('../fonts/FontAwesome.otf');
src: url('../fonts/fontawesome-webfont'),
     url('../fonts/fontawesome-webfont'), 
     url('../fonts/fontawesome-webfont'), 
     url('../fonts/fontawesome-webfont');

}


body {
    margin: 0;
    color: dimgray;
    font-family: 'Font Awesome', sans-serif;
}

4 Answers

Josh Olson
Josh Olson
13,236 Points

In your CSS you are using a relative file path which can change based on where your CSS file is located in relation to your font.

'../fonts/fontawesome.otf'

This is saying to look in the parent directory of the CSS file, open the fonts folder, and find fontawesome.otf.

Make sure this is correct. If not let me know and we can figure this out.

Thanks Josh for answer. That path is correct. I checked it multiple times.

Josh Olson
Josh Olson
13,236 Points

Both your HTML and CSS are locally saved to your computer, correct?

Press F12 to open up the developer tools. Go to the network tab. It may ask you to record the page. Press F5 to reload. Look for "fontawesome.otf" in the list. What's the status on it?

Josh Olson
Josh Olson
13,236 Points

I noticed that you have two src lines in your font-face. CSS will ignore the first one if it's written this way. The second one lists the exact same url multiple times. Try changing it to this.

@font-face {
   font-family: 'Font Awesome';
   src: url('../fonts/FontAwesome.otf'),
        url('../fonts/fontawesome-webfont');
}

A list of comma separated urls in an src exist for cross-compatibility and loading errors. If the first url uses a file type unsupported by the browser, or does not load, it goes onto the next one until that does.

Oh I figured it out. I was working on brackets live preview, but for some reason it did not update live. So I refreshed and saw my font. Thanks

Josh Olson
Josh Olson
13,236 Points

Oh thank god. Glad you got it. On the src thing, forget what I said. I tested that with font color, but font-face or src must be different.

Thanks again. I will try now. Reason I had 4 url is because, I was trying to load fonts with different formats - like woff, ttf, woff2 and so on. I will get in home and try.

Bit confused about how to write syntax though. Because I've seen 1 src with otf in it and then second src with other fonts with different formats. Makes me confused.

I've seen format('woff'); and it confused me a bit too.

I tried everything, still no fix :(