Contents x
    Fonts in legacy DSM
    • 10 Jan 2023
    • 2 Minutes to read
    • Dark
      Light
    Contents

    Fonts in legacy DSM

    • Updated on 10 Jan 2023
    • 2 Minutes to read
    • Dark
      Light
    Article Summary

    This article applies specifically to legacy DSM. If you're using the new DSM, there is not a dedicated Fonts section of the design system. To learn more about adding and viewing text styles in the new DSM, check out our guide on developing your DSM documentation.

    On your DSM documentation site, there is a Fonts section that contains all the fonts associated with your library's text styles.

    A legacy DSM design system with the Fonts section displayed.

    For fonts to appear in the Fonts section, you must first add text styles to your legacy design system via the DSM Sketch plugin. To learn more about adding text styles to your design system, read the section "Adding and applying text styles" in this article: Building and using a legacy DSM design system

    Accessing the Fonts section

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

    To access the Fonts section of your design system:

    1. Sign in to the DSM web view and open your legacy design system.
    2. In the left-hand navigation, click the Fonts section.

    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.

    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 legacy design system.
    2. In the left-hand navigation, click Fonts.
    3. Hover over a 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.

    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. 

    Remove font family 

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

    1. In the DSM web view, open your legacy design system.
    2. In the left-hand navigation, click Fonts.
    3. Hover over a font and click the ••• (more) icon.
    4. Click Remove font family.
    5. To confirm, click Delete.

    Was this article helpful?
    What's Next