2

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?

Ryan
  • 2,433
  • 5
  • 31
  • 41
  • You are missing quotes around the URLs. – Oded Mar 13 '13 at 18:33
  • 2
    url loads fine here. did you (or your IP range) get blacklisted for abuse or something? what happens if you manually hit that url in your browser? – Marc B Mar 13 '13 at 18:34
  • @MarcB - All three of the URL's seem to load for me locally. I will check with my host to see if anything has been altered on their end. – Ryan Mar 13 '13 at 18:35
  • @Oded - I added the quotes, but it still doesn't seem to do the trick. I had the quotes on the original, as well. – Ryan Mar 13 '13 at 18:36
  • 1
    OK - thought that might be it, but there is nothing that needs quoting on those URLs. – Oded Mar 13 '13 at 18:37

2 Answers2

3

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.

Barry
  • 167
  • 1
  • 10
  • This did the trick. It's strange to me that the `@import` was working correctly before, but seems to have stopped suddenly. Either way, it's working now! Thank you for the reply and the explanation. – Ryan Mar 13 '13 at 19:02
  • came here for the same reason, `@import` doesn't work out of sudden and indeed there were comments before it. Now I use `link` method. Thank you. :) – merv Mar 13 '16 at 22:13
0

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

Adam Smaka
  • 5,977
  • 3
  • 50
  • 55