import { Meta } from '@storybook/addon-docs';
import { parameters } from '$docs/utils/docsPage.js';

<Meta title="SCSS/Fonts" parameters={{ ...parameters }} />

![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)

# Fonts

There are several ways to specify font styles.

## Classes

```svelte
<p>
  <span class="font-serif">Lorem</span>
  <span class="font-sans">ipsum</span>
  <span class="font-mono">dolor</span>
</p>
```

## Variables

```svelte
<style lang="scss">
  // Import SCSS variables
  @import '@reuters-graphics/graphics-components/dist/scss/variables';

  p {
    // Use one...
    font-family: $font-family-serif;
    font-family: $font-family-sans-serif;
    font-family: $font-family-display;
    font-family: $font-family-monospace;
  }
</style>
```

## Mixins

```svelte
<style lang="scss">
  // Import SCSS mixins
  @import '@reuters-graphics/graphics-components/dist/scss/mixins';

  p {
    // Use one...
    @include font-serif;
    @include font-sans;
    @include font-display;
    @include font-monospace;
  }
</style>
```