# Adding a New Font

You can add fonts in the `src` directory. When you reference them with `url` in your style sheets, they will be resolved and bundled with your application. Let's go through an example.

{% hint style="info" %}
You can find fonts  in [Font squirrel](https://www.fontsquirrel.com/), [dafont.com](https://www.dafont.com/), [Everything Fonts](https://everythingfonts.com/) or [Google Fonts](https://fonts.google.com/).

In our case, it is best to [convert your fonts](https://www.fontsquirrel.com/tools/webfont-generator) into the woff format, which is optimized for the web. See [this article for more details](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts).
{% endhint %}

Suppose you have decided to use the [Staatliches and Source Sans Pro fonts](https://fonts.google.com/share?selection.family=Source%20Sans%20Pro:wght@600%7CStaatliches). Convert them into the Woff and Woff2 formats. Then, put them in the `src/style/fonts` directory. Any directory under `src` would work, but it makes sense to store them in their own directory along with styles. Verify that your fonts are where you expect:

{% code title="$ ls src/style/fonts/" %}

```
sourcesanspro-regular-webfont.woff  sourcesanspro-regular-webfont.woff2
staatliches-regular-webfont.woff    staatliches-regular-webfont.woff2
```

{% endcode %}

However, they are still not imported in our styles. To actually include them into the page, create a new file, named`src/style/base/_font.scss`, for example. First, we will need to declare the font faces:

{% code title="src/style/base/\_font.scss" %}

```css
@font-face {
    font-family: 'Staatliches';
    src: url(/style/fonts/staatliches-regular-webfont.woff2) format('woff2'),
    url(/style/fonts/staatliches-regular-webfont.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SourceSansPro';
    src: url(/style/fonts/sourcesanspro-regular-webfont.woff2) format('woff2'),
    url(/style/fonts/sourcesanspro-regular-webfont.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}
```

{% endcode %}

For convenience, let's also define SCSS variables to refer to these fonts:

{% code title="src/style/base/\_font.scss" %}

```css
$font-staatliches: 'Staatliches', sans-serif;
$font-source-sans-pro: 'SourceSansPro', sans-serif;
```

{% endcode %}

Now, we have told the browser that these fonts exist and where to find them. However, they aren't actually being used anywhere. Let's use the Staatliches font for headings, and the Source Sans font for everything else:

{% code title="src/style/base/\_font.scss" %}

```css
body {
    font-family: $font-source-sans-pro;
}

h1, h2, h3, h4, h5, h6 {
    font-family: $font-staatliches;
}
```

{% endcode %}

One final change is needed - to actually include the `_font.scss` file as part of the styles. We can do so by importing it in `src/style/main.scss` (override the file if you don't already have it in your code). In the last lines of `main.scss`, add:

{% code title="src/style/main.scss" %}

```css
@import './base/font';
```

{% endcode %}

{% hint style="warning" %}
Note: it is important that this import occurs after the import of `base/_reset.scss`, since, in the base theme, this is where the body font is set.
{% endhint %}

We can now refresh the page to see that the fonts have been updated:

![Result: fonts updated!](https://4029840077-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNcGSsOTtbcSNK-Y1U1%2F-McO1IVMoLcgYQyJLLMm%2F-McO3X5k06igr66mKLJD%2Fimage.png?alt=media\&token=0c3af93f-5f16-4204-a570-8771b7a6644c)

**Exercise: Try adding a new font and assigning it to some text! Be careful though - the more fonts you add, the less consistent the user interface looks. Besides, each additional font needs to be loaded into the browser.**