CODEWITHSUNDEEP
htmlcssgoogle-chromefontswebfonts
Bradford Allen
Bradford Allen

Reputation: 1

Web fonts won't display in Chrome

No matter what I've tried, I can't get any web fonts to display in Chrome. I've created a test page and viewed it in Safari and Chrome (I'm on a Mac). Web fonts look fine on Safari, IE and Firefox--but not Chrome.

Here's the page: http://bradfordallendesign.com/test123/test.html

And here's the CSS:

@font-face {
    font-family: 'general_200thin';
    src: url('http://www.bradfordallendesign.com/fonts/General-200-Thin-webfont.eot');
    src: url('http://www.bradfordallendesign.com/fonts/General-200-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.bradfordallendesign.com/fonts/General-200-Thin-webfont.woff2') format('woff2'),
         url('http://www.bradfordallendesign.com/fonts/General-200-Thin-webfont.woff') format('woff'),
         url('http://www.bradfordallendesign.com/fonts/General-200-Thin-webfont.ttf') format('truetype'),
         url('http://www.bradfordallendesign.com/fonts/General-200-Thin-webfont.svg#general_200thin') format('svg');
    font-weight: normal;
    font-style: normal;
}

.test
{
    font-family:'general_200thin', Helvetica, Arial, san-serif;
    font-size: 80px;
    }

Any suggested fixes are much appreciated! Thanks!

Upvotes: 0

Views: 2568

Answers (2)

Mr Lister
Mr Lister

Reputation: 46539

On my machine, all browsers give errors when loading, not just Chromium.

However, I can get the font to load if I change the URI to include the www.
http://www.bradfordallendesign.com/test123/test.html

That way, the domain is the same and you no longer get a CORS exception.

So the solution is to not specify the absolute path to the fonts; just write 

@font-face {
    font-family: 'general_200thin';
    src: url('/fonts/General-200-Thin-webfont.eot');
    src: url('/fonts/General-200-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/General-200-Thin-webfont.woff2') format('woff2'),
         url('/fonts/General-200-Thin-webfont.woff') format('woff'),
         url('/fonts/General-200-Thin-webfont.ttf') format('truetype'),
         url('/fonts/General-200-Thin-webfont.svg#general_200thin') format('svg');
    font-weight: normal;
    font-style: normal;
}

Then you can be sure you won't have domain name mismatches.

Upvotes: 2

iplus26
iplus26

Reputation: 2637

Here is what I got:

Font from origin 'http://www.bradfordallendesign.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://bradfordallendesign.com' is therefore not allowed access.

So I am wondering whether the page has the access to the font (from bradfordallendesign.com)

I suggest that you use the relative path of the files instead of the absolute path. Just like Mr Lister's answer.

Upvotes: 0

Related Questions