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
