font-family in body selector

Question

Hi all, having a little trouble at the minute and need a point in the right direction please.

I think I'm having a dumb moment because I can't seem to apply font-family to the body selector in my CSS? This is a font type from google fonts.

My HTML . . .

<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css" type="text/css"> <link rel="stylesheet" href="css/reset.css" type="text/css">

My CSS . . .

body { font-family: 'Droid Serif', serif; }

Any ideas?

Answer 1 · 2014-02-11T20:11:50Z

February 11, 2014 8:11pm

Hi James,

Not sure if this will fix it but you haven't used double quotes on some of the first attributes. Try changing the href, rel and type attributes to double quotes instead of single quotes.

Answer 2 · 2014-02-11T20:12:24Z

February 11, 2014 8:12pm

James, when you say "can't apply", what's happening, specifically? The text doesn't seem to use that font? You get an error?

Answer 3 · 2014-02-11T20:25:09Z

February 11, 2014 8:25pm

Sorry guys, should have been a little more specific. Yeah James, the text isn't using the font anywhere in the body when I view through a browser BUT if I apply the same font-family to one of my div elements it does???

I'll try now Matthew, although I copied & pasted the code straight from google fonts?

Answer 4 · 2014-02-11T20:26:00Z

February 11, 2014 8:26pm

I'm not sure, it looks correct and that code seems to be working properly in codepen.

Can you share more of your code?

Answer 5 · 2014-02-11T20:31:50Z

February 11, 2014 8:31pm

Hi Tom, yeah sure.

My CSS . . .

body {
    font-family: 'Droid Serif', serif;
}

#top-bar {
    background-color: #333;
    width: 100%;
    height: 40px;
}

#top-bar-container,
#header-container,
#section-container,
#footer-container {
    max-width: 1000px;
    margin: 0 auto;
    height: 100%;
}

#top-bar-container p {
    float: right;   
    color: #fff;
    font-size: 18px; 
    padding-top: 10px;
}

header {
    background-color: #fff;
    width: 100%;
    height: 100%;
}

#brand {
    float: left;
    padding-top: 24px;  
}

nav {
    float: right;
}

nav li {
    display: inline-block;
    padding: 24px;
    font-size: 26px;    
}

nav li:last-child {
    padding-right: 0;
}

section {
    width: 100%;
    background-color: #CCC;
    background-image: url(../images/bg.jpg); 
    background-repeat: no-repeat;
}

#intro {
    font-size: 68px;
    text-align: center;
}

#desc {
    font-size: 22px;
    text-align: center;
    padding-top: 50px;
}

#cta {
    max-width: 300px;
    margin: 40px auto;
}

.btn {
    width: 120px;
    height: 45px;
    background-color: #0FC; 
    margin: 0 3px;
    float: left;
}

.btn a {
    display: block;
    width: inherit;
    height: inherit;
}

footer {
    background-color: #333;
    width: 100%;
    height: 100%;
}

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
    *zoom: 1;
}

Answer 6 · 2014-02-11T20:43:02Z

February 11, 2014 8:43pm

My HTML . . .

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Lorem ipsum dolor sit amet.</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css" type="text/css">
<link rel="stylesheet" href="css/reset.css" type="text/css">

</head>

<body>

<div id="top-bar">
    <div id="top-bar-container" class="clearfix"><p>Lorem ipsum dolor sit amet.<a href="tel:">Lorem ipsum dolor sit amet.</a></p></div>
</div>

<header>
  <div id="header-container" class="clearfix">
    <a href="#" id="brand">BRANDING HERE</a>
    <nav>
      <ul>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Our Vehicles</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

<section>
  <div id="section-container">
      <p id="intro">Lorem ipsum dolor sit amet.</p>
      <p id="desc">Lorem ipsum dolor sit amet.</p>

      <div id="cta" class="clearfix">
      <div class="btn"><a href="#">Find out more</a></div>
      <div class="btn"><a href="#">Get in contact</a></div>
      </div>
  </div>
</section>

<footer>
  <div id="footer-container">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">FAQ</a></li>
      <li><a href="#">Terms &amp; Conditions</a></li>
      <li><a href="#">Feedback</a></li>
      <li><a href="#">Sitemap</a></li>
      <li><a href="#">Facebook</a></li>
      <li><a href="#">Twitter</a></li>
      <li><a href="#">Contact</a></li>
    </ul>

    <p id="copy">Lorem ipsum dolor sit amet.; | 2006 &ndash; 2014</p>

  </div>

</footer>
</body>
</html>

Answer 7 · 2014-02-11T20:49:17Z

February 11, 2014 8:49pm

The CSS is correct, so I think that means either it's getting overriden in the body, the <body> tag is misapplied, or you've applied a different style to <p> tags, for example.

Answer 8 · 2014-02-11T20:50:01Z

February 11, 2014 8:50pm

That's "a different style to 'paragraph' tags"...

Answer 9 · 2014-02-11T21:12:54Z

February 11, 2014 9:12pm

All looks correct to me. Are you certain that it's not being applied? For a test, you might use a really strange looking font instead, so it was clear when the body font changed. Otherwise--no clues.

Answer 10 · 2014-02-11T21:18:01Z

February 11, 2014 9:18pm

It must have something to do with my reset.css stylesheet as I've just commented that out to check the code and the font is now being applied.

What CSS reset do you use? I've been using Eric Meyer's Reset CSS v2.0 . . .

/**

Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
http://cssreset.com / html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; text-decoration: none; } / HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }

Answer 11 · 2014-02-11T21:56:21Z

February 11, 2014 9:56pm

Don't feel silly Tom, I'm having one of those evenings, I should have seen this too!

Thanks for the feedback everyone, much appreciated. I'm now going to go and head butt a wall for being a dufus!

Answer 12 · 2014-02-12T00:04:24Z

February 12, 2014 12:04am

Can't believe I didn't notice that when first looking at your code. I think we have all made this mistake from time to time and it can be frustrating. Lots of us are good at CSS but every now and then we forget about the cascading nature of CSS!! Glad you sorted it out.

By the way, I personally use Firebug in Firefox to help avoid this issue. If you view your source and select an element in your HTML, it will show you the styles being applied and classes used. It also shows any styles ruled out that are being overridden by other more specific CSS selectors

Answer 13 · 2014-02-14T18:06:32Z

February 14, 2014 6:06pm

Thanks Matthew, I think I should start using that more often

Welcome to the Treehouse Community

Looking to learn something new?

James Payne

James Payne

font-family in body selector

13 Answers

Matthew Underhill

Matthew Underhill

James Gill

James Gill

James Payne

James Payne

Tom Bedford

Tom Bedford

James Payne

James Payne

James Payne

James Payne

James Gill

James Gill

James Gill

James Gill

James Gill

James Gill

James Payne

James Payne

Tom Bedford

Tom Bedford

James Payne

James Payne

Matthew Underhill

Matthew Underhill

James Payne

James Payne