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 Variable	Type	Description
`$sprk-using-webfonts`	boolean	Informs Spark that webfonts will be applied. Note: Change default setting from `false` to `true` to use Spark webfonts.
`$sprk-font-display`	(Optional) string	Controls 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 `swap`ped in. Information on the `font-display` property and values are found here.
`$sprk-webfonts`	Sass List	Expects 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.