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.

Note

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

Note

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 as a static resource in the current Salesforce org. This means you’ll need to upload each custom font as a static resource.

Note

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.

Note

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(/resource/1628516217000/MyFontWOFF2?), url(/resource/1628516179000/MyFontTTF?)
}

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 within Skuid SFX, you’ll need to:

  • Upload the font file as a static resource in your Salesforce org
  • Retrieve the relative URL of that static resource’s font file
  • Add the custom font reference to the Manage Custom Fonts modal

Upload the font file as a static resource in your Salesforce org

First, follow Salesforce’s documentation to upload a static resource in your org. The cache control setting for the static resource should not impact the font’s accessibility.

Retrieve the relative URL of that static resource’s font file

To retrieve the URL for your font file:

  1. Navigate to the static resource’s detail screen.

  2. Retrieve the static resource’s absolute URL from the View file link. It will look similar to:

    https://your-org-name--c.visualforce.com/resource/1617734228000/staticResourceName?

Because Skuid is deployed across multiple domains—Salesforce uses different domains for Lightning and Visualforce—you should not use this absolute URL. Skuid will not be able to find the font file from the absolute URL due to cross-domain issues.

Instead, make the URL relative by removing the scheme and domain, in the example above this means removing https://your-org-name--c.visualforce.com.

This results in a proper relative URL:

/resource/1617734228000/staticResourceName?

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 relative URL you created above, in the provided example this would be /resource/1617734228000/staticResourceName?