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 CSS Foundations Web Typography Web Fonts

Garrett Levine
Garrett Levine
20,305 Points
Posted by Garrett Levine
Garrett Levine
20,305 Points

src: not working properly

I am coding exactly as instructed in the video in regards to @font-face and for some reason as soon as i type src: url(....) the 'src' part goes red, not allowing the font face to be linked. I am wondering why this is happening? It even happens in an unrelated CSS file (when I open the CSS file that accompanies the text face files).

this is the code I have typed (straight from following the video).

@font-face {

    font-family: "droid_serifbold";

    src:url('fonts/DroidSerif-Bold-webfont.eot');

    src:url('fonts/DroidSerif-Bold-webfont.eot?#iefix') format('emdedded-opentype'),

        url('fonts/DroidSerif-Bold-webfont.woff') format('woff'),

        url('fonts/DroidSerif-Bold-webfont.ttf') format('truetype'),

        url('fonts/DroidSerif-Bold-webfont.svg#DroidSerifBold') format ('svg')

    font-weight: bold;

    font-style: normal;

}

5 Answers

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hey Garrett,

Want to try this please.

@font-face {

    font-family: "droid_serifbold";

    src: url('fonts/DroidSerif-Bold-webfont.eot');

    src: url('fonts/DroidSerif-Bold-webfont.eot?#iefix') format('emdedded-opentype'),

        url('fonts/DroidSerif-Bold-webfont.woff') format('woff'),

        url('fonts/DroidSerif-Bold-webfont.ttf') format('truetype'),

        url('fonts/DroidSerif-Bold-webfont.svg#DroidSerifBold') format('svg');

    font-weight: bold;

    font-style: normal;

}
Garrett Levine
Garrett Levine
20,305 Points
Garrett Levine
Garrett Levine
20,305 Points

still not working unfortunately. this is what is happening in my document.

src prblm

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

If you paste the code I put in my post into css validator it shows no errors..

hmmm

Garrett Levine
Garrett Levine
20,305 Points
Garrett Levine
Garrett Levine
20,305 Points

right? it's weird! it's in all my workspaces . the above image is done with your code.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

The screenshot i posted was from Sublimetext not workspaces.

Garrett Levine
Garrett Levine
20,305 Points
Garrett Levine
Garrett Levine
20,305 Points

I'm tempted to chalk it up to a workspaces issue, but I don't wanna take the easy way out.

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi Garrett Levine,

For some reason, Workspaces highlights src in red, even thought it's perfectly valid code. Your code looks fine. My assumption, at this point, is your file path. Try adding ../ before the fonts directory in your path.

Ex: src: url('../fonts/DroidSerif-Bold-webfont.eot');

Garrett Levine
Garrett Levine
20,305 Points
Garrett Levine
Garrett Levine
20,305 Points

I checked my file path, and it should be correct. I am now trying this in another workspace file, so I did already have the "../font/" file path. Everything seems like it should working fine, but it's okay. I've continued on with the lessons regardless. I'll just rely on google-fonts more. ;)

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi Garrett Levine,

It looks like you're missing the ; after format ('svg')

Hope this helps. :)

Garrett Levine
Garrett Levine
20,305 Points
Garrett Levine
Garrett Levine
20,305 Points

Thank you! Though the problem still remains that the 'src' is red red red. when I remove it from the @font-face { } it is no longer red (but of course is useless).

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hey Garrett,

Try:

src: url('fonts/DroidSerif-Bold-webfont.eot');

Hope this helps.

Garrett Levine
Garrett Levine
20,305 Points
Garrett Levine
Garrett Levine
20,305 Points

unfortunately changes nothing. I also tried pasting that bit of code into another black CSS file in the workspace, and the same problem occurs with the 'src' being entirely red in workspace.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

It might be worth logging out then back in, maybe restarting the browser or trying a different one.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

It has to be a workspaces issue, the code validates.

Garrett Levine
Garrett Levine
20,305 Points
Garrett Levine
Garrett Levine
20,305 Points

tried logging out AND in a different browser. It remains unsolved, but I feel better knowing my code was okay (probably).