Configure Custom Fonts for use in a Vinyl App¶

This article steps you through how to configure custom fonts for use in a Vinyl app. In the scenario where you want to use a specific font type that is not available through Google Fonts, Vinyl supports the ability to work with a custom font type.

See the Configure Google Fonts for use in Vinyl article for information on configuring Google Fonts.

Use Case¶

Companies often have a specific font type declared as part of their brand guidelines, and that font may not be available on Google Fonts. In this scenario, Vinyl supports the ability to load the font files as part of a Widget and reference them in a CSS file using the @font-face functionality.

Configure Custom Fonts¶

1. Follow the steps outlined in the CSS Loader article in order to retrieve the CSS Loader.zip folder
2. Extract the .zip folder contents

3. Copy the custom font files you will use for your Vinyl app into the CSS Loader top directory

   • For example: SuisseIntl-Regular.otf, SuisseIntl-Light.otf, SuisseIntl-Bold.otf, SuisseIntl-SemiBold.otf

4. Use a code editor program, like Visual Studio Code, to open the styles.css file for editing

5. Configure the following information in the styles.css file to specify information for the desired custom font using the @font-face rule:

   • The regular font-weight must be specified first within the styles.css file. See the example syntax below.
   • The font-weight values must be in the number format (e.g. 300, 400, 500, 600, etc.). Using lighter, normal, bold, bolder won't work for multiple weights.
   • The font-weight values (e.g. 300, 400, 500, 600, etc.) you set for each font file will be the font-weight values you use in Themes to change the weight and can only exist once per weight (e.g. you can't have 2 font files set with the same font-weight value)

   Styles.css Syntax Example

   /* Suisse Font */
   
   @font-face {
       font-family: "SuisseIntl";
       src: url("SuisseIntl-Regular.otf") format("opentype");
       font-weight: 400;
       font-style: normal;
   }
   @font-face {
       font-family: "SuisseIntl";
       src: url("SuisseIntl-Bold.otf") format("opentype");
       font-weight: 600;
       font-style: normal;
   }
   @font-face {
       font-family: "SuisseIntl";
       src: url("SuisseIntl-SemiBold.otf") format("opentype");
       font-weight: 500;
       font-style: normal;
   }
   @font-face {
       font-family: "SuisseIntl";
       src: url("SuisseIntl-Light.otf") format("opentype");
       font-weight: 300;
       font-style: normal;
   }
   

6. Save all changes to the styles.css file

7. Follow the steps outlined in the CSS Loader to upload the CSS Loader widget to a Collection your app is using
8. Follow the steps outlined to add the CSS Loader as a Site Widget

9. Lastly, you need to configure your app Theme to specify the custom font

   • Navigate to your app Theme
   • Add a Style targeting the Site area, select Font as the Style Type, and set the Name value to the custom font name. For example: "SuisseIntl"