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 Basics (2014) Enhancing the Design With CSS Web Fonts with @font-face

font size will not change?

I have done what Guil has done and the font on the web site did not change. Is there something that I am missing. /* web fonts-----------------------*/

@font-face { font-family: 'Abolition Reguar'; src: url('../fonts/abolition-regular-webfont.eot'); src: url('../fonts/abolition-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/abolition-regular-webfont.woff') format('woff'), url('../fonts/abolition-regular-webfont.ttf') format('truetype'); }

/* Base Styles -------------------- */

  • { box-sizing: border-box; }

body { color: #878787; margin: 0; font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; }

h1, h2 { font-family: 'Abolition Regular', Helvetica, Arial, sans-serif; }

12 Answers

I went into the index,html file look at and did chanes per your your advise. link rel="stylesheet" href="css/style.css"> to stylesheet.css and I lost my styling. I changed it back and the styling came back. I was using Chrome so I opened Fire fox and I got the same results. boy this is confusing!

Raffael Dettling
Raffael Dettling
32,999 Points

You got "font: 1em/1.5" instead of font-size: 1em/1.5

yes and that is what Guil has?

time 5:04 on his video.

web@font-face video. 5:04

Hey Edward,

You are referencing a code that I can't find in a specific code challenge. So, if you are using this code on an actual website, then please describe as to what the actual issue with the font is.

Do you have a problem with the font-family? font-stretch? font-style? font-size? or how about the font-weight?

Please let me know what area of the the font options is giving you difficulties. Also, keep in mind that there are many things we can do to alter the fonts on a website.

it is in the video of @font-face time is 5:04.

it looks like I have the same typed into my work space however when I look at it the main heading does not change likes Guils does.

Edward, your main heading is linked to H1. Also, you still have not told me what the issue with the main heading is. What is the change that you desire which is not taking place?

Before the code change, the LAKE TAHOE, CALIFORNIA was long gated, after Guil made the font changes to his font in the video His heading change the way it appeared and Mine did not change. I look at and relooked and I can not find no difference in his code and mine. so I did the best that I know how to post my code to this site.

what I have is * { box-sizing: border-box; }

This is a better copy of what code I have.

/* web fonts-----------------------*/

@font-face { font-family: 'Abolition Reguar'; src: url('../fonts/abolition-regular-webfont.eot'); src: url('../fonts/abolition-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/abolition-regular-webfont.woff') format('woff'), url('../fonts/abolition-regular-webfont.ttf') format('truetype'); }

/* Base Styles -------------------- */

  • { box-sizing: border-box; }

body { color: #878787; margin: 0; font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; }

h1, h2 { font-family: 'Abolition Regular', Helvetica, Arial, sans-serif; }

h1 {
font-size: 5.625rem; /* 90px/16px */ color: rgba(255, 255, 255, 1); text-transform: uppercase; font-weight: normal; line-height: 1.3; text-shadow: 0 1px 1px rgba(0,0,0, .8); }

h2 { font-size: 3.3125em; /* 53px/16px / font-weight: normal; line-height: 1.1; margin: 0 0 .5em; / 0 0 26px */ }

h3 { font-size: 1.25em; /* 20px/16px / color: #48525c; line-height: 1.2; margin-bottom: 1.7em; / 34px */

@font-face { font-family: 'Abolition Reguar'; src: url('abolition-regular-webfont.eot'); src: url('abolition-regular-webfont.eot?#iefix') format('embedded-opentype'), url('abolition-regular-webfont.woff') format('woff'), url('abolition-regular-webfont.ttf') format('truetype'); } <-- Try using this code, but before you do, make sure to put this stylesheet that you have coded into the same folder that your web-fonts are located. So if your web-fonts are located in the "/fonts" folder, please make certain that this "spreadsheet.css" is also located there

. Beyond that it is important to note that these web-fonts are all essentially the same type of coding made available to different browser types, so please know that the browser which you are using will have some affect on its appearance.. Additionally, remember to have this stylesheet.css added correctly to your source code or .html file.

Meaning href = "/stylesheet.css" on your main html file. I would also advise that you open the font files on your local server and view the images before you run them on a website.. Just to be sure that your server is not causing interference.