css - @font-face doesn't work

admin管理员组

文章数量:1415664

Adding this to the style.css works:

* { font-family: "Courier New", Courier, monospace; }

Probably because Courier New is widely popular and supported. However, using this on my custom font doesn't work:

@font-face {
    font-family: 'new-baskerville';
    font-style: normal;
    src: url('/wp-content/uploads/useanyfont/190811081519New-Baskerville.eot');
    src: local('new-baskerville'), url('/wp-content/uploads/useanyfont/190811081519New-Baskerville.eot') format('embedded-opentype'), url('/wp-content/uploads/useanyfont/190811081519New-Baskerville.woff') format('woff');
}

Or chaning @font-face to * doesn't work either. The files do exist in the path. Do you know why is that?

Adding this to the style.css works:

* { font-family: "Courier New", Courier, monospace; }

Probably because Courier New is widely popular and supported. However, using this on my custom font doesn't work:

@font-face {
    font-family: 'new-baskerville';
    font-style: normal;
    src: url('/wp-content/uploads/useanyfont/190811081519New-Baskerville.eot');
    src: local('new-baskerville'), url('/wp-content/uploads/useanyfont/190811081519New-Baskerville.eot') format('embedded-opentype'), url('/wp-content/uploads/useanyfont/190811081519New-Baskerville.woff') format('woff');
}

Or chaning @font-face to * doesn't work either. The files do exist in the path. Do you know why is that?

• css
• fonts

Share Improve this question asked Aug 27, 2019 at 9:42 OokerOoker 33244 silver badges2323 bronze badges 1

• You either have to work with an absolute URL or get the relative URL right, as the style sheet probably isn't in the document root of your WP installation. CSS questions are generally off-topic on WordPress Development, please take a look at the help center to get familiar with the site guidelines. – Nicolai Grossherr Commented Aug 27, 2019 at 10:53

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

This article has some very helpful information regarding @font-face, and compatibility issues ... just in case.

Here are some potential improvements in your @font-face section:

• One of your src entries lists "local". Try removing that.
• Try using explicit addressing for your files.
• Make sure you can actually open your font files, or at least do not get a 404 Error.
• Try listing your files as I have, with two src entries: one for IE and one for modern browsers.
• See if your font files provide a TTF file for Safari and mobile browsers.

`

@font-face {    font-family: 'newBaskerville';
    src: url('https://{your-domain}/wp-content/uploads/useanyfont/190811081519New-Baskerville.eot');
    src: url('https://{your-domain}/wp-content/uploads/useanyfont/190811081519New-Baskerville.eot?#iefix') format('embedded-opentype'),
    url('https://{your-domain}/wp-content/uploads/useanyfont/190811081519New-Baskerville.woff') format('woff'); 
}

Finally, apply the font to your body with fallback styles, like you have in your Courier example above:

body{ font-family: "newBaskerville", Courier, monospace; }

note: Be sure to use the same name when applying the name as you did when defining it. In my case "newBaskerville", to avoid any issues with spaces and/or punctuation.

本文标签： cssfontface doesn39t work