@import with urls (Google Font API)

Hiten's Avatar

Hiten

21 May, 2010 01:50 AM

I'm trying to import CSS from Google directly into my CSS file (to keep style stuff out of my page source).
e.g.:
@import url(http://fonts.googleapis.com/css?family=Cardo); which is what I got from:
http://code.google.com/webfonts/family?family=Cardo#code

Less doesn't recognize that this is an url and tries to append the http://.... to my current path.

Any workarounds?

  1. 1 Posted by Bill Davis on 07 Jul, 2010 06:19 PM

    Bill Davis's Avatar

    Same issue here. Anyone have thoughts on this?

  2. 2 Posted by Chris on 19 Aug, 2010 08:08 PM

    Chris's Avatar

    LESS won't understand a URL path.

    Furthermore the CSS google is generating is using @font-face, which has a url in it as well. What I would do is go to the direct CSS that google is linking too, copy it, paste it into a separate CSS file, and import the path to the local CSS file you created for the @font-face. It's dirty, but a work around.

    Hope this helps :)

    ~ Chris

  3. 3 Posted by Alan on 25 Aug, 2010 08:01 PM

    Alan's Avatar

    In order to improve compatibility with CSS it'd be useful if LESS would just pass such things on without touching it. The CSS files Google generates are browser-dependent and the URLs are an implementation detail that may change without advance notice, so trying to include them directly would be a bad idea.

    LESS promises to be fully compatible with CSS, so dropping or choking is not an acceptable behaviour for CSS syntax.

  4. 4 Posted by Dan on 07 Mar, 2011 12:41 PM

    Dan's Avatar

    Was there ever a fix for this? I've resorted to using the <link.. in my head rather than an @import in my CSS, which is less than desirable..

  5. 5 Posted by Dale Sande on 09 May, 2011 02:33 PM

    Dale Sande's Avatar

    Hello .LESS? This issue has been on file for about a year now with no resolution? Google fonts aren't going anywhere and .LESS not supporting this in the .LESS files is pretty unacceptable.

  6. 6 Posted by kdevs on 12 Sep, 2012 05:58 PM

    kdevs's Avatar

    Wrap the URL in quotes.

  7. 7 Posted by Joel on 03 Apr, 2014 09:20 PM

    Joel's Avatar

    Wrapping the URL in quotes doesn't work for me in rails.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac