Skip to main content
Trying to format the code block. It was having a strange issue.
Source Link
Mike Baxter
  • 932
  • 1
  • 5
  • 9

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';
    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'); }

    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.

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.

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.

Source Link
Mike Baxter
  • 932
  • 1
  • 5
  • 9

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.