开发者

Not able to get font-face working

I'm trying to use @font-face, but I'm not being very successfull. Up till now, I've been using Google fonts:

// HTML header
<link href='http://fonts.googleapis.com/css?family=Cuprum' rel='stylesheet' type='text/css'>

//CSS
#leftSection nav { 
  font-family: "Cuprum", Verdana, Arial, sans-serif;
} 

Then I downloaded the fonts and tried using font-face:

This is my CSS:

@font-face {
  font-family: 'Cuprum';
  font-weight: normal;
  font-style: normal;
  font-size: 0.5em;
  src: url('cuprum.eot?') format('eot'), 
       url('cuprum.woff') format('woff'), 
       url('cuprum.ttf')  format('truetype'),
       url('cuprum.svg#Cuprum') format('svg');
}


#leftSection nav { 
  font-family: "Cuprum", Verdana, Arial, sans-serif;
} 

The fonts are located in the same folder as the CSS.

I've looked at, and tested oteher solutions, but I'm still not able to get it wokring.

I'm testing with the following browsers: FF7, IE8

Update

I've added font-size: 0.5em; This should at least change the font size. But that's not happening either. So I'm guessing the 开发者_开发百科entire @font-face is ignored.


Did you try using the Font Squirrel generator? Just upload the font and it will do everything for you, it's real simple.

Here is the link: http://www.fontsquirrel.com/fontface/generator


Hey Steven are you done with this? Why dont you try this out.

insert this inside your css:

@font-face {
font-family: 'Cuprum';
font-style: normal;
font-weight: normal;
src: local('Cuprum'), url('http://themes.googleusercontent.com/static/fonts/cuprum/v1/sp1_LTSOMWWV0K5VTuZzvQ.woff') format('woff');
}

#leftSection nav { 
font-family: Cuprum, Verdana, Arial, sans-serif;
} 

i hope it will work. :)


I think you could try it without the quotes around "Cuprum".

#leftSection nav { 
  font-family: Cuprum, Verdana, Arial, sans-serif;
}

Also, there is sometime an issue if you/the user have that font installed locally.

To get around that, you can set a fake local reference.

See Paul Irish's Bulletproof @font-face syntax

EDIT

Two other things you might try:

  1. change the font name to lowercase, cuprum.

  2. Remove the following from the declaration:

    font-weight: normal;
    font-style: normal;
    font-size: 0.5em; 
    
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜