Add fonts

This procedure shows you how to install fonts and make them available for applications in your customization project.

Steps

1. Install the fonts in your customization directory.
   1. In your customization-project-dir/resources directory, create the "fonts" directory if it does not exist.
   2. Install the font in your customization-project-dir/resources/fonts directory
2. In your customization-project-dir/sass directory, create a file called MyFonts.scss and add the following code:

   // in the MyFonts.scss 
   @font-face {
     font-family: AmazonEmberReg;
     src: url("$$RES/fonts/AmazonEmber_W_Rg.woff2") format('woff2'),
          url("$$RES/fonts/AmazonEmber_W_Rg.woff") format('woff'),
          url("$$RES/fonts/AmazonEmber_Rg.ttf") format('truetype');
   }

   Where:

   • The @font-face rule is added to the style sheet.
   • The font-family specifies the font family — a collection of fonts. The font family is "AmazonEmberReg" in the example.
   • The src gives the URL for three different file formats of the font, using $$RES to specify the path in your customization-project-dir/resources/fonts directory

     A font can be defined in several formats, but as Web Open Font Format (WOFF2 and WOFF) and TrueType Fonts (TTF) are supported by most modern browsers, typically, you only need to install these formats. Therefore, in the example, the URLs are referencing those formats of the AmazonEmber font installed in the customization-project-dir/resources/fonts directory.

3. Open the customization-project-dir/sass/customization.scss file and add the following import statement:

   @import "MyFonts";

   In this example we import the MyFonts style.

4. Save your changes and rebuild your customization using gbc build:

   $ gbc build --customization customization-project-dir

   Your new fonts are added to the default ones in the customization-project-dir/resources/fonts directory.
5. Test that your changes work as expected.

   There are different ways to use the new font in your project:

   • Typically, you set the font within your 4st file, by specifying a style attribute for the elements you want to use the font. In your 4st file, you add the style definition like this:

     <StyleList>
       <Style name="Label">
         <StyleAttribute name="fontFamily" value="AmazonEmberReg" />
       </Style>
     </StyleList>

     This change applies the font to all labels in the application. For more information on using presentation styles, refer to the Presentation styles pages in Genero Business Development Language User Guide.

   • In a case where there is no widget in Genero representing an element, you can reference the DOM node by its CSS selector.

     Tip:

     If you are not sure which node to reference, use browser developer tools (press the F12 key) to identify the node.

     For example, if you want to apply the font to the chromebar, you need to reference the gbc_chromeBarContainer class selector. To set the font, add code directly in the scss file using the CSS selector. In this example, the code is added below the @font-face definition in your MyFonts.scss file:

     // in the MyFonts.scss 
     @font-face {
       font-family: AmazonEmberReg;
       src: url("$$RES/fonts/AmazonEmber_W_Rg.woff2") format('woff2'),
            url("$$RES/fonts/AmazonEmber_W_Rg.woff") format('woff'),
            url("$$RES/fonts/AmazonEmber_Rg.ttf") format('truetype');
     }
     .gbc_chromeBarContainer { 
        font-family: "AmazonEmberReg", sans-serif
     }

     This code applies the font to the chromebar only.

   View the changes by running an application that uses the fonts.

   Tip:

   You may need to use CTRL + F5 to clear the browser cache before you see your changes.