Editing Fonts

  • Updated

In the Fonts section of the same window, you can select the font from the drop-down menu. The selected font will be used for all text in the application.

Select a font dialog

Embedding a New Font

Gro has the capability to use the Google APIs static website for fonts.

  1. Navigate to https://fonts.google.com to choose from Google’s large selection of available fonts.

  2. Separately, navigate to the Type ID webapp.fonts in the advanced configuration and add a new subset of configuration for the additional font your financial institution would like to use.

  3. Copy the configuration below and paste it between any current subsets found in the Type ID.

    {
        "name": "",
        "url": "",
        "style": ""},
    Embedding a font using advanced configuration

  4. From within fonts.google.com, select a font to view all available styles for that font, and then select + Select this style.

  5. In the upper right corner, select the icon to View your selected families.

  6. In the Use on the web section of the resulting dialog, select <link>, and then copy the link following the href tag (highlight it and use Command/Ctrl+C).

  7. Paste this link into the fonts configuration found in the Type ID client.webapp.fonts. For example:

    "url": "https://fonts.googleapis.com/css2?family=Roboto&family=

    Rubik:wght@300&display=swap

  8. Still in the Use on the web section of the Google Fonts dialog, also copy the font-family name after the “:” as seen below highlighted in blue:

    Applying a font using CSS

  9. Paste this value into the fonts configuration found in the Type ID webapp.fonts between the two double quotes for the style key.

  10. Enter the font name between the two double quotes for the name key.

    Editing font configuration

  11. After selecting Save, the new font will be available in the drop-down menu available by selecting Edit Configuration > Styles > Font Family.

  12. Select SaveChanges.

IN THIS ARTICLE