0

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!

Improve this question
2
  • The Syntax is correct...you converted this typeface to webfont? Commented Aug 12, 2015 at 6:17
  • Just base64 encode and embed .woff` font inside css. You have a nice article here. Commented Aug 12, 2015 at 6:52

2 Answers 2

Reset to default
2

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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.

Improve this answer

4 Comments

Same here, except I get this in all browsers, not just Chromium.
@MrLister Yea.. I get this in Chrome and FF.
Cool. Thanks so much everyone. I'll try the relative paths. And BTW, the font is General (fontspring.com/fonts/juraj-chrastina/general). I purchased it from Fontspring.
One more thing. How do you make web fonts show up locally in Chrome (or any browser for that matter)? I created a 'fonts' folder in the root folder where I'm building the site on my machine, but no web fonts will display locally.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.