Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Toma Ina
Toma Ina
412 Points

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

jobbol
seal-mask
.a{fill-rule:evenodd;}techdegree
jobbol
Full Stack JavaScript Techdegree Student 16,610 Points
jobbol
.a{fill-rule:evenodd;}techdegree
jobbol
Full Stack JavaScript Techdegree Student 16,610 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.

Toma Ina
Toma Ina
412 Points

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

jobbol
seal-mask
.a{fill-rule:evenodd;}techdegree
jobbol
Full Stack JavaScript Techdegree Student 16,610 Points
jobbol
.a{fill-rule:evenodd;}techdegree
jobbol
Full Stack JavaScript Techdegree Student 16,610 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?

jobbol
seal-mask
.a{fill-rule:evenodd;}techdegree
jobbol
Full Stack JavaScript Techdegree Student 16,610 Points
jobbol
.a{fill-rule:evenodd;}techdegree
jobbol
Full Stack JavaScript Techdegree Student 16,610 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.

Toma Ina
Toma Ina
412 Points
Toma Ina
Toma Ina
412 Points

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

jobbol
seal-mask
.a{fill-rule:evenodd;}techdegree
jobbol
Full Stack JavaScript Techdegree Student 16,610 Points
jobbol
.a{fill-rule:evenodd;}techdegree
jobbol
Full Stack JavaScript Techdegree Student 16,610 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.

Toma Ina
Toma Ina
412 Points
Toma Ina
Toma Ina
412 Points

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.

Toma Ina
Toma Ina
412 Points
Toma Ina
Toma Ina
412 Points

I tried everything, still no fix :(