From b38cdef4d4a6364e5fe971ee534ba9ed82888469 Mon Sep 17 00:00:00 2001 From: Dan Allen Date: Sun, 17 May 2020 03:40:06 -0600 Subject: [PATCH] revise additional steps for adding new font; add to manual section too --- docs/modules/ROOT/pages/add-fonts.adoc | 29 +++++++++++++++++++---------- 1 file changed, 19 insertions(+), 10 deletions(-) diff --git a/docs/modules/ROOT/pages/add-fonts.adoc b/docs/modules/ROOT/pages/add-fonts.adoc index ecde050..e4d2848 100644 --- a/docs/modules/ROOT/pages/add-fonts.adoc +++ b/docs/modules/ROOT/pages/add-fonts.adoc @@ -3,12 +3,11 @@ This page explains how to add new fonts to your UI. These instructions assume you've forked the default UI and are able to customize it. -There are two steps involved: +There are three steps involved: . Add the font to your UI project . Add a font-face declaration to your stylesheet - -You can then reference the font family in your stylesheet. +. Use the new font in your stylesheet How you reference the font file in the font-face declaration depends on how you decide to manage it. You can manage the font with npm or download it manually and add it directly to your UI project. @@ -41,16 +40,17 @@ 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). ++ +You must define one @font-face for each font weight and style combination (e.g., `font-weight: 500` + `font-style: italic`) from the font that you want to use in your stylesheet. -. 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: +. Import the typeface CSS file you just created into the main stylesheet, [.path]_src/css/site.css_ (adjacent to the other typeface imports): + [source,css] ---- @import "typeface-open-sans.css"; ---- +. Repeat the previous steps for each font style and weight you want to use from that package. . Change the CSS to use your newly imported font: + [source,css] @@ -60,9 +60,7 @@ html { } ---- + -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. - +TIP: If you're building on the default UI, you may instead want to define or update the font family using a variable defined in [.path]_src/css/vars.css_. . Test the new font by previewing your UI: @@ -95,8 +93,17 @@ Create this folder if it does not exist. ---- + Note that the path is a relative path starting from the [.path]_src/css_ folder to the [.path]_src/font_ folder. ++ +You must define one @font-face for each font weight and style combination (e.g., `font-weight: 500` + `font-style: italic`) from the font that you want to use in your stylesheet. + +. Import the typeface CSS file you just created into the main stylesheet, [.path]_src/css/site.css_ (adjacent to the other typeface imports): ++ +[source,css] +---- +@import "typeface-open-sans.css"; +---- -. Repeat the previous step for each font style and weight you want to use. +. Repeat the previous steps for each font style and weight you want to use. . Change the CSS to use your newly imported font: + [source,css] @@ -105,6 +112,8 @@ html { font-family: "Open Sans", sans; } ---- ++ +TIP: If you're building on the default UI, you may instead want to define or update the font family using a variable defined in [.path]_src/css/vars.css_. . Test the new font by previewing your UI: -- 2.11.0