= Changing Fonts

There are two easy ways to change fonts:

== Use Yarn to Install a Font

. Use npm or yarn to install your new font package
. In `./antora-ui-default/src/css` add a new css file: `typeface-name-of-your-font.css`
. Import your font:
+
```css
@font-face {
  font-family: "name of your font";
  font-style: normal;
  font-weight: 400;
  src:
    local("name of your font"),
    url(~name-of-your-package/files/name-of-your-font.woff) format("woff"),
}
```
. Do this for each style (ie bold, monospace, etc) that you want to use.
. Change the css to actually use your newly imported font. For example, if you want to use your font for all normal text on the site, you can edit `base.css` where it specifies the `font-family`:
+
```css
html {
  box-sizing: border-box;
  font-family: "name of your font", sans-serif;
  font-size: 1.1em;
  text-size-adjust: 100%;
}
```
. Save everything and test out the new font with `gulp preview`


== Manually add Font Files

To manually add font files, add them to `./antora-ui-default/src/font`. Next, you need to import them in the site's css:

. In `./antora-ui-default/src/css` add a new css file: `typeface-name-of-your-font.css`
. Import your font:
+
```css
@font-face {
  font-family: "Name Of Your Font";
  font-weight: 400;
  src: url("../font/name-of-your-font.otf");
}
```
. Do this for each style (ie bold, monospace, etc) that you want to use.
. Change the css to actually use your newly imported font. For example, if you want to use your font for all normal text on the site, you can edit `base.css` where it specifies the `font-family`:
+
```css
html {
  box-sizing: border-box;
  font-family: "name of your font", sans-serif;
  font-size: 1.1em;
  text-size-adjust: 100%;
}
```
. Save everything and test out the new font with `gulp preview`