> ## Documentation Index
> Fetch the complete documentation index at: https://help.standards.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Fonts

## 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 `Upload` button 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.

<Steps>
  <Step title="Select font file">
    From the **Files** tab in the right sidebar to open the file detail panel
  </Step>

  <Step title="Edit font data">
    Fromt he font file detail panel, edit or change the font data from the family and subfamily settings groups
  </Step>
</Steps>

### 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:

<Steps>
  <Step title="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.
  </Step>

  <Step title="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)
  </Step>

  <Step title="Test the change">
    Now, select text that uses that font family, highlight a word, and select the bold option from the contextual toolbar.
  </Step>
</Steps>

## Google fonts

Google fonts are open source and may be freely used anywhere on the web, including Standards. However, Google fonts must first be downloaded locally as a supported font file format, then uploaded directly to Standards.

## Adobe fonts (and other services)

Currently we do not support online type activation services such as Adobe Fonts. Standards requires the reading of font metrics to allow for precise text alignment and control, which means uploading your font files. With most branding projects, your client will be required to purchase a font license regardless, so if using Adobe Fonts or a similar service, we recommend purchasing licenses and uploading the font files.