Internet Marketing Agency | WordPress Websites & Online Marketing

Troubleshoot Missing Fonts


Troubleshoot Missing Fonts

CSS 3 includes methods for using a font on your website that may not be installed on the visitor's computer. The problem with this is that using a remote font allows downloading of that font. This could lead to misuse of fonts, potentially violating the terms of that font license. Browsers have begun offering some protection for the font makers. One of these protections is based on Origin and Access-Control-Allow-Origin HTTP headers. Basically, when a browser with this protection on finds an external font embedded, it sends the base url of the website out in the Origin header and waits for a response. Unless that response allows this origin, the font is denied.

Allow Cross Domain Fonts

If you're using an embedded font on your site and want this to work on your IDX pages as well, it will require an extra step to get it working in some browsers. Firefox will not allow fonts to be embedded cross-domain unless you add this to the top-level .htaccess file of the domain or subdomain where your fonts are being served:

<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"

NOTE: This will only fix users on Apache servers. If you are using another service, this patch will not solve the issue.

Alternate Font Location

A less aggressive approach can be used if you can find the font in a repository that already allows cross-domain fonts. An example font in this scenario would be the increasingly popular Font-Awesome: a common icon font.

Font Awesome

One of the more common font issues is with an icon font called Font-Awesome. The problem is that it requires the correct server setup to enable it (see instructions above) on IDX pages. However, it is an open source project freely available to link to from a Github repository : (use the "Easiest" section).

To include it in a page simply add the following <link> tags in the <head> section:

<link href="//" rel="stylesheet">

<link href="//" rel="stylesheet"/>


If you have a Typekit account, you can add fonts to your IDX Broker pages via this route. This method requires a subdomain setup for IDX Broker as described here. Follow the instructions from Adobe to add your IDX Broker CName to your Typekit for access to these fonts.

If nothing else works

In case you were not able to find a viable solution for your server, it is possible to encode the custom font so that it can be included as a style.

  1. Make sure that your font license allows you to use the font on a different domain.
  2. Locate and download the custom font file (typically located within your theme, you might have to use browser developer toolbar to find the exact location).
  3. Encode the font into base64 format using one of the tools online.
  4. Use the style below to create the custom font style:
    @font-face { font-family: 'YOUR_CUSTOM_FONT_NAME'; /* Font name is typically included in the font file name or can be seen using the developer toolbar. */ src: url('data:application/font-woff;charset=utf-8;base64,YOUR_BASE64_CODE_GOES_HERE')format('woff'); }
  5. Add this style to your website stylesheet or to the IDX Broker Control Panel. Use this article for help.
Have more questions? Submit a request