Troubleshoot Missing Fonts

Last Updated: Nov 08, 2017 12:48PM PST

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 "*"
</IfModule>
</FilesMatch>

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>

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 : http://fortawesome.github.io/Font-Awesome/get-started/ (use the "Easiest" section).

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

<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"/>

Typekit

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 http://support.idxbroker.com/customer/en/portal/articles/1914439-custom-css

 

Contact Us

7aa925ed41e07af6bcf83eb1edacbce2@idxbroker.desk-mail.com
http://assets1.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete