Fixing Cross-Domain Fonts & CORS Issues

When designing custom document templates, invoices, or external portals in HireHop, you may want to use your own custom @font-face web fonts. However, if those fonts are hosted on an external server or a different domain, browsers will frequently block them from loading inside the rendered document.

This issue is caused by CORS (Cross-Origin Resource Sharing) security restrictions, which block web fonts from loading across different domains unless the origin server explicitly permits it.

Fonts not loading in documents

Below is a typical example of how a custom web font is declared in HTML/CSS. When rendered across different domain origins, browsers will fail to load the font unless proper CORS headers are present:

<style type="text/css">
@font-face {
    font-family: 'OpenSans';
    src: url('https://my_server.com/fonts/OpenSans.woff2') format('woff2');
}
html, body{
    font: normal 16px OpenSans, sans-serif;
}
</style>

The solution

To resolve cross-domain font blocking, your web server must be configured to send an Access-Control-Allow-Origin HTTP header alongside the font files.

If you are using fonts hosted by third parties (like Google Fonts or Adobe Typekit), CORS headers are handled automatically. However, if you host font files (.woff, .woff2, .ttf, .eot) on your own server, choose your server setup below to enable cross-origin access:

Apache (.htaccess)

To configure an Apache web server, put the following code into the httpd.conf or .htaccess file:

1. Add the MIME type headers on Apache:

AddType application/vnd.ms-fontobject .eot
AddType application/x-font-opentype   .otf
AddType image/svg+xml                 .svg
AddType application/x-font-ttf        .ttf
AddType application/font-woff         .woff
AddType application/font-woff2        .woff2

2. Enable cross-origin resource sharing (CORS) on Apache for the MIME types:

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

Nginx

To configure an NGINX web server, put the following code into the /etc/nginx/nginx.conf or your custom /etc/nginx/conf.d/custom.conf file.

1. Add MIME type headers:

application/vnd.ms-fontobject    eot;
application/x-font-opentype      otf;
image/svg+xml                    svg;
application/x-font-ttf           ttf;
application/font-woff            woff;
application/font-woff2           woff2;

2. Enable cross-origin resource sharing (CORS) on Nginx for the MIME types:

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

IIS (Microsoft Windows Server)

To configure the Microsoft IIS and enable CORS, add the following the code to 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>

Alternative Method: PHP (If you cannot edit server config files)

If you do not have permission to modify your web server’s configuration files (like httpd.conf, .htaccess, or nginx.conf), you can serve font files dynamically using a PHP script to send the required CORS headers directly.

1. PHP Server Script File

Create a PHP file (e.g., font.php) on your server to set the origin header and output your font file:

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/font-woff2");
echo file_get_contents("path/to/OpenSans.woff2");
?>

2. CSS @font-face Implementation

<style type="text/css">
@font-face {
  font-family: OpenSans;
  src: url('https://my_domain.com/font.php') format('woff2');
}
body, html {
  font-family: OpenSans, sans-serif;
}
</style>