How to import Google Fonts on a Stylus file?

Question

I'd like to know how can I import Google Fonts from a stylus (.styl) file. I tried:

@import url(http://fonts.googleapis.com/css?family=Overlock:400,700,400italic,700italic|Calligraffitti)

...but it failed on my console when compiling with the following error:

Potentially unhandled rejection [2] ParseError: C:\Users\Coutinho\Documents\GitHub\bespoke-theme-fancy\lib\theme.styl:5
   1| // Bespoke Classes: https://github.com/markdalgleish/bespoke-classes
   2| // Stylus: http://learnboost.github.io/stylus
   3|
   4| @import 'normalizecss/normalize.css'
 > 5| @import url(http://fonts.googleapis.com/css?family=Overlock:400,700,400italic,700italic|Calligraffitti)
   6|
   7| $font-family-serif 'Calligraffitti', cursive
   8| $font-family-sans 'Overlock', Helvetica, sans-serif

expected ")", got "selector |Calligraffitti)"

Thanks!

Weigela

Answer 1

Wrap the url in quotes: @import url('http://fonts.googleapis.com/css?family=Overlock:400,700,400italic,700italic|Calligraffitti')

Exuviae

@panya and everyone: A word of WARNING: Google's font API delivers different responses depending on UA headers given by the browser... An old IE8 get's ttf fonts, most browsers get woff fonts, some get woff2... If you rake this in server-side (thus unspecific to the consuming client-side browser) you may see troubles... you'd probably have to combine font requests made with different UA headers, and then write them into a static include file... – Aweigh