Less.js: Problem with @import url by myfonts.com

[chricken]

Hi,
I am having a problem, when I want to use Fonts from myfonts.com together with lesscss.

To use the fonts I had to add the following code to my CSS / LESS-file.

@import url("//hello.myfonts.net/count/xyzxyz");

@font-face {
font-family: 'FrutigerLT-Light';
src: url('schriften/xyzxyz_0_0.eot');
src: url('schriften/xyzxyz_0_0.eot?#iefix') format('embedded-opentype'),
url('schriften/xyzxyz_0_0.woff') format('woff'),
url('webfonts/xyzxyz_0_0.ttf') format('truetype');

}

xyzxyz is the code for the font to use. I'm not sure if it is good idea, to keep it visible.
But with that import, the less.js won't work anymore.
Firefox gives the error

---

n is undefined

in styles.less
r.Parser/p.parse@file:///D:/Homepages/Prokon/less-1.3.3.min.js:8
w/<@file:///D:/Homepages/Prokon/less-1.3.3.min.js:8
x@file:///D:/Homepages/Prokon/less-1.3.3.min.js:8
w@file:///D:/Homepages/Prokon/less-1.3.3.min.js:8
g@file:///D:/Homepages/Prokon/less-1.3.3.min.js:8
r.refresh@file:///D:/Homepages/Prokon/less-1.3.3.min.js:9
@file:///D:/Homepages/Prokon/less-1.3.3.min.js:9

@file:///D:/Homepages/Prokon/less-1.3.3.min.js:9

Other browsers simply don't show the font and, of course, less doesn't work.

I hope, this helps to make it work.
Best regards
Christian

[chricken]

No idea, why the code is formatted that way.
Sorry for the inconvenience.

[Subash]

You have to add css extension to the @imported file.
you can do

@import (css) url("//hello.myfonts.net/count/xyzxyz");

If you are using less v1.4 beta

Note: I haven't tested it.

[lukeapage]

or the workaround before 1.4.0 is

@import url("//hello.myfonts.net/count/xyzxyz?css")

[jonschlinkert]

@chricken the code needs be wrapped in backticks to retain formatting. See this: http://github.github.com/github-flavored-markdown/

[chricken]

OK, got it.
Thank you all :)

[MrBlank]

@lukeapage: I'm not sure this should be closed.

I just ran into this myFonts import problem with Less 1.7.0 in CodeKit. Without the import directive of (css) before the url, Less says it compiles successfully when it doesn't. This seems like a bug to me. Less should give an error, right?

Example:

@import url("//hello.myfonts.net/count/xyzxyz");
Less will say it has successfully compiled when it didn't write anything.

@import (css) url("//hello.myfonts.net/count/xyzxyz");
Less will successfully compile.