From: Gabriel Seltzer <gabeseltzer@gmail.com>
Date: Tue, 12 Feb 2019 21:42:01 +0000 (+0000)
Subject: add font folder documentation
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=72c4c61f408a2aad4e153bf431f0fcf8261d6674;p=working%2Feg-antora.git

add font folder documentation
---

diff --git a/docs/modules/ROOT/pages/changing-fonts.adoc b/docs/modules/ROOT/pages/changing-fonts.adoc
new file mode 100644
index 0000000..edba5e3
--- /dev/null
+++ b/docs/modules/ROOT/pages/changing-fonts.adoc
@@ -0,0 +1,60 @@
+= 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`