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 (file)
--- 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: