changing-fonts.adoc 1.77 KB
Newer Older
1 2 3 4 5 6
= Changing Fonts

There are two easy ways to change fonts:

== Use Yarn to Install a Font

7 8 9
. 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:
10 11 12 13 14 15 16 17 18 19 20
+
```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"),
}
```
21 22
. 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`:
23 24 25 26 27 28 29 30 31
+
```css
html {
  box-sizing: border-box;
  font-family: "name of your font", sans-serif;
  font-size: 1.1em;
  text-size-adjust: 100%;
}
```
32
. Save everything and test out the new font with `gulp preview`
33 34 35 36 37 38


== 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:

39 40
. In `./antora-ui-default/src/css` add a new css file: `typeface-name-of-your-font.css`
. Import your font:
41 42 43 44 45 46 47 48
+
```css
@font-face {
  font-family: "Name Of Your Font";
  font-weight: 400;
  src: url("../font/name-of-your-font.otf");
}
```
49 50
. 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`:
51 52 53 54 55 56 57 58 59
+
```css
html {
  box-sizing: border-box;
  font-family: "name of your font", sans-serif;
  font-size: 1.1em;
  text-size-adjust: 100%;
}
```
60
. Save everything and test out the new font with `gulp preview`