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?

Accepted Answer

"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');
```

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

Solution

Problem