Hey, CSS gurus: My blog at micro.coyotetracks.org is supposed to load fonts from coyotetracks.org and does on Safari, but not Firefox. I’m sure this is some kind of cross-domain security thing; is this something I can fix by messing with the headers?
@chipotle you could do a Access-Control-Allow-Origin on the font file extensions in your webserver config.
@chipotle Looks like your evaluation is correct! I loaded Firefox up, allowed things in NoScript, and got many similar messages in Firefox's F12 Developer Tools "Console" pane…
> Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://coyotetracks.org/fonts/equity_text_b_italic-webfont.woff2. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
With a [Learn More] link that goes here: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin
So adding a header to https://coyotetracks.org/ should fix it:
> Access-Control-Allow-Origin: https://micro.coyotetracks.org
With the "https" at the front that gets eaten by auto-linking. Note that "only a single origin can be specified", though there's a wildcard option too - check the Access-Control-Allow-Origin header docs also on the MDN website linked above.
(On a related note, if you ever debug Content Security Policies, I'd suggest checking out https://addons.mozilla.org/en-US/firefox/addon/laboratory-by-mozilla/ )