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 Omar Suriel
Omar Suriel
5,403 Points

imported Fonts not rendering correctly. Please help!!

Hello. I am working on my portfolio and I came to big issue(for me it is). Imported a custom font that i got from www.google.com/fonts the font is called "Alfa Slab One" the font is a thicker font by default and i have to use it for my headings and nav bar. for some reason it feels like the browser is trying to make it even thicker than the font actually is and the results look horrible. I made sure i used the propert "font-weight: normal" and "font-weight: 400" and still renders a lot thicker and more sloppy than it is supposed to. The font works perfect in any other program but just wont render like I expect it should on the web.

'''CSS @font-face { font-family: "AlfaSlabOne-Regular"; src: url("AlfaSlabOne-Regular.ttf") format("truetype"); font-weight:normal; font-style: normal; } '''

Hugo Leon
Hugo Leon
7,763 Points

Hello Omar!

Make sure you added the line in the head tag:

<link href='http://fonts.googleapis.com/css?family=Alfa+Slab+One' rel='stylesheet' type='text/css'>

Seems to be better to use the link tag over @import as said here

Add this to your CSS:

.my_custom_header{
    font-family: 'Alfa Slab One', cursive;
}

And finally you could use it in your headings like this:

<h1 class=".my_custom_header">My Portfolio</h1>

Hope I helped!

Good luck with your portfolio!.