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.