Jump to content


Photo

Chapter 8 Font-face Problem


  • Please log in to reply
4 replies to this topic

#1 NinaG

NinaG

    New Member

  • Members
  • Pip
  • 2 posts

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 Files



#2 Beth Robson

Beth Robson

    Veteran Member

  • O'Reilly Employee
  • PipPipPipPipPipPipPipPipPip
  • 376 posts
  • 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

#3 NinaG

NinaG

    New Member

  • Members
  • Pip
  • 2 posts

Posted 30 June 2014 - 12:52 PM

Thank you for responding! I found that removing the quotes worked for some reason.

#4 healdprice

healdprice

    New Member

  • Members
  • Pip
  • 1 posts

Posted 29 October 2014 - 10:09 AM

Thank you for responding! I found that removing the quotes worked for some reason.


I had the same problem. This article helped me to understand how it works: web fonts with CSS @font-face rule in detail. Nowadays many people says that it's better to user services like Google Fonts and there is no need to learn how it works. I think, in such cases, such information is very useful.

#5 Aarthi Karuppaiah

Aarthi Karuppaiah

    New Member

  • Members
  • Pip
  • 1 posts

Posted 23 December 2014 - 10:32 PM

hi .....even my font face did not work.......i tried all de above suggestions.....but still din work out ....can anyone pls help.......




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users