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 Andrew McMillin
Andrew McMillin
641 Points

"Building a simple website" question

I recently signed up and am very excited to start this new chapter in my life. I am currently in the course "Building a simple website" and I'm having trouble with Sublime Text 2. I can't seem to change the font to Nunito. I followed the steps and everything seems to be correct. Is there a way for someone to view my code? Perhaps Skype so you can see what I see?

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

You can post your code here on the forum, here are some tips for typing code on the forum

Andrew McMillin
Andrew McMillin
641 Points

Thanks James for the advise and help. Should I make a new thread with my code or?

3 Answers

Alexander Sobieski
Alexander Sobieski
6,555 Points
Alexander Sobieski
Alexander Sobieski
6,555 Points

I don't know if you got your questions answered... but here's the basic way:

1) Add the google link to your site's header (if you're using something like Wordpress, it goes in header.php). If you're doing a simple HTML site, it needs to be in the head tags:

<!--Find this in your header.php file or on each static html page -->
<head>
   <link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'>
</head>
<!-- NOTE: you should also have other stuff, like links to your own stylesheets, etc. in the head tags -->

2) Next, add the CSS for the thing you want to have in the nunito font

/*style.css*/
p { font-family: 'Nunito', sans-serif; }

h2 {font-family: arial, sans-serif;}
h2.fancy-pants { font-family: 'Nunito', sans-serif; }

3) Make your HTML

<html>
<h2> This is a boring header in Arial </h2>
<p> But the text will be in Nunito... so that's still okay</p>

<h2 class="fancy-pants">And here's a heading in Nunito</h2>
<p>and again, the body paragraphs will be in nunito as well</h2>

Hope this helps... if not, paste your code

Andrew McMillin
Andrew McMillin
641 Points

Alexander Sobieski thanks for the reply! Been MIA for a bit. Heres some of the code that pertains to my issue:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Smells Like Bakin' Cupcake Company</title> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen"> <link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">

and for css:

body { font-family: 'Nunito', sans-serif; }

Alexander Sobieski
Alexander Sobieski
6,555 Points
Alexander Sobieski
Alexander Sobieski
6,555 Points

Are you using a CSS RESET and/or a TEXT RESET? (sometimes these files will put a default font for the site which may be overriding a general "body" selector.

Try finding a specific item (Example)

h2#test { font-family: 'Nunito', sans-serif; }

<h2 id="test">Testing Text</h2>

ALSO -- if using Firefox / Chrome -- you can right-click to "Inspect Element" -- this will show your HTML and CSS, and if the rule is being applied or overridden by another piece of CSS

ALSO -- make sure you're including the google fonts code (either the link, or the javascript they provide) in your header (and that you have a connection to the internet, if you're developing locally) -- if you don't have the google code in your header, the font won't appear.

ALSO -- check to make sure all your syntax above the CSS rule is correct. Sometimes forgetting a semicolon or a closing curly-brace can cause some or all of the CSS to malfunction.

ALSO -- make sure your browser cache is cleared. Sometimes browsers are set to keep local copies of stylesheets/etc, which can make one CRAZY.

Liam Roach
Liam Roach
16,787 Points
Liam Roach
Liam Roach
16,787 Points

Hey I'm very new to this too but just finished up the simple website course add me on skype l.roach2 and I can try to help!

Danny Vega
Danny Vega
2,685 Points
Danny Vega
Danny Vega
2,685 Points

hey Liam,

is it ok if I add you on skype as well? I'm having some issues with my grids in my code and would love some help. thanks !

Liam Roach
Liam Roach
16,787 Points
Liam Roach
Liam Roach
16,787 Points

Ofcourse if I can help I will! I'm around for 20 minutes now if you are free!