Google fonts stopped working suddenly. What caused this?

Question

I am using Google Web Fonts on my website at http://ryanscowles.com. They were working fine, up until a couple days ago. I didn't alter the fonts in the CSS, but they are no longer working. I was originally calling them with:

@import url("http://fonts.googleapis.com/css?family=Enriqueta:700|Actor");

but for testing purposes, I am now trying to import them individually.

@import url(http://fonts.googleapis.com/css?family=Enriqueta:400,700);
@import url(http://fonts.googleapis.com/css?family=Actor);

Neither one seems to be loading, and in Chrome's web inspector the styles that apply the fonts seem to be crossed out. For example, the h1 in the top left should be the Enriqueta font.

Any ideas?

Answer 1

I suspect that the problem is that you have comments before the @import rules. The @import rule must come before all other content in the stylesheet and I believe this includes comments.

However I recommend against using @import for Google Web Fonts, try using the link method instead, such as:

<link href='//fonts.googleapis.com/css?family=Enriqueta:400,700' rel='stylesheet' type='text/css'>

This is a faster and more reliable method for adding stylesheets to your page, for more info see this article: don't use @import.

Answer 2

Use //fonts.googleapis.com... instead of http://fonts.googleapis.com... - helped for me.