Menu
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!
633
#Google FontsFind the one you want and click Quick Use. Click the @import tab and copy the code it gives you. Put that the the top of your CSS in CodePen. Then use the CSS they give you right below that with the font-family name on any selectors you want to use that font on.
Manually Download Google FontsOpen the drawer at the bottom of the screen where your selection is saved. Click the “Download” icon on the upper right corner of the selection drawer. Once downloaded, extract the zip file. Open the font folder, right-click on the font and choose “Install.”
You can load multiple google font's but you have to define font families for every font you want to import. You need to separate each font using '|' character.
Wrap the url in quotes:
@import url('http://fonts.googleapis.com/css?family=Overlock:400,700,400italic,700italic|Calligraffitti')
136
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
