colette
Version:
A CSS and JS starter kit for 20 Minutes web projects
39 lines (33 loc) • 2.14 kB
text/stylus
// Fonts
//
// The standard fonts used in 20 Minutes digital projects are **Open Sans** and **Helvetica**.
//
// **Helvetica** is used as the body text font.
//
// **Open Sans** is included in the project and available in 3 weights: Regular, Semi Bold and Bold.
// **Open Sans** must be **systematically used** for content titles :
// - bold weight, in block teaser or content view,
// - regular in listed teaser view.
//
// | Name | Demo |
// | -------------------------| -------------------------------------------------------------------------------------------------------------------------------- |
// | Open Sans Regular | <p style="font-family:'Open Sans WebFont';font-weight:normal;font-style:normal;">The quick brown fox jumps over the lazy dog</p> |
// | Open Sans Regular italic | <p style="font-family:'Open Sans WebFont';font-weight:normal;font-style:italic;">The quick brown fox jumps over the lazy dog</p> |
// | Open Sans Semi Bold | <p style="font-family:'Open Sans WebFont';font-weight:600;font-style:normal;">The quick brown fox jumps over the lazy dog</p> |
// | Open Sans Bold | <p style="font-family:'Open Sans WebFont';font-weight:bold;font-style:normal;">The quick brown fox jumps over the lazy dog</p> |
// | Open Sans Bold italic | <p style="font-family:'Open Sans WebFont';font-weight:bold;font-style:italic;">The quick brown fox jumps over the lazy dog</p> |
//
// Styleguide: Design.Fonts
for i, $font in $fontface
@font-face
fontSrc = ()
for j, font in $font.src
push(fontSrc, font)
font-family: join(' ', $font.family) // stylus fails if we ommit `:` for hashes getter
if $font.weight
font-weight: $font.weight // stylus fails if we ommit `:` for hashes getter
if $font.style
font-style: $font.style // stylus fails if we ommit `:` for hashes getter
src s(join(', ', fontSrc))
if (!$fontload-js)
font-display $fontload