Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


How do I use fonts in Design System Manager (DSM)?

Follow

In the Design System Manager (DSM) web view, there is a Fonts section that contains all the fonts associated with your library's text styles.

dsm-fonts-section.png

For fonts to appear in the Fonts section, you must first add text styles to your DSM library via the DSM tool for Sketch. To learn more about how to add text styles to your library, read the section "Adding and applying text styles" in this article: Adding and Applying Library Elements

Accessing the Fonts section

Currently, you can only view the Fonts section from the DSM web view. You cannot access your fonts from the DSM tool in Sketch.

To access the Fonts section in your DSM library:

  1. Navigate to the DSM web view and, on the left-hand side, click Libraries.
  2. Click the library you want to open.
  3. On the left-hand side, click the Fonts section.
accessing-dsm-fonts-section.gif

Viewing fonts

Once in the Fonts section, click any font to view Font styles and General info. If wanted, you can also add a description.

viewing-fonts-dsm.gif

Editing and removing fonts

As previously mentioned, it's not possible to add fonts directly from the DSM web view. However, you can edit or remove existing fonts. To do so, navigate to the Fonts section. Hover over the desired font and click the ••• (more) icon. You should notice three options:

  • Define fallback fonts
  • Change font family
  • Remove font family
While it's possible to edit or remove individual fonts, you cannot remove or rename the Fonts section in the DSM web view.

Define fallback fonts

Defining a fallback font can be helpful if your design system contains a font that is often not supported by web browsers. If your original font won't render, your fallback font appears instead.

To define a fallback font:

  1. In the DSM web view, open your desired library.
  2. In the left-hand column, click Fonts.
  3. Hover over the desired font and click the ••• (more) icon.
  4. Click Define fallback fonts.
  5. Type the name of the font that you prefer as a fallback.
  6. Click Save.
set-fallback-font.gif

Change font family

When accessing your library via the DSM web view, you may notice that the original fonts fail to display. This can occur if the text styles were added to the library via the DSM tool in Sketch but the viewer does not have those particular fonts installed locally on their computer.

You can fix this by changing the font family in the DSM web view. To learn more, check out this article: Why aren't my fonts displaying correctly in my DSM library?

Remove font family 

At any time, you can remove a font family from the Fonts section:

  1. In the DSM web view, open your desired library.
  2. In the left-hand column, click Fonts.
  3. Hover over the desired font and click the ••• (more) icon.
  4. Click Remove font family.
  5. To confirm, click Delete.
dsm-remove-font-family.gif

Was this article helpful?

Still have a question?

Contact Us