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.