We are adding our custom website font via our CDN. Our CSS code is below. This is in our main.css file which is included in the header of our website.
This works in Safari and Chrome on OSX, but on Windows, it works only in Safari. And maybe IE10. On Firefox it simply doesn't work. And on IE9 etc it works sometimes. (What an irritating browser.)
Some websites suggest that Firefox wants a relative font URL. But we need to use a CDN for our font. How do Google fonts work in Firefox is there is a "same origin" issue?
Our main server is Nginx. The static font files are being served from there, so the Apache suggestion of Allow Origin "*" does not help us much. The CDN in this case is origin-pulled from our website and carries our own headers. So if we need to so send a header via Nginx, we can do that.
THE FONT CSS
@font-face{font-family:'Custom-Sans' ;src:url('http://cache.MYDOMAIN.com/Custom-Sans-light-webfont.eot') ;src:url('http://cache.MYDOMAIN.com/Custom-Sans-light-webfont.eot?#iefix') format('embedded-opentype'),url('http://cache.MYDOMAIN.com/Custom-Sans-light-webfont.woff') format('woff'),url('http://cache.MYDOMAIN.com/Custom-Sans-light-webfont.ttf') format('truetype');font-weight:200;font-style:normal} @font-face{font-family:'Custom-Sans' ;src:url('http://cache.MYDOMAIN.com/Custom-Sans-thin-webfont.eot') ;src:url('http://cache.MYDOMAIN.com/Custom-Sans-thin-webfont.eot?#iefix') format('embedded-opentype'),url('http://cache.MYDOMAIN.com/Custom-Sans-thin-webfont.woff') format('woff'),url('http://cache.MYDOMAIN.com/Custom-Sans-thin-webfont.ttf') format('truetype');font-weight:100;font-style:normal} @font-face{font-family:'Custom-Sans' ;src:url('http://cache.MYDOMAIN.com/Custom-Sans-regular-webfont.eot') ;src:url('http://cache.MYDOMAIN.com/Custom-Sans-regular-webfont.eot?#iefix') format('embedded-opentype'),url('http://cache.MYDOMAIN.com/Custom-Sans-regular-webfont.woff') format('woff'),url('http://cache.MYDOMAIN.com/Custom-Sans-regular-webfont.ttf') format('truetype');font-weight:normal;font-style:normal} @font-face{font-family:'Custom-Sans' ;src:url('http://cache.MYDOMAIN.com/Custom-Sans-semibold-webfont.eot') ;src:url('http://cache.MYDOMAIN.com/Custom-Sans-semibold-webfont.eot?#iefix') format('embedded-opentype'),url('http://cache.MYDOMAIN.com/Custom-Sans-semibold-webfont.woff') format('woff'),url('http://cache.MYDOMAIN.com/Custom-Sans-semibold-webfont.ttf') format('truetype');font-weight:500;font-style:normal} @font-face{font-family:'Custom-Sans' ;src:url('http://cache.MYDOMAIN.com/Custom-Sans-bold-webfont.eot') ;src:url('http://cache.MYDOMAIN.com/Custom-Sans-bold-webfont.eot?#iefix') format('embedded-opentype'),url('http://cache.MYDOMAIN.com/Custom-Sans-bold-webfont.woff') format('woff'),url('http://cache.MYDOMAIN.com/Custom-Sans-bold-webfont.ttf') format('truetype');font-weight:700;font-style:normal} And --
THE HEADERS OF A FONT FILE (Served by Nginx)
HTTP/1.1 200 OK Accept-Ranges: bytes Access-Control-Allow-Origin: *.MYDOMAIN.com Cache-Control: max-age=315360000 Content-Type: application/octet-stream Date: Sun, 10 Aug 2014 15:10:29 GMT Expires: Thu, 31 Dec 2037 23:55:55 GMT Last-Modified: Mon, 28 Jul 2014 14:52:44 GMT Server: Hosting Inc Vary: Accept-Encoding Content-Length: 20077 
