Fonts
Last updated
Last updated
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.
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.
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.
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.
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!
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.
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.
The contents of the field font-type text (1) or font-type headline should now look like this:
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.
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.
