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. 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
Insert the following code into the httpd.conf or .htaccess file:
<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
<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>
NGINX
Insert the following code into the /etc/nginx/nginx.conf or your custom /etc/nginx/conf.d/custom.conf file:
location ~* .(eot|otf|svg|ttf|woff|woff2)$ { add_header Access-Control-Allow-Origin *; }
Microsoft IIS
Insert the following code into the web.config system.webServer block:
<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
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 : https://docs.fontawesome.com/web/setup/get-started
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"> <link href="https://use.fontawesome.com/releases/v5.8.1/css/all.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.
- Make sure that your font license allows you to use the font on a different domain.
- 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).
- Encode the font into base64 format using one of the tools online.
- Use the style below to create the custom font style:
@font-face { font-family: 'YOUR_CUSTOM_FONT_NAME'; src: url('data:font/woff;base64,YOUR_BASE64_CODE_GOES_HERE')format('woff'); } - Add this style to your website stylesheet or to the IDX Broker Control Panel custom css