Fonts in the Design System Studio

Fonts determine the visual appearance of text within a Skuid page. And while the term “font” is typically used as shorthand for a style of text and all its variations, these collections of fonts that make up the bold, italicized, underlined, and different weights of a style are stored in a collection known as a font family.

Skuid design systems typically have one default font family, and additional fonts are not available to use within a design system’s component style variants until they are specifically added as a font family.

Adding a font family

To add a new font family in the Design System Studio:

  1. Click Design Systems.
  2. Navigate to the design system you wish to update.
  3. Click Typography.
  4. Click Add beside the Font Family header.
  5. Select the font you wish to use. The font family name updates to reflect the chosen font.


Newly created font families are not available for use within Skuid pages until they are used within a style variant. Update style variants accordingly.

Fallback fonts

When using a Google font, Typekit font, or custom font the Fallback font panel appears, containing the standard web safe fonts. If the primary font fails to load for any reason, the selected fallback font displays instead.

Google Fonts

Font families from Google Fonts can be added to your design system. While only a few display within the font list initially, searching also queries all available Google fonts.

To add a Google font family:

  1. Search for the Google font family by name in the search search box.
  2. Click the appropriate font.

Typekit ID


Make sure to enable the proper domains within the kit. This would include your Skuid site domain or Salesforce domain depending on your platform of choice.

  1. Navigate to the Typography section of the design system.
  2. Click the font family you wish to update, or add a new one.
  3. Click the dots-vertical More Options icon.
  4. Click link Link Typekit ID.
  5. Enter the appropriate Typekit ID.
  6. Click Save.

The font is now available under the Typekit Fonts header in the font list.

Custom fonts

In addition to standard web safe fonts, as well as font families from Google Fonts and Typekit, it’s possible to create a reference to a custom, uploaded font file stored within the current Skuid environment.


It is not currently possible to upload a full font family. Instead, you must upload individual custom fonts within the design system.

To begin managing custom fonts:

  1. Navigate to the Typography section of the design system.
  2. Click the font family you wish to update, or add a new one.
  3. Click dots-vertical More Options.
  4. Click add Manage Custom Fonts.

This opens the custom fonts modal, where currently added fonts are listed with options to Edit or Remove each reference.

To add a new custom font reference:

  1. Within the custom font modal, click Add.

  2. Enter the font information:

  3. Click Save.

After adding a font reference, you must close the modal and save the design system. Fonts are not saved until the design system itself is saved.


If your custom font does not load initially after adding, save and refresh the Design System Studio.

Adding additional font files

It is possible to add additional font files for each custom font. This can be used to ensure maximum browser compatibility, loading multiple file types in case there are issues displaying another.

This feature is not intended for adding complete font families.

For a more technical explanation, when multiple font files are added for a single font, the @font-face rule Skuid produces contains URLs for all added files.

As an example, if a font named MyFont has a WOFF2 file and a TTF file added as references, its @font-face rule would look similar to this:

@font-face {
    font-family: MyFont;
    src: url(,url(

Supported file types

Only the following font file types are supported:

  • woff
  • woff2
  • otf
  • ttf

Uploading a custom font file to your Skuid environment

To utilize custom font files, you’ll need to:

  • Upload the font file to your Skuid environment
  • Retrieve the URL of the uploaded font file
  • Add the custom font reference to the Manage Custom Fonts modal

Upload the font file to your Skuid environment

  1. Navigate to Settings > Files.
  2. Click Upload.
  3. Select the font file.

After confirming your selection, the font file will be uploaded to the site.

Retrieve the URL of the uploaded font file

From the Files screen:

  1. Click the dots-vertical More Options icon beside the previously uploaded font file.

  2. Copy the URL of the file from the Preview action or the link provided in the Download action’s modal. It will look similar to:

Add the custom font reference to the Manage Custom Fonts modal

With the proper URL in hand, add the font reference:

  1. Return to your design system in the Design System Studio.

  2. Open the Manage custom fonts modal.

  3. Click Add.

  4. Enter the font’s information:

    1. Font name: An easily referenced name for the custom font
    2. Font URL: The URL of the uploaded font file, in the provided example this would be