From: Pavel Anni <pavel.anni@sambanovasystems.com>
Date: Wed, 13 May 2020 20:38:28 +0000 (-0400)
Subject: Add instructions to @import typeface-*.css
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=47558555e09550eab943675db6d03bc98d9c9ffe;p=working%2Feg-antora.git

Add instructions to @import typeface-*.css
---

diff --git a/docs/modules/ROOT/pages/add-fonts.adoc b/docs/modules/ROOT/pages/add-fonts.adoc
index 19fc121..ecde050 100644
--- a/docs/modules/ROOT/pages/add-fonts.adoc
+++ b/docs/modules/ROOT/pages/add-fonts.adoc
@@ -43,6 +43,14 @@ Here are the steps involved.
 The Gulp build recognizes the `~` URL prefix and copies the font from the npm package to the build folder (and hence bundle).
 
 . Repeat the previous step for each font style and weight you want to use from that package.
+
+. Add all `typeface-XXXX.css` files you have created as `@import` rules to the `site.css` file like this:
++
+[source,css]
+----
+@import "typeface-open-sans.css";
+----
+
 . Change the CSS to use your newly imported font:
 +
 [source,css]
@@ -51,6 +59,10 @@ html {
   font-family: "Open Sans", sans;
 }
 ----
++
+If you are creating your UI by modifying the Default UI (this project), define your fonts in the `vars.css` file.
+Look for the `/* fonts */` section.
+
 
 . Test the new font by previewing your UI: