Basics
Standards offers a small catalog of fonts available to choose from out of the box, as well as the ability to upload custom fonts for your specific brand.Supported font formats
- .woff (preferred)
- .woff2 (preferred)
- .otf
- .ttf
Uploading fonts
There are various ways to upload font files, and all of these methods can be utilized to best fit your workflow:- Upload fonts during setup to create styles to use in your guideline based on an outline
- Upload fonts by simply dragging and dropping the font files into the editor of the project
- Select the Files tab then the
Uploadbutton to select font files to upload - Within the text settings group, add font files from the family or weight dropdown
Font data
Uploaded font files typically have correct font data by default, but sometimes there are errors that need correcting. Font data enables browsers to correctly display the font on the web. View and edit font data by selecting the font file from the Files tab in the right sidebar to open the file detail panel.Example of correct font data
| Setting | Value | Description |
|---|---|---|
| Family | Helvetica | This is the font grouping |
| Subfamily | Bold | This is the font weight shown in the weight dropdown and sometimes used in text decoration |
| Weight | 600 (Bold) | This is the weight the browser uses |
| Style | Oblique | This is where font styling like italics or oblique are set |
Example of incorrect font data
| Setting | Value | Description |
|---|---|---|
| Family | HelveticaBoldObliq | Error: File name being used as family |
| Subfamily | None | Error: Font subfamily must be set |
| Weight | 300 (Normal) | Error: Weight will most likely not match the actual weight |
| Style | None | Error: Needs to be set if font is italic or oblique |
Using a different weight for bold text decoration
Sometimes it’s desirable for the ‘bold’ text decoration applied to certain words in a block of text to use a different weight than the font’s bold. For example, heavy or medium may be a better fit. This can be achieved by editing the font data:Select the font file
From the Files tab select the font file with the weight you would like to display as bold when used as text decoration.
Edit the font data
From the file detail panel, under Subfamily, change the weight from the dropdown to Bold (even if the font is medium or extrabold, or another weight)