Add Fonts

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:

  1. Add the font to your UI project

  2. Add a font-face declaration to your stylesheet

You can then reference the font family 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. The following sections describe each approach in turn.

npm managed

You can use npm (or Yarn) to manage the font. This approach saves you from having to store the font file directly in your UI project. Here are the steps involved.

  1. Use npm (or Yarn) to install the font files from a package (e.g., typeface-open-sans)

    $ npm install --save typeface-open-sans
  2. In src/css, add a corresponding CSS file (e.g., typeface-open-sans.css)

  3. In that file, declare the font face:

    @font-face {
      font-family: "Open Sans";
      font-style: normal;
      font-weight: 400;
      src:
        local("Open Sans"),
        local("Open Sans-Regular"),
        url(~typeface-open-sans/files/open-sans-latin-400.woff) format("woff")
    }

    The Gulp build recognizes the ~ URL prefix and copies the font from the npm package to the build folder (and hence bundle).

  4. Repeat the previous step for each font style and weight you want to use from that package.

  5. Change the CSS to use your newly imported font:

    html {
      font-family: "Open Sans", sans;
    }
  6. Test the new font by previewing your UI:

    $ gulp preview

If you see the new font, you’ve now successfully added it to your UI. If you aren’t sure, look for the All fonts on page section in your browser’s developer tools to see whether the font was loaded.

Manual

A simpler approach to adding fonts is to store them directly in your project. Here are the steps involved.

  1. Download the font files and add them to the src/font folder. Create this folder if it does not exist.

  2. In src/css, add a corresponding CSS file (e.g., typeface-open-sans.css)

  3. In that file, declare the font face:

    @font-face {
      font-family: "Open Sans";
      font-style: normal;
      font-weight: 400;
      src:
        local("Open Sans"),
        local("Open Sans-Regular"),
        url(../font/open-sans-latin-400.woff) format("woff")
    }

    Note that the path is a relative path starting from the src/css folder to the src/font folder.

  4. Repeat the previous step for each font style and weight you want to use.

  5. Change the CSS to use your newly imported font:

    html {
      font-family: "Open Sans", sans;
    }
  6. Test the new font by previewing your UI:

    $ gulp preview

If you see the new font, you’ve now successfully added it to your UI. If you aren’t sure, look for the All fonts on page section in your browser’s developer tools to see whether the font was loaded.