CodeKit doesn't compile .less with @font-face declaration

Question

Initial Post: I moved a project from my server back to my local environment and now .less files won't compile.

.kit and .js compile well. When I save a .less file codekit says "Success code kit compiled xy.less" but it didn't generate anything.

Also if I write some rubbish inside a less file there is still a success message.

All the .less files show up nicely in the code kit window but it seems to ignore less files altogether

osx Mavericks, codekit 1.9.3

I narrowed the problem down to the @font-face declaration inside a .less import. I use a webfont from myfonts.com I added the myfonts.com css declarations like this:

@import url('//hello.myfonts.net/count/xy');
@font-face {
font-family: 'Blabla';
src:    url('/webfonts/29DFBD_0_0.eot');
src:    url('/webfonts/29DFBD_0_0.eot?#iefix') format('embedded-opentype'),
        url('/webfonts/29DFBD_0_0.woff') format('woff'),
        url('/webfonts/29DFBD_0_0.ttf') format('truetype');
}

The problematic line is the one with format('embedded-opentype') with this line inside my less files, code kit stops compiling, yet hands out a success message.

If I write Hello World on the fourth line:

@import url('//hello.myfonts.net/count/xy');
@font-face {
font-family: 'Blabla';
src:    url('/webfonts/29DFBD_0_0.eot'); Hello World
src:    url('/webfonts/29DFBD_0_0.eot?#iefix') format('embedded-opentype'),
        url('/webfonts/29DFBD_0_0.woff') format('woff'),
        url('/webfonts/29DFBD_0_0.ttf') format('truetype');
}

Codekit trows an error at me.

But if I write the same, one line below:

@import url('//hello.myfonts.net/count/xy');
@font-face {
font-family: 'Blabla';
src:    url('/webfonts/29DFBD_0_0.eot');
src:    url('/webfonts/29DFBD_0_0.eot?#iefix') format('embedded-opentype'), Hello World
        url('/webfonts/29DFBD_0_0.woff') format('woff'),
        url('/webfonts/29DFBD_0_0.ttf') format('truetype');
}

This throws in a success message and the compiled .css doesn't change.

So it must be this line right?: src: url('/webfonts/29DFBD_0_0.eot?#iefix') format('embedded-opentype'), whats wrong with that?

Answer 1

Contrary to your conclusion, I assume the problem to be the @import declaration that MyFonts uses to track pageviews, i.e.:

/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/1a2b3c");

Here, the LESS preprocessor within CodeKit has trouble with the URL that lacks a file extension. The fix is to indicate the filetype in brackets right after @import:

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

[In fact, the above mentioned CSS segment is not necessary for displaying the webfont, it works just fine without (and does not choke CodeKit either). Omitting it might violate the licence though, because without pinging MyFonts' servers, they don't know if your within the webfont useage quota.]