best way to add Google web fonts with LESS?

[divinehammer]

Right now I’m developing a WordPress theme that includes this in functions.php:

wp_enqueue_style(‘webfonts’, ‘http://fonts.googleapis.com/css?family=Merriweather:400,700,300’, null, ‘1.0’, ‘all’);

But that means I also have to open style.less and add “Merriweather” to the body font.

What I’d prefer is to only type ‘Merriweather’ once, in one place.

Is there a way to make ‘Merriweather’ a variable and use it in both places?

[divinehammer]

Still puzzling over this one. Any ideas?

[notfilc]

If I understand correctly, you just want to use that site wide as your main font? why not just add it to your body tag..

body {
font-family: ‘Merriweather’, sans-serif;
}

If you want to have it in more places just store it as a variable and call it whenever you need it.

[Kitty Giraudel]

I’ve been struggling on it during an hour and unfortunately I couldn’t find a working solution.

My idea was to do something like this.

@my-font: “Merriweather”;
@url: “http://fonts.googleapis.com/css?family=@{my-font}”;
@import url(@url);

.selector { font-family: @my-font; }

Sadly, LESS is:
* Really buggy with url()
* Really annoying with string concatenation
* Really shitty when mixing url() and string concatenation

So… Sorry mate, I’ve no solution to provide. :(

[notfilc]

Why would you need to import the URL if you are enqueueing it in WordPress? enqueueing is the correct way to do this.

[Kitty Giraudel]

He wanted to have the font name in one single place. Importing it in the stylesheet would be a solution to his problem.

[notfilc]

Looks like a bit of a non-problem to me – for what reason would you need it like this? It only takes maybe 20 seconds more to do it the normal way, which probably outweighs the time spent on this “problem”.

[divinehammer]

Thanks guys. Hugo is right, it’s more of an experiment just to see if there’s a way to edit it in one place.

Use case – I’m developing a new WP theme and don’t know which font to use for the headers. I may want to preview a dozen of them, but I can’t unless I have both functions.php and style.less open and change the name in 2 different places. If there’s a more efficient way, I’m always open to it.

[Kitty Giraudel]

@divinehammer: I’ve kept looking for a solution. Actually, I even did a small blog post on my own blog to see if someone could came up with something: http://hugogiraudel.com/blog/less-puzzle.

Anyway, it seems like there is currently no way to do it: https://github.com/cloudhead/less.js/issues/410. LESS doesn’t support variables in @import statements.

It’s related to the fact they decided to use the @ sign for variables. And as far as I know, fixing this bug may might be pretty complicated.

However I still hope someone would come up with a work around.

[Author]

Posts