@font-face doesn't work

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?

Contents hide

Answers:

Method 1

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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}.com/wp-content/uploads/useanyfont/190811081519New-Baskerville.eot');
    src: url('https://{your-domain}.com/wp-content/uploads/useanyfont/190811081519New-Baskerville.eot?#iefix') format('embedded-opentype'),
    url('https://{your-domain}.com/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.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating