Google Fonts won't work when imported at a less nested level.

Question

I'm using Google Fonts, and have imported it in less. Here is my code:

main.less

#container {
  @import url(http://fonts.googleapis.com/css?family=Raleway:300);
  .like {
    font-family: 'Raleway', sans-serif;
  }
}

This doesn't work. but if I put @import url(http://fonts.googleapis.com/css?family=Raleway:300); before #container, it does.

I'm guessing this maybe because of path, but I don't know why. How do I fix this?

Answer 1

"Your @imports must come before all other content in your CSS. And I mean all of your content. Even putting comments before the @import tag will cause your imports to fail. So be sure to do your imports before you do anything else." - http://www.cssnewbie.com/css-import-rule/#.UtNj1PQmnn8

Direct from W3C:

"Any @import rules must precede all other at-rules and style rules in a style sheet (besides @charset, which must be the first thing in the style sheet if it exists), or else the @import rule is invalid." - http://www.w3.org/TR/css3-cascade/#at-import

Here's a fiddle: http://jsfiddle.net/setek/5QsvU/

This demonstrates that when @import is not the first line of a stylesheet/embed, it does not work. Try putting the @import first line, you can see what happens:

#sidebar a { color: #f00; }

@import url('http://jsfiddle.net/css/screen.css?jobofferinsidebar');

vs. just having:

@import url('http://jsfiddle.net/css/screen.css?jobofferinsidebar');