Skip to Content

Configure Google Fonts for use in Vinyl

This guide will step you through how to use Google Fonts in a Vinyl application. If you are looking to specify different weights for the Google Fonts your application will use, there may be additional configuration required to achieve the desired result. To leverage different Google Font weights from Vinyl you need to update the import code to include a "0," before each weight specified in the Goolge API syntax when configuring the Site Widget Parameters.

There are two main areas that need to be configured, the first involves configuring a Site Widget. After that is configured, you'll need to modify your app Theme in order to leverage the font selected through the Application Layer UI/UX.

Configure a Site Widget to Connect to Google Fonts

  1. Navigate to the IDE > Additional Settings
  2. Click on Site Widgets
  3. Click + Widget Registration under Site Widgets
  4. Click the drop down menu for the Widget column, and select Web Font Loader
  5. Click the checkmark icon to save
  6. Click + Parameter under Site Widget Parameters
  7. Select WebFontName as the Parameter value

  8. Enter the Google Font API information for the named Google Font you wish to use in the Value field. This step is where you modify the provided Google API syntax to include a 0, before the specified weights. For example:

    • Google Font syntax: Lato:wght@100;300;400;700&display=swap"
    • Modified syntax to enter into Value field: Lato:wght@0,100;300;400;700&display=swap"

  9. Click Save

sitewidget.png

Example Web Font Loader widget to specify Google Font

Modify your Theme to Specify Font Value

  1. Navigate to App Workbench > Look & Feel
  2. Locate your app Theme Collection and click into the corresponding app Theme
  3. Click the Theme's Open Record icon to expand the Theme information
  4. Select the Page Component and click + Style under Styles
  5. Select the Container Page as the Area
  6. Select Font as the Style Type
  7. Select All States as the State
  8. Specify the Value 1 Font Family information to provide information on the Google font you wish to use. For example: Lato, sans-serif
  9. Enter a Technical Help description
  10. Click + Style under Styles
  11. Select the Container Site as the Area
  12. Select Font as the Style Type
  13. Specify the Value 1 Font Family to match step 8. For example: Lato, sans-serif
  14. Click Save

fontstyles.png

Example Styles configured to specify Google Font type

After completing the steps described above check to ensure that your Theme is associated with your App. Assuming that it is, you can now navigate to view your application, refresh the web browser, and see the new font.

Additional Resources