Change TYPO3 Bootstrap Package Google Webfonts


Share it: facebookTwitter | 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.


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

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

Finger pointing at you!

WE WANT YOU!

Your are a web design expert and you like writing articles?

JOIN US


Write comment

* These fields are required

Comments

No Comments


Share it: facebookTwitter | LinkedIn
100% anonymous web host