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:
# 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.
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.
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:
- Define font names and styles in constants
- Adjust Google Font URL in the setup to load 2 fonts simultaneously
# 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
# 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
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.
plugin.bootstrap_package.settings.scss.headings-font-weight = 700