Font-face style rule

Official Content
This documentation is valid for:

Allows defining a font family other than the default ones and using it in both the Tokens and Styles of the Design System Object.

Syntax

@font-face 
‘{‘
    font-family: font_family_name ;
    src: source_file [, souce_file]... ;
    [font-weight: weight ;]
    [font-style: style ;]
    [font-stretch: separation ;]
‘}’

View Syntax conventions.

Where:

font_family_name: Indicates the name of the font you are defining.

source_file: Indicates the source file of the font, which can be a URL or a reference to a file object (through the gx-file function).

weight: Defines how bold the font is. Options: normal, bold, 100, 200, …, 900

style: Defines the font style. Options: normal, italic, oblique.

separation: Defines the font spacing. Options: normal, condensed, ultra-condensed, extra-condensed, semi-condensed, expanded, semi-expanded, extra-expanded, ultra-expanded.

Example: 

Styles myStyle
{
       @font-face
       {
             font-family: AbhayaLibre-Bold;
             src: gx-file(AbhayaLibre-Bold-ttf)
       }
       .H1
       {
             color: #FFFFFF;
             font-family: AbhayaLibre-Bold;
             font-size: 95px;
       }
       .H2
       {
             color: $colors.OnSurface;
             font-family: $fonts.Title1;
             font-size: $fontSizes.H2;
       }
}

Tokens MyTokens
{
       #colors
       {
              OnSurface: #191819;
       }
       #fonts
       {
              Title1: AbhayaLibre-Bold;
       }
       #fontSizes
       {
               H2: 60px;
       }

}

Availability

Since GeneXus 17 Upgrade 6.

See Also

See the general topic Design System Style Rules.