How To¶

Webfonts backend module¶

The Webfonts backend module is an comfortable way to install fonts. I is very useful during development to quickly test another font.

TypoScript¶

It is also possible to use TypoScript to install webfonts. The extension will install the font automatically.

Google Fonts¶

plugin.tx_webfonts.settings {
  fonts {
    advent-pro {
      id=advent-pro
      provider=google_webfonts
      variants=regular,700
      charsets=latin,greek
    }
  }
}

Tip

Behind the scenes the app consumes the google-webfonts-helper API. You can browse all the fonts, variants and charsets available.

Fontawesome¶

plugin.tx_webfonts.settings {
  fonts {
    20 {
      id=fontawesome
      provider=fontawesome
      version=6.4.0
      methods=css
      styles=all
      minified=true
    }
  }
}

The parameters are derived from Fontawesome Documentation

methods (comma-separated list):

css (default) read more
js read more

styles (comma-separated list):

List of Fontawesome styles Choose all (default) or mix off: brands, fontawesome, regular, solid

Hint

Technically you can use both methods to install webfonts. However, I recommend using the TypoScript method since it is easier to reuse and publish in distribution packages.