How to change Google Fonts for the TYPO3 Bootstrap Package

The TYPO3 extension "bootstrap_package" offers a complete and proven website theme for the TYPO3 CMS. Almost 50,000 downloads in the official TYPO3-Extension-Repository show the success. By default there are 8 preset Google fonts to choose from in the TYPO3 backend. These can be conveniently set using the constant editor. But what if you want to use other fonts? How can you use different fonts for headlines and body texts? You'll find out here!

The standard fonts of the bootstrap package

If you only use the standard configuration, the selected font is applied to all texts. That looks really good with fonts that work for both purposes, such as Source Sans Pro. However, if you want your own font for the headlines and another font for the body texts, you have to make some settings. These are now shown in detail.

Method 1: Replacing the default font family

The easiest way to include a different font is as follows: We overwrite a few values in the constants and in the TypoScript setup of the website's root template.

Overwrite constants

In the constants of the website's root template, the settings for the Google Font Loader can simply be overwritten manually:

# TypoScript CONSTANTS
page.theme.googleFont.weight = 400			# Standard 300,400,700
page.theme.googleFont.font = Staatliches	# Standard Source Sans Pro

Note: These constant settings must be made manually in the constant field of the template editor. The "constant editor" only offers predefined values for the font family.

Overwrite the setup

Then the value of the TypoScript variable page.includeCSSLibs.googlewebfont is overwritten with the URL of any Google web font.

# TypoScript SETUP
page.includeCSSLibs.googlewebfont = https://fonts.googleapis.com/css?family=Staatliches

In this simple example, ALL fonts are replaced by "Staatliches", which should then look like the screenshot below.

Method 2: Different fonts for headlines and body texts

If you want to use different Google fonts for headlines and body texts, you have to adjust the SASS variables and load several fonts. The following steps are necessary:

  1. Define font names and styles in constants
  2. Adjust Google Font URL in the setup to load 2 fonts simultaneously

Constants

# Define global Theme-Font 
page.theme.googleFont.weight = 400
page.theme.googleFont.font = Open Sans

# Overwrite SASS-Variables to adjust headings font family and style
plugin.bootstrap_package.settings.scss.headings-font-family = Staatliches
plugin.bootstrap_package.settings.scss.headings-font-weight = 400

Setup

# Load both fonts from Google Fonts at the same time
page.includeCSSLibs.googlewebfont = https://fonts.googleapis.com/css2?family=Open+Sans&family=Staatliches&display=swap

Just bold headlines? No problem!

Sometimes a little intervention is enough to achieve a desired effect. If you e.g. only want to display the headlines in a bold font style, this is really easy. No extra CSS is necessary, just a single setting in the constants and you're fine. This tells the theme to make the font style bold for all headings:

The value can now be changed either in the constant editor or directly in the constant input field. A common value for bold characters is 700 or 600.

Entry in the constant field

plugin.bootstrap_package.settings.scss.headings-font-weight = 700

Comments

No Comments

Write comment

* These fields are required