Skip to main content

Add CORS server configuration to allow custom CSS3 @font-face fonts without base64

There are a number of users complaining about custom CSS3 fonts not working in Firefox. See: http://nationbuilder.com/ooo/_font_face_not_working_on_firefox andhttp://nationbuilder.com/how_to_best_include_custom_fonts_in_nationbuilder

This is due to a lack of server configuration to appropriately deal with cross-origin requests for CSS3 font files on your CDN. The suggested workarounds to base64 encode the font files and paste them into CSS have significant performance trade-offs (30% greater file size, all the fonts get downloaded regardless of what the browser actually needs).

Please consider updating your server configuration.

Apache/nginx:
http://davidwalsh.name/cdn-fonts

Amazon S3:
http://schock.net/articles/2013/07/03/hosting-web-fonts-on-a-cdn-youre-going-to-need-some-cors/

 

Share this post

Be the first to comment

Please check your e-mail for a link to activate your account.