Articles in this section

See more

Troubleshooting: Webfonts

  • Updated

Troubleshooting Tips & Checklist:

Here are some steps you can take to double-check that your self-hosted fonts are installed correctly. 

1. Ensure your URL prefix is set correctly.

Try with and without the 'www' in the URL prefix.

If SSL security is installed, be sure your URL path includes the "https://" prefix and not just the "http://" prefix. 

2. Ensure your fonts are uploaded correctly.

Be sure your fonts are actually located at the URL paths you have set in the CSS code. A good way to test this is to paste the font URL path into your browser. If you get a 404 error page, the font is not actually located on that path. We recommend grabbing the exact URL paths inside of the WordPress Media library if you are uploading fonts through WordPress to avoid a missing file path.

Lastly, if you used FTP to upload your fonts, be sure permissions are set correctly on the font files.

Screen_Shot_2020-06-06_at_12.47.25_PM.png

3. Ensure your font files are compatible with the web.

Webfont filetypes are either .eot, .woff, .woff2, .ttf or .svg. We recommend installing all of these to ensure your font loads on most browsers.

If you do not have these filetypes, try contacting the font vendor you purchased the font from to get a web-ready format. You can also use a service like Transfonter to convert your LICENSED fonts to a web-ready format. For example, if you have a .otf file you should convert it.

4. Ensure your System Names match.

Make sure the "font-family" system name listed for your font in the CSS and the System Name option under your Webfont settings match exactly (this is case sensitive!).

If you are using several font weights, you will need to list each font weight as a separate font with its own system name. For example, if you add Avenir Medium you will need to add a Webfont with "Avenir Medium" as the System Name. If you add an additional weight of Avenir Light, you will need to add another Webfont with "Avenir Light" as the "System Name".

Here is the example of the proper source code:

@font-face {
 font-family: 'Avenir Medium';
 src: url('https://mywebsite.com/wp-content/uploads/2020/05/avenir-medium.eot');
 src:
 url('https://mywebsite.com/wp-content/uploads/2020/05/avenir-medium.eot?#iefix') format('embedded-opentype'),
 url('https://mywebsite.com/wp-content/uploads/2020/05/avenir-medium.woff2') format('woff2'),
 url('https://mywebsite.com/wp-content/uploads/2020/05/avenir-medium.woff') format('woff'),
 url('https://mywebsite.com/wp-content/uploads/2020/05/avenir-medium.ttf') format('truetype'),
 url('https://mywebsite.com/wp-content/uploads/2020/05/avenir-medium.svg') format('svg');
 font-weight: normal;
 font-style: normal;
}

 

5. Ensure your CSS code syntax is correct.

Please make sure you are copying the above CSS Code in Step 4 exactly, as even the smallest typo such as using an incorrect apostrophe can render the CSS invalid.

Related articles