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:
- Click Design Systems.
- Navigate to the design system you wish to update.
- Click Typography.
- Click Add beside the Font Family header.
- 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:
- Search for the Google font family by name in the search box.
- 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.
- Navigate to the Typography section of the design system.
- Click the font family you wish to update, or add a new one.
- Click the More Options icon.
- Click Link Typekit ID.
- Enter the appropriate Typekit ID.
- 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.
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:
- Navigate to the Typography section of the design system.
- Click the font family you wish to update, or add a new one.
- Click More Options.
- Click 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:
Within the custom font modal, click Add.
Enter the font information:
Font name: The name to reference the font by, such as Helvetica.
Font URL: The URL to query for the font.
- For each additional font file you wish to reference, click Add
Note
To find the proper URL for the font file, see the Uploading a custom font file to your Skuid environment section below.
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(https://example.skuidsite.com/static/files/1617246442749/MyFont.woff2),url(https://example.skuidsite.com/static/files/1617246442749/MyFont.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¶
- Navigate to Settings > Files.
- Click Upload.
- 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:
Click the
More Options icon beside the previously uploaded font file.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:
https://example.skuidsite.com/static/files/1617246442749/font-name.woff2
Add the custom font reference to the Manage Custom Fonts modal¶
With the proper URL in hand, add the font reference:
Return to your design system in the Design System Studio.
Open the Manage custom fonts modal.
Click Add.
Enter the font’s information:
- Font name: An easily referenced name for the custom font
- Font URL: The URL of the uploaded font file, in the provided example this would be
https://example.skuidsite.com/static/files/1617246442749/font-name.woff2