My font requests are failing in FireFox


#1

FireFox is a bit more picky about what is allowed to be displayed. Most other modern browsers will happily render fonts linked-to from other domains while FireFox won’t.

On a web page with links to external fonts viewed in FireFox you may see a fall-back font used instead and if you are looking at the actual HTTP requests made you may see some requests fail even though the request response was HTTP status 200 ‘OK’:

Client closed connection before receiving entire response or something similar

So, according to a few sources across the web you have to make sure that the right mime type headers are being sent for the file type. So for the file types .ttf, .eot, .svg, .woff make sure either you are sending the mime types from your origin or you set them in Fastly. See here for details http://blog.symbolset.com/properly-serve-webfonts

Next you want to ensure that you are setting the CORS [1] header for the font request. You can either allow fonts to be served from any domain:

Access-Control-Allow-Origin: *

or restrict it to a single one:

Access-Control-Allow-Origin: http://example.com

Again you can either set it from your origin, but as it’s easy in the Fastly app you can do it there!

http://docs.fastly.com/guides/21835552/28491283

Your font should then show in FireFox just fine.

  1. http://en.wikipedia.org/wiki/Cross-origin_resource_sharing