0

The already posted questions on this topic didn't solve my problem:

I am trying to use Google Web Fonts in a Bootstrap website which compiles CSS with the LESS preprocessor. I am importing all relevant style sheets at the top of my frontend.less as follows:

@import 'base.less'; 
@import '/bower_components/fontawesome/less/font-awesome.less';
@import (less) '/app/assets/less/superslides.css';
@import url(http://fonts.googleapis.com/css?family=Dancing+Script);

I can currently only apply the Web Fonts to tags on a global, non-nested level like so:

h2 {
font-family: 'Dancing Script', cursive;
}

However, when I try to use 'Dancing Script' on all h2-tags within a specific div like #slideshow, the web font is not working, e.g.:

#slideshow {

h2 { font-family: 'Dancing Script', cursive;
   }
}

or

#slideshow h2 { font-family: 'Dancing Script', cursive;
    }

Is this a bug or how do you correctly apply the font types to nested LESS?

  • Are you using LESS.js compiler into the browser or some preprocessor like lessphp or Prepros, Mixture, etc? You can make obvious that rules for selector `#slideshow h2` are being applied, for debugging purposes, by adding something like `background: pink` (I find this color useful as it isn't already present in my projects. Just get past "jokes" from colleagues for 6 months... ^^) – FelipeAls Apr 21 '14 at 19:44
  • I am using Grunt.js as a less-compiler. Just tried to apply different colors on the id, which works. However, web fonts do not seem to load correctly. I think this is a url-bug in LESS. –  Apr 21 '14 at 20:00
  • Noted for Grunt. Then you can verify the compiled CSS for an error by searching the selector `#slideshow h2` and see that yes probably the string needs to be escaped with [`~" your str'ing"`](http://lesscss.org/functions/#string-functions-e). I self-host these fonts and thus can name them without any space, far simpler ^^ – FelipeAls Apr 21 '14 at 20:10
  • See this working [codepen](http://codepen.io/seven-phases-max/pen/CfJrH). So the problem is somewehere else (not in Less and not in nesting). – seven-phases-max Apr 23 '14 at 11:01

2 Answers2

1

I have this nested webfont less file working when compiling with CodeKit 

@import url(http://fonts.googleapis.com/css?family=Dancing+Script);

#custom{
    h2{
        font-family:'Dancing Script';
    }
}

It also works when it's not nested 

@import url(http://fonts.googleapis.com/css?family=Dancing+Script);

#custom h2{
        font-family:'Dancing Script';
    }

and when I compile it with LESS, so I'm not seeing any reason to think there's a bug with LESS itself.

One think I've noticed in the past is that all compilers are not equal, and some will cough and die where others won't, or some don't compile correctly.

Good luck

David Taiaroa
  • 25,157
  • 7
  • 62
  • 50
0

I had the same problem using LESS via Gulp.

So. For example...

When I use in my .less file the code...

@import url('https://fonts.googleapis.com/css?family=Oswald')

we expect some answer (code imported) like this below in my final .css file:

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
}

Here is where the problem begins: @font-face.

In my case, LESS via Gulp don't had included this in to my code.

Look for that in your compiled code. Probably yours is missing too.

By the way. I can't figure out how to fix my LESS code.

Instead, I'm using the import command directly on to my HTML file, like this:

<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">

Not as expected but it works.

Good luck.

Luciano Laranjeira
  • 31
  • 3