Cross-Domain Fonts not loading

1
votes

I have a website set up on Digital Ocean at http://sugarcoated.co. The domain was bought through Hover.

The IP address for this site is 45.55.209.201

When I load the IP address http://45.55.209.201 in the browser, all fonts load fine, but when I load http://sugarcoated.co, I get the CORS error message.

Access to Font at 'http://45.55.209.201/wp-content/themes/sugarcoated/css/fonts/montserrat/montserrat-regular-webfont.woff2' from origin 'http://sugarcoated.co' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://sugarcoated.co' is therefore not allowed access.

I'm new to server configs and am not sure which setting I could have possibly missed.

In hover I have set up the domain like so:

enter image description here

In Digital Ocean, my DNS records are as follows:

enter image description here

1
wordpresshovercorscross-domaindigital-ocean

1 Answers

0
votes

To browsers, http://sugarcoated.co and http://45.55.209.201 are totally separate origins.

As explained at https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy and https://en.wikipedia.org/wiki/Same-origin_policy, the same-origin policy browsers follow at the core of the web security model prevents requests for certain classes of resources cross-origin.

Fonts are one of the classes of resources prevented by default from being requested cross-origin.

For browsers to permit font requests cross-origin, the server the fonts are coming from must send an Access-Control-Allow-Origin response header that allows it.

So for browsers to allow http://sugarcoated.co to use fonts from http://45.55.209.201, the response from http://45.55.209.201/wp-content/themes/sugarcoated/css/fonts/… must include either a Access-Control-Allow-Origin: http://sugarcoated.co response header to allow just http://sugarcoated.co to use the fonts or else Access-Control-Allow-Origin: * to allow any origin to use the fonts.

Either that or you just need to change http://45.55.209.201 to http://sugarcoated.co throughout the source of your documents that need to fonts or else just use a relative URL like /wp-content/themes/sugarcoated/css/fonts/montserrat/montserrat-regular-webfont.woff2 rather than an absolute URL containing the hostname.

It doesn’t matter that underneath, http://sugarcoated.co and http://45.55.209.201 are actually the same server. The browser has no way of knowing that. For browsers to consider them as the same origin, the host parts must exactly match, character-for-character.