Fonts

Fonts can be used locally via the theme fonts or externally via the custom fonts integrated by Google Fonts. In addition, we have a guide on how to host fonts yourself.

Custom fonts

All 1000+ Google Fonts fonts are available to you via the theme. You can define separate fonts for body text and headlines or the same font.

If you want to use the same font for headlines and body text, enter the same font name in both fields. The font styles will be added together if they differ in the fields.

1. Search a font

To use a font from Google Fonts, just find one font family each for body text (font Text) and a font family for headings (headline font) - in this example we want to use Roboto Condensed as font for texts.

2. Select font styles

After selecting the font, you can view the font styles that the font provides. In this example, 'Roboto Condensed' offers all possible font styles from Light 300 to Bold 900 because it is a font.

3. Select font

After clicking on Get embed code you will be taken to the page with the embed codes. Here we are only interested in the technical name of the font. So make a note of the name of the font family. 'Roboto Condensed', sans-serif

font-family: and the semicolon are omitted.

You don't have to make an actual selection of font styles here - that happens only in the theme!

4. Deposit font family in the theme

Now enter the name of the font in the Font-type text (1) or, for headings, in the Font-type headline field. Keep the generic font family in case the font unexpectedly fails to load.

What are generic font families

Generic font families serve as a fallback mechanism, a means of preserving something of the stylesheet author's intent in the event that none of the specified fonts are available.

Example

Generic font	Description
serif	Characters have terminating strokes, flared or pointed ends, or serifed ends.
sans-serif	Characters have straight stroke ends.
monospace	Alle Zeichen sind gleich breit.
cursive	Characters in cursive fonts usually have connecting strokes or other cursive characteristics beyond those of cursive lettering. The characters are partially or fully connected and the result is more like handwriting than printed letters.
fantasy	Fantasy fonts are predominantly decorative fonts that contain playful representations of characters.

The contents of the field font-type text (1) or font-type headline should now look like this:

'Roboto Condensed', sans-serif

Select the font weights (font styles) in the Font weights text (2) or for headings in the Font weights headline field. You can only use the font weights that the font provides.

Make sure the option Load fonts from Google (3) is active.

To avoid unnecessary loading times, select only the font weights that you really want to use. Often, special font weights can be selected for individual elements in the configuration. If font styles are retrieved that the font does not deliver, browsers use the approximatuin method.

Theme fonts

Besides embedding external or self-hosted fonts, the theme offers a selection of built-in fonts. These fonts are shipped with the theme and are located on your server after installation. So you don't have to worry about privacy with theme fonts.

Theme fonts can be used just like the custom fonts for texts (1) and headings (2) can be set separately. The supplied font styles (3) are in square brackets after the font name.

It is also possible to use a theme font for e.g. body text and a custom font for the headlines. Note, however, that the externally-integrated custom font still connects to Google's servers, unless you have hosted the custom font yourself and set the option Load fonts from Google is disabled in the Custom fonts section.

As soon as a selection other than - Custom font - was selected, no more fonts will be loaded from Google servers. The setting Theme fonts overrides the Custom fonts setting.

Typography