@font-face not working even after trying everything I could think of

问题

I really need help with @font-face code. IT doesn't seem to see my font file.

I tried changing the path to anything I could think of, made new folders, renamed existing ones, put the font file in my root etc.

I'm testing in Firefox and Chrome.

Here are the codes that I tried in my CSS:

src: url(http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(http://www.thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(www.thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(../wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(/thefalltheme/images/Univers.ttf);
src: url(../thefalltheme/images/Univers.ttf);
src: url(thefalltheme/images/Univers.ttf);
src: url(/images/Univers.ttf);
src: url(../images/Univers.ttf);
src: url(images/Univers.ttf);
src: url(www.thefalljourneyindia.iblogger.org/Univers.ttf);
src: url(/Univers.ttf);
src: url(Univers.ttf);
src: url(../Univers.ttf);

Can you find out where I should put the font file or what to change in my CSS to get it to work?

(I also checked the similar questions here and elsewhere on the net and tried using this website to no avail.)

Thanks!

UPDATE: bozdoz's suggestion doesn't work. I used FontSquirrel to get the fonts. This is the CSS:

@font-face { font-family: 'lane'; src: url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.eot'); src: url('thttp://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.eot?#iefix') format('embedded-opentype'), url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.woff') format('woff'), url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.ttf') format('truetype'), url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.svg#LaneHumouresqueRegular') format('svg'); font-weight: normal; font-style: normal; }

h1{ font-size: 110px; font-family: 'lane', georgia, serif; color: #000000; }

I used the name 'lane' just because bozdoz had it.

All of the fonts are here:

http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/

and these are their names:

univers-webfont.eot, univers-webfont.woof, univers-webfont.ttf, univers-webfont.svg

回答1:

Are you using it correctly? Here is the format for @font-face. Notice the number of files. You can use Font Squirrel to create all of the necessary fonts for cross-browser compatibility. Also, it looks like you're using WordPress. I believe you have to use absolute paths (i.e. the first one in your list) in CSS on WordPress. Hope this helps.

<style>
@font-face {
    font-family: 'lane';
    src: url('type/lanehum-webfont.eot');
    src: url('type/lanehum-webfont.eot?#iefix') format('embedded-opentype'),
         url('type/lanehum-webfont.woff') format('woff'),
         url('type/lanehum-webfont.ttf') format('truetype'),
         url('type/lanehum-webfont.svg#LaneHumouresqueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.font { font-family:"lane", arial, serif; }
</style>

回答2:

You want to do something like this:

@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }

The font definition file must be relative to your css file. So if your css is at:

/Content/css/main.css

Then your font must be located in the same folder. If you specify

@font-face { font-family: Delicious; src: url('fonts/Delicious-Roman.otf'); }

Then your font definition would be at

/Content/css/fonts/Delicious-Roman.otf

You might want to verify that your server is not blocking your fonts from being downloaded. Try the URL and see if you get a 404 or 403 at the given url.

回答3:

You should try fontSuirrel's generator, their scripts have been vastly tested and compliant with many browsers. Choose advanced settings when generating your fonts. Certain browsers may not have the ability to use ttf as a font so they provide you with eot woff and ttf

回答4:

My suggestions from the comments as an answer:

Try with quotes:

url("Univers.ttf");

Check you have font-family or otherwise you cannot use your font in your code:

font-family: "MyFontName";

Your custom font family you would use in css like:

p { font-family: "MyFontName", Arial, sans-serif; }

回答5:

First of all, thank you all for your great, great help! There was no problem with the @font-face code. The problem was with my overall CSS. You see, my CSS was written like this:

/*   
Info
*/

@media screen {
* {
margin: 0px;
padding: 0px;
}
html { background: black url(images/bg.jpg); }
body { font: 14px/1.4 Georgia, serif; }
article, aside, figure, footer, header, nav, section { display: block; }

@font-face {
font-family: 'lane';
src: url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.eot');
src: url('thttp://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.eot?#iefix') format('embedded-opentype'),
     url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.woff') format('woff'),
     url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.ttf') format('truetype'),
     url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.svg#LaneHumouresqueRegular') format('svg');
font-weight: normal;
font-style: normal;
}

etc.

The problem was that @font-face wasn't seen because it was after @media screen! After I put it in front of @media screen and after /* Info */ it worked flawlessly.

Also, seems like I can use absolute and relative paths when using Wordpress...

Once again, thank you all for all your help!

来源：https://stackoverflow.com/questions/8115302/font-face-not-working-even-after-trying-everything-i-could-think-of

标签

css

css3

fonts

font-face

embedded-fonts