Grow your CSS skills. Land your dream job.

best way to add Google web fonts with LESS?

  • # January 17, 2013 at 4:11 pm

    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?

    # January 21, 2013 at 3:35 am

    Still puzzling over this one. Any ideas?

    # January 21, 2013 at 4:21 am

    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.

    # January 21, 2013 at 5:01 am

    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. :(

    # January 21, 2013 at 5:11 am

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

    # January 21, 2013 at 5:13 am

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

    # January 21, 2013 at 9:05 am

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

    # January 21, 2013 at 12:08 pm

    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.

    # January 21, 2013 at 12:56 pm

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

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".