Nice, Informative website.

Change TYPO3 Bootstrap Package Google Webfonts
Share it: facebook | Twitter | LinkedIn
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 in 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.
![[Translate to English:] Bootstrap Standard mit Source Sans Pro Schrift](/fileadmin/_processed_/9/1/csm_bootstrap-package-default_007f880ffb.png)
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
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
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:
- Define font names and styles in constants
- 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
Result: Bold font for headlines, open sans for the rest

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
Screenshot: Only make headlines bolder

Conclusion: This was pretty easy!
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


Write comment
Comments
Share it: facebook | Twitter | LinkedIn