Question
I use the following font in my theme :
@font-face {
font-family: "GothamRoundedMedium";
src: url(https://img.unifiedpost.com/fonts/GothamRoundedMedium.ttf);
}When I preview the template using this theme, the following error appears in the Dev tools console :
Access to font at 'https://img.unifiedpost.com/fonts/GothamRoundedMedium.ttf' from origin 'https://design-app-eu1.scripturaengage.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
img.unifiedpost.com/fonts/GothamRoundedMedium.ttf:1 GET https://img.unifiedpost.com/fonts/GothamRoundedMedium.ttf net::ERR_FAILED 200
Why can the font not be loaded ?
Answer
When the Design&Compose runtime generates output, the fonts are not loaded, only a reference is added to the output. The fonts are only loaded when the output is opened with an application (browser, email client, PDF reader).
When an HTML output file is opened with a browser, the browser will load the fonts. If the domain from which the html is opened, is not allowed to use resources from the CDN (Content Delivery Network), the font will not be loaded. In the example case the domain has no access to 'https://img.unifiedpost.com’.
The solution is for the CDN to explicitly allow the domains from which the resources need to be loaded. If the domain can vary and is not fixed, * can be returned as allow-origin header.
When PDF is generated, the fonts will be loaded and embedded in the output. In that case the CORS headers are ignored.
Additional information about allow-origin headers can be found on : https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin