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

mrx3
mrx3
8,742 Points
Posted by mrx3
mrx3
8,742 Points

How do I add multiple @font-face fonts that I downloaded from font squirrel?

I download two fonts from font squirrel, I ran each font through the font-generator, and saved them in a folder called "font" in my root folder. After I download the fonts font squirrel was nice enough to make a style sheet for me with all the fonts listed, and I renamed it "fontstyle". I want to keep the fonts separate from my other CSS and use the font style sheet that font-squirrel created for me.

My first question is, since I want to use the font-squirrel style sheet would I link it in my pages like below? 

<head>
  <meta charset="uft-8">
  <title>My @font-face page</title>
  <link rel="stylesheet" href="css/normalize.css">
  <!--My CSS style sheet for my web page below-->
  <link rel="stylesheet" href="css/style.css">
  <!--My font style sheet from font-squirrel below-->
  <link rel="stylesheet" href="css/fontstyle.css">
  <!--My style sheet for responsive web design below-->
  <link rel="stylesheet" href="css/responsive.css">
</head>

I put the font style after my regular CSS file because, I figured I would be building on top of my current CSS file. Is that correct were I added my font CSS style sheet, after my regular CSS style sheet?

below are the two fonts I would like to use to style my index.html page.

@font-face {
    font-family: 'amblebold';
    src: url('amble-bold-webfont.eot');
    src: url('amble-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('amble-bold-webfont.woff2') format('woff2'),
         url('amble-bold-webfont.woff') format('woff'),
         url('amble-bold-webfont.ttf') format('truetype'),
         url('amble-bold-webfont.svg#amblebold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ambleregular';
    src: url('amble-regular-webfont.eot');
    src: url('amble-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('amble-regular-webfont.woff2') format('woff2'),
         url('amble-regular-webfont.woff') format('woff'),
         url('amble-regular-webfont.ttf') format('truetype'),
         url('amble-regular-webfont.svg#ambleregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

After this I don't understand what to do. I don't understand what url I would add to my regular CSS style sheet to link to each tag I would like to style with amblebold, or ambleregular. I get how to do the @font-face declaration and naming the font-family. For example:

@font-face {
  font-family: "amblebold";
  <!-- I don't know how I would add the fonts to the url below -->
  src: url('font/........');
}

I just don't understand how to source the url. Can anyone help me please. Thank you in advance for any help.

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Try adding the referece to the font folder in the src declaration of your @font-face statements.

font-face {
    font-family: 'amblebold';
    src: url('fonts/amble-bold-webfont.eot');
    src: url('font/amble-bold-webfont.eot?#iefix') format('embedded-opentype'),

If your fonts aren't picking up it's probably because your CSS is looking for them in the wrong folder.

mrx3
mrx3
8,742 Points
mrx3
mrx3
8,742 Points

I see now, fantastic! THANK YOU Jonathan for the fast reply. So lets say I wanted to use each font style, (e.g. eot, woff, woff2, and ttf, tp, and svg) to maximize browser compatibility. I would have to source each font like you did? Thank you again for your help.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Yes, it's a case of checking each url is given the correct reference to the location.. If it still doesn't work there's something else wrong there that might beed checking out but it looks fine to me. :)

Also try 

 src: url('../fonts/amble-bold-webfont.eot');

Which checks that folder and the next level up and looks for that same file structure. It usually helps me if I'm struggling to find the right folder.

mrx3
mrx3
8,742 Points
mrx3
mrx3
8,742 Points

Jonathan I just got done with what you told me to do and...IT WORKED PERFECT! Thank you so much for your help. I really appreciate you taking the time to help me. You deserve the Best Answer. Thank you again.