O'Reilly Forums: Chapter 8 - O'Reilly Forums

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Chapter 8 Can not get font face and color changes to work

#1 User is offline   william SMITH 

  • New Member
  • Pip
  • Group: Members
  • Posts: 1
  • Joined: 14-April 14

Posted 14 April 2014 - 03:00 PM

I wonder if anyone can help. I'm on chapter eight and can not get the font face and colour changes to take in my css file. When I load the journal. html file I get the standard font and a completely orange background. My journal.css file is below and attached.

@font-face {

font-family: "Emblema One";

src: url (""http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"),
url ("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf");

}

h1 {
font-family: "Emblema One", sans-serif;
font-size: 220%;
}

h2 {
font-size: 130%;
font-weight: normal;
}

body {

background-color: rgb(80%, 40%, 0%);
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
}

h1, h2 {
color: #cc6600;
text-decoration: underline;
}
blockquote {
font-style: italic;
}

Attached File(s)


0

#2 User is offline   Beth Robson 

  • Veteran Member
  • PipPipPipPipPipPipPipPipPip
  • Group: O'Reilly Employee
  • Posts: 375
  • Joined: 17-September 08
  • Gender:Female
  • Location:Seattle, WA
  • Interests:I am interested in computer science, the Web, social media and the internet, Mac development, and adult learning.

Posted 14 April 2014 - 04:29 PM

Hi William,
There are a couple of problems with this. The first, unfortunately, is a change in browsers that's happened since we wrote the book - and that is, that many browsers now do not allow you to load fonts from a domain different from where your files are being served. This is why the heading font it not working. To remedy this, download the fonts, and put them in your directory and use a relative url to the font in the src: url() property:

src: url(RELATIVE URL TO YOUR MACHINE HERE)

This should solve that issue.

For the background color issue: you are setting the background color of the body to orange in the line:

background-color: rgb(80%, 40%, 0%);

If you remove this line, the background goes back to white (the default color).

Hope this helps!!

Elisabeth
Elisabeth Robson
Co-founder, WickedlySmart.com
Author: Head First JavaScript Programming, Head First HTML5 Programming, Head First HTML and CSS, Head First Design Patterns
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users