O'Reilly Forums: Chapter 8 Font-face Problem - O'Reilly Forums

Jump to content

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

Chapter 8 Font-face Problem

#1 User is offline   NinaG 

  • New Member
  • Pip
  • Group: Members
  • Posts: 2
  • Joined: 25-June 14

Posted 25 June 2014 - 12:03 PM

I cannot seem to get the Emblema One font to work at all. I wrote the code in the book, but it does not work. I saw on another thread that we should download it and use a relative url instead. Yet it still won't work for me.

@font-face {
font-family: "emblema one";
src: url ("emblemaone-regular.woff"),
url ("emblemaone-regular.ttf");
}

body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
}

h1,h2 {
color:#cc6600;
border-bottom: thin dotted #888888;
}

h1 {
font-family: "emblema one", sans-serif;
font-size: 220%;
}

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

blockquote {
font-style: italic;
}

Attached File(s)


0

#2 User is offline   Beth Robson 

  • Veteran Member
  • PipPipPipPipPipPipPipPipPip
  • Group: O'Reilly Employee
  • Posts: 376
  • 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 25 June 2014 - 06:59 PM

Hi,
Sorry you're having trouble. Web fonts can be tricky to get right!

The two relevant rules from my file look like this:

@font-face {
font-family: "Emblema One";
src: url("EmblemaOne-Regular.woff") format("woff"),
url("EmblemaOne-Regular.ttf") format("truetype");
}
h1 {
font-family: "Emblema One", sans-serif;
font-size: 220%;
}

I suggest you try a few things:

1) make sure you have no space between url and ( in url(…) in the src property; also move the two url(…) specifiers onto one line instead of two.
2) make sure the font files are in the *same* folder as this css file.
3) try adding the format(…) part of the src as above.
4) if still no luck, try switching the order of the ttf and woff urls in the src: property.
5) try typing your CSS into csslint here: http://csslint.net;

Hope that 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

#3 User is offline   NinaG 

  • New Member
  • Pip
  • Group: Members
  • Posts: 2
  • Joined: 25-June 14

Posted 30 June 2014 - 12:52 PM

Thank you for responding! I found that removing the quotes worked for some reason.
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