The question:
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?
The Solutions:
Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.
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