Font-face style rule

Defines 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> [, <source_file>]...';'
    [font-weight ':' <weight> ';']
    [font-style ':' <style> ';']
    [font-stretch ':' <separation> ';']
‘}’

View  Design System 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.

Samples 

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.
Syntax conventions