Google Fonts will not work when importing at a less nested level.

Question

I use Google Fonts and imported it 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 does not work. but if I put the @import url(http://fonts.googleapis.com/css?family=Raleway:300); before #container , this will happen.

I guess this is possible because of the way, but I don't know why. How to fix it?

Answer 1

"Your @imports should appear in front of all the other content in your CSS. And I mean all your content. Even adding comments before the @import tag will cause your import to fail. So remember to make your import before you do that Anything else. " - http://www.cssnewbie.com/css-import-rule/#.UtNj1PQmnn8

Straight from W3C:

"Any @import rules must precede all other rules and style rules in the stylesheet (except for @charset , which must be first in the stylesheet, if they exist), or the @import rule is invalid." - http://www.w3.org/TR/css3-cascade/#at-import

Here's the script: http://jsfiddle.net/setek/5QsvU/

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

 #sidebar a { color: #f00; } @import url('http://jsfiddle.net/css/screen.css?jobofferinsidebar'); 

against. just having:

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