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 addedfont-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:
change the font name to lowercase,
cuprum
.Remove the following from the declaration:
font-weight: normal; font-style: normal; font-size: 0.5em;
精彩评论