Integrate Google web fonts in TYPO3

If you want to use a font that most users do not have installed in their systems, you would have to upload the required font to the system and integrate it using CSS with @font-face. However, only fonts that are freely available may be used for this purpose. These must then be converted into different formats for the various browsers.

Google web fonts can be used for this purpose. In contrast to free fonts, these fonts usually have a character set with umlauts. To integrate a Google web font, the corresponding fonts must be downloaded, integrated into your own website and CSS must be used to specify where the fonts can be found.

The google-webfonts-helper tool can be used to create the web fonts.

Once you have opened the page, you can select the font you want to include on your website.

Under "1. Select charsets" you can now select the character sets with which the font is to be downloaded. In German-speaking countries, at least "latin" should be selected.

Under "2. Select styles" you can choose which font styles you want to be able to use on your website later.

Under "3. Copy CSS" you can copy the CSS code that needs to be integrated into your CSS file. At the bottom of the section there is the field "Customize folder prefix" where the path from the CSS to the fonts may need to be adjusted. For example, in the TYPO3 template (sample project) from jweiland.net, the path to the fonts is capitalized and is located next to the CSS directory, i.e. "../Fonts" must be entered in the "Customize folder prefix" field.

In the sample project, the CSS code must be entered in the file

typo3conf/ext/jwmusterprojekt11/Resources/Public/Css/style.css

file. At the very beginning.

The font files can now be downloaded under "4. Download files". The zip must be unpacked and the font files must be transferred to the fonts folder.

The fonts folder is located in the sample project under:

typo3conf/ext/jwmusterprojekt11/Resources/Public/Fonts/

All zip files must be transferred to this folder. E.g. with an FTP program or via the file manager of your Jweiland package.

Now you can assign this font to the desired HTML element or class:

p {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
}

Updated: 17.07.2024