FontFace¶

FontFace element is a select element with available fonts:

example

<select name="fontFace">
    <option value="Archivo">Archivo</option>
    <option value="Fira Sans">Fira Sans</option>
    <option value="Inter">Inter</option>
    ...
</select>

The entire list of available fonts is in the 'Build-in Validators' section.

font-face

Build-in Validators¶

The element validates if the selected font is from the list:

Archivo
Fira Sans
Inter
Josefin Sans
Jost
Lato
Montserrat
Noto Sans
Open Sans
Oswald
Poppins
PT Sans
Quicksand
Raleway
Roboto
Source Sans Pro
Ubuntu
Work Sans
Abril Fatface
Cardo
Crimson Text
Libre Baskerville
Lora
Merriweather
Playfair Display
Roboto Slab
Roboto Serif
Sanchez
Roboto Mono
Space Mono

Available Validators¶

Element does not have available validators.

Relations Support¶

Element does not support relations between elements.

Configuration output schema¶

schema

{
  "<element_type>" : "fontFace",
  "<element_name>" : string,
  "<element_label>" : string,
  "<element_labelDescription>" : string,
  "<element_isRequired>" : bool,
  "<element_isHidden>" : bool,
  "<element_defaultValue>" : string
}

example

{
  "type" : "fontFace",
  "name" : "titleFontFace",
  "label" : "Select font",
  "labelDescription" : "Changes font of the text",
  "isRequired" : false,
  "isHidden" : false,
  "defaultValue" : "Archivo"
}

Element value¶

If value is filled: string. Value corresponds to one of the font names from the list in the Build-in Validators section.

usage in module TWIG

<p style="font-family:'{{ moduleConfig.titleFontFace }}';">Some text here</p>

html output

<p style="font-family:'Archivo';">Some text here</p>

Example of module¶

Twig¶

Twig

<h2 style="font-family:'{{ moduleConfig.titleFontFace }}';">{{ translate("Heading") }}</h2>

JSON configuration¶

JSON configuration

[
  {
    "label": "Typography",
    "state": "unfolded",
    "elements": [
      {
        "type": "fontFace",
        "name": "titleFontFace",
        "label": "Select font",
        "labelDescription": "Changes font of the text",
        "defaultValue": "Archivo"
      }
    ]
  }
]

JSON translations¶

JSON translations

{
  "module": {
    "pl_PL": {
      "Heading": "Nagłówek"
    },
    "en_US": {
      "Heading": "Heading"
    }
  },
  "schema": {
    "pl_PL": {
      "Typography": "Typografia",
      "Select font": "Wybierz czcionkę",
      "Changes font of the text": "Zmienia czcionkę tekstu"
    },
    "en_US": {
      "Typography": "Typography",
      "Select font": "Select font",
      "Changes font of the text": "Changes font of the text"
    }
  }
}