search

SC5 / sc5-styleguide

Styleguide generator is a handy little tool that helps you generate good looking styleguides from stylesheets using KSS notation
http://styleguide.sc5.io/
MIT License
1.26k stars 167 forks source link

How te enable / implement Google font? #876

Open jeroenb2511 opened 8 years ago

jeroenb2511 commented 8 years ago

We are implementing the style guide with Gulp. We aren't able to added the @import Google font. How should we do that?

grinkus-adapt commented 8 years ago

Don't know if it's the official way, but I worked around it by importing the styles using the extraHead flag

--extraHead "<style>@import url('https://fonts.googleapis.com/css?family=Open+Sans&subset=latin');</style>"

(that's using the CLI, but in gulp there's an extraHead property in the options object used when generating the styleguide)

jeroenb2511 commented 8 years ago

I tried to do the same way, but it load after the original stylesheet. It doesn't work for me. I didn't find any information about Google Fonts. The documentation describe static fonts and that works fine for me. For now I am searching the best way to enable Google Fonts (if these is possible).

grinkus-adapt commented 8 years ago

The load order doesn't really matter, the fonts would be rendered once they're loaded. Make sure you're using the right font-family: "Typeface Name"; for the actual typeface you're loading and check the network tab in your browser's dev-tools to see if the fonts ever get loaded. Might be connectivity issues (or plugins blocking the fonts).

varya commented 8 years ago

@jeroenb2511 Could you share how exactly you are trying to link the font? Are you doing this in the CSS (SASS, LESS) code processed by SC5-StyleGuide?

ladytellur commented 8 years ago

Try to use beforeBody build option with link to google font