@font-face doesn’t work

by

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

Leave a Comment