Change TYPO3 Bootstrap Package Google Webfonts

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!

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.

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.

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

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

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

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

Adjusting the fonts in the Bootstrap Package for TYPO3 is not really rocket science. A few lines of TypoScript and the whole thing is running. Of course, this approach is not suitable for all projects and sometimes a more specific solution might be required. But anyone looking for a quick solution to easily redesign the bootstrap package is well advised.

Questions about the article or TYPO3 in general?
TYPO3-Freelancer Simon Köhler