简体   繁体   中英

CDN web fonts not working in Firefox

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

The access control header needs a scheme in addition to the domain:

Access-Control-Allow-Origin: http://*.mydomain.com

It also needs a port if you're using something other than 80.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM