This article has some very helpful information regarding @font-face@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.
One of your src entries lists "local". Try removing that.Try using explicit addressing for your files.
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.
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.
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';
See if your font files provide a TTF file for Safari and mobile browsers.
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'); }
`
@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.