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

Posted October 1, 2014 6:06pm by

Serious help needed with @font-family: Headache.

Want to include Springsteel-Light. I have all the files e.g. .eot, .otf, .svg, .tff, .woff, woff2.

The font is saved as 'springsteel-lig.eot' 'springsteel-lig.otf' etc. Really confused why is not working, can anyone give an example of how to include the font that they would use please as ran out of different approaches.

Thank you!!

2 Answers

October 1, 2014 6:10pm

Hey James, are you using something similar to this:

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
         url('myfont-webfont.woff') format('woff'), 
         url('myfont-webfont.ttf')  format('truetype'),
         url('myfont-webfont.svg#svgFontName') format('svg');
    }

Source: Fontspring

October 1, 2014 7:08pm

Edit: Fixed, see below.

Hey Dustin, thanks so much for reply.

@font-face {
    font-family: 'Springsteel-Light';
    src: url('font/springsteel-lig.eot?#iefix') format('embedded-opentype'), 
         url('font/springsteel-lig.woff') format('woff'), 
         url('font/springsteel-lig.ttf')  format('truetype'),
         url('font/springsteel-lig.svg#svgFontName') format('svg');
    }

Is this correct? Had no luck, I have the font folder inside the css folder. And also I call the font in body:

body {
    font-family: 'Springsteel-Light';
    max-width: 1000px;
    height: auto;
    min-height: 100%;
    margin: 0 auto;
    background-color: #27281C;
}

I'am getting this error message from the console: " GET file:///C:/Users/Anne/Documents/Web%20Work%2013-14/WWW/site/css/font/springsteel.lig.woff net::ERR_FILE_NOT_FOUND "

The file is saved "springsteel-light.woff not springsteel.lig.woff as the console read out tho, this is prob just how the console reads is it.

Can you see anything that I may be missing.

Many thanks.

October 1, 2014 7:32pm

Fixed, issue was what the console had said err file not found, just think after staring at the code for hours my mind had lost track of anything no matter how simple.

Thanks for the font-family code, was a great help as so many to choose from, by the way is the svg part of the code correct when it says #svgFontName should it be different?

Thanks.