0

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?

Improve this question
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

1 Answer 1

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}.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.

Improve this answer
2
  • If you cannot open or download your font files through the browser's address bar, you should ensure your server is configured with the proper mime types, as I suggested in your other Question thread, for this same issue.
    – Mike Baxter
    Commented Aug 28, 2019 at 21:47
  • thank you so much. Do you know why @font-face alone cannot change the font, and body needs to be specify? What about other font variation files, like bold or italic? Also, is there a way to tell a text inserted directly in header.php to use this setting? And do you know how to use the font when editing posts?
    – Ooker
    Commented Sep 8, 2019 at 17:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.