Troubleshoot Missing Fonts on idxbroker pages

🔍 Understanding Font Protection

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

Server Configuration

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. Most web browsers will not allow fonts to be embedded cross-domain, but you can include some code on your server to include the Access-Control-Allow-Origin header. Below are instructions on how to do this depending on the webserver that hosts your website.

🅰️ Apache Configuration

httpd.conf
.htaccess

Insert the following code into the httpd.conf or .htaccess file:

Apache Configuration Code

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

💡 WordPress with Avada Theme

If you are using WordPress with an Avada theme, use this code in your .htaccess file:

<FilesMatch ".(eot|ttf|otf|woff)">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>

🐧 NGINX Configuration

nginx.conf
custom.conf

Insert the following code into the /etc/nginx/nginx.conf or your custom /etc/nginx/conf.d/custom.conf file:

NGINX Configuration Code

location ~* \.(eot|otf|svg|ttf|woff|woff2)$ {
    add_header Access-Control-Allow-Origin *;
}

🪟 Microsoft IIS Configuration

web.config

Insert the following code into the web.config system.webServer block:

IIS Configuration Code

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="access-control-allow-origin" value="*" />
      <add name="access-control-allow-headers" value="content-type" />
    </customHeaders>
  </httpProtocol>
</system.webServer>

🔄 Alternate Font Location

Easier Methods

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

Official Docs ↗

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: https://docs.fontawesome.com/web/setup/get-started

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

Font Awesome CDN Links

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet">

🎨 Typekit (Adobe Fonts)

Premium

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.

Set Up Custom Domain

Set up a custom domain for IDX Broker as described here.

Add to Typekit

Follow instructions from Adobe to add your IDX Broker CName to your Typekit for access to these fonts.

🛠️ If Nothing Else Works: Base64 Font Encoding

Advanced Method

⚠️ Important Considerations

Make sure that your font license allows you to use the font on a different domain.
Base64 encoding increases file size by approximately 30%.
This method works when server configuration isn’t possible.

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.

Locate and Download Font

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

Convert to Base64

Encode the font into base64 format using one of the tools online.

Create CSS Font Face

Use the style below to create the custom font style:

Base64 Font CSS

@font-face {
    font-family: 'YOUR_CUSTOM_FONT_NAME';
    src: url('data:font/woff;base64,YOUR_BASE64_CODE_GOES_HERE') format('woff');
}

Implement the CSS

Add this style to your website stylesheet or to the IDX Broker Control Panel custom.css.

Still Need Help?

If you’re experiencing font issues after trying these solutions, our support team is here to help.

Submit a Support Request