Saturday, December 22, 2012

Google Web fonts not showing in Google Chrome? Could be an HTTP/S protocol mismatch

Symptom:

Your Google web font doesn't work when testing it in Google Chrome.

How to reproduce the error:

You go to Google Webfonts, select a font and choose "Quick use".
You paste the code into the correct location of your html or css file and then, using CSS, set rules that use the font. But the font doesn't work. Check one more thing, is your webpage being served via HTTPS? I thought so.

Diagnosis:

Most likely you are loading your google web font as an HTTP resource when your page is being served via HTTPS. Make sure that the google web font URL is also being served via HTTPS.

As far as Chrome is concerned, a page served as HTTPS should not be calling a resource served as HTTP. Chrome isn't picky about when things are the other way around, so it will happily retrieve an HTTPS resource via a page served as HTTP. The solutions listed below reflect this understanding of Chrome.

Solutions

Option 1 - match the protocols

Make sure you always call the https version of your Google Webfont URL.  For example:

@import url(https://fonts.googleapis.com/css?family=Alfa+Slab+One);
or

<link href='https://fonts.googleapis.com/css?family=Alfa+Slab+One' rel='stylesheet' type='text/css'>

Option 2 - don't specify the protocol

Most modern browsers don't actually require that you specify the protocol, they will "deduce" the protocol based on the context from which you called it, so it is usually safe to specify the URL as follows:

@import url(//fonts.googleapis.com/css?family=Alfa+Slab+One);


or

<link href='//fonts.googleapis.com/css?family=Alfa+Slab+One' rel='stylesheet' type='text/css'>


Further Troubleshooting

If it still isn't working, check that your browser cache is properly cleared.

27 comments:

Unknown said...

Awesome. Wondered why just one font of four was shown. That was the solution.

Thanks for this!

Daniel Valledor said...

Dude. Thanks a TON! Have been wondering about this issue for a ridiculous amount of time. Thanks! Such a simple solution, would've taken forever to figure out myself.

Dani

Booger said...

Cannot say THANK YOU enough! This fixed my issue in chrome and ie 8. Wish I had a big ol' stack of money to give you for this solution.

David Bain said...

Glad to be of help, this thing was making me crazy as well.

Tony Accurso said...

Does this work for IE 8?

David Bain said...

@Tony Accurso,
Not sure if it does.

Sean Collins said...

Worked for IE 10 and Chrome. Thanks.

Kyle Domingo said...

I was experiencing the same problem but for future reference, the problem was with google.

When copy-pasting the example CSS from their site, the code uses backticks instead of single quotes. It was difficult to see.

So instead of having 'Font Name', I copy-pasted `Font Name`

http://i.imgur.com/eKCtUCA.png

Traxus said...

Oh man, thanks for this tip! Was banging my head against this one for a while, stripping out things I thought might be a conflict.

Julian Norton said...

Thanks for posting this!

KurtB said...

I totally just burned 45 minutes trying to figure this one out. I'd been burned by the same thing a year or so ago, and forgot about the '//' vs 'http://' thing. Strangely enough, FireFox would render the font, but Chrome did the correct thing and would not. Made my head hurt.

Thanks for the tips!

-kb

Andres said...

Thanks. Very good post

Michiel said...

Thanks a bunch. Protocol was the problem with me!

Travis Johnson said...

Using the javascript version should fix this as well.

David Bain said...

@Travis,
This is probably true because the javascript version is a bit "smarter" about the protocol.

reg3n said...

Awesome! :)

Quid-Maker said...

Thanks, couldn't figure out why this wasn't working.

David Hubner said...

Thank you. Thank you. Thank you.

David Hubner said...

Thank you.
No, wait, make that: THANK YOU! ;)

Carole Anne Demachkie said...

WOW! This issue had me up all night and your fix was so simple. THANK YOU THANK YOU THANK YOU!

Max Perracus said...

I thought, at first, it was the format, but it was easier. Are you working for google??
Thank you so much!!!

David Bain said...

You are all most welcome. I'm suprised that this is still an issue, but I'm glad the post is still helpful.

@Max no I'm not working for Google. I'm at Alteroo.

jason fowler said...

Seriously, I was racking my brain on this one and this worked beautifully!

Thanks!!

UnRated_Donald said...

awesome!! thanx

Andrea Cremidis said...

THANK YOU! The simplest fix finally worked!!!

M1k5y said...

Thanks a lot!

Hans van den Berk said...

I had a more or less similar issue. The proper fonts kept disappearing in Chrome, although all https calls were right. Turns out the culprit was a bookmark: Chrome got confused because I had forgotten to update the http-link in the bookmark to https after the transfer. And Chrome synchronizes bookmarks..

Sign up for my upcoming Plone 5 Book & Video tutorials

plone 5 for newbies book and videos