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

Created on 3 May 2013 · 6Comments · Source: less/less.js

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

Source

chricken

Most helpful comment

or the workaround before 1.4.0 is

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

lukeapage on 3 May 2013

🚀1 ❤1 🎉1 👍1

All 6 comments

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

chricken on 3 May 2013

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.

Subash on 3 May 2013

or the workaround before 1.4.0 is

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

lukeapage on 3 May 2013

🚀1 ❤1 🎉1 👍1

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

jonschlinkert on 4 May 2013

OK, got it.
Thank you all :)

chricken on 11 May 2013

@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.