Fonts

Setup

If you haven't already, be sure to install the main style app.

yarn add @reuters-graphics/style-main

Working with fonts

To use our fonts in your stylesheets, import either the SCSS variables and mixins in your code.

@import "~@reuters-graphics/style-main/scss/fonts/variables";
@import "~@reuters-graphics/style-main/scss/fonts/mixins";
Serif
The quick brown fox jumps over the lazy dog.
// Variable
p { font-family: $font-family-serif; }

// Mixin
p { @include font-serif; }
Sans-serif
The quick brown fox jumps over the lazy dog.
p { font-family: $font-family-sans-serif; }

p { @include font-sans; }
Monospace
The quick brown fox jumps over the lazy dog.
p { font-family: $font-family-monospace; }

p { @include font-monospace; }
Display
The quick brown fox jumps over the lazy dog.
p { font-family: $font-family-display; }

p { @include font-display; }