Skip to Main Content

Designs launchingafterJuly 14, 2021, please referencethe latest release of Spark.

Installing Spark

Getting Started with Spark Fonts

As part of Spark, our design system includes functionality for applying web fonts. It allows you to configure your font setup using Sass variables which will be included in the Spark CSS bundle when you build your site.

Configuring Sass Variables

There are unique Sass variables that allow you to configure Spark fonts for your build. Refer to the descriptions to learn what they are.

Note: They must be set in your Sass before importing Spark.

Sass VariableTypeDescription
$sprk-using-webfontsbooleanInforms Spark that webfonts will be applied. Note: Change default setting from false to true to use Spark webfonts.
$sprk-font-display(Optional) stringControls behavior of the text while fonts are being loaded. Note: Default value is swap which will cause text to render using a fallback font until the custom font is available. Correct font is swapped in. Information on the font-display property and values are found here.
$sprk-webfontsSass ListExpects a Sass List containing one or more nested Sass Lists. Note: The nested lists should contain the font’s URL, name and weight. It does require a series of font declarations.

A full valid $sprk-webfonts object example looks something like this:

$sprk-using-webfonts: true;
$sprk-webfonts:
(
  (
    url('https://www.example.com/MyFont-Bold.woff2') format('woff2'),
    url('https://www.example.com/MyFont-Bold.woff') format('woff')
  ),
  MyFont, 700
),
(
  (
    url('https://www.example.com/MyFont-Medium.woff2') format('woff2'),
    url('https://www.example.com/MyFont-Medium.woff') format('woff')
  ),
  MyFont, 500
),
(
  (
    url('https://www.example.com/MyFont-Regular.woff2') format('woff2'),
    url('https://www.example.com/MyFont-Regular.woff') format('woff')
  ),
  MyFont, 400
),
(
  (
    url('https://www.example.com/MyFont-Light.woff2') format('woff2'),
    url('https://www.example.com/MyFont-Light.woff') format('woff')
  ),
  MyFont, 300
);

Additional Examples

Check out these completed font setup examples supported by Spark to learn more:

Internal users can access a directory of our CDN resources by clicking this link.

Troubleshooting

  • Rocket products must include the font name, RocketSans. Remove all references of MyFont.
  • Include all four font weights - 300, 400, 500, and 700 - within your build for the fonts to work properly.