Embedding fonts locally using the ThemeWare® Customizing Plugin

This article explains how you can self-host your own fonts or Google Fonts respectively how to store them locally on your webserver and how to integrate them into your Shopware 6 shop (self-hosted) using our free "ThemeWare® Customizing Plugin".

Introduction

In order to easily deposit the font files and the corresponding CSS customizations you should use a separate extension for individual customizations.

• Please check whether there already is a suitable extension in the Shopware Community Store.

• Alternatively, you may use the following method with the "ThemeWare® Customizing Plugin".

You will find all information concerning the "ThemeWare® Customizing Plugin", the installation and the download link in the following article:

1. Upload the zip file of our extension via the Shopware 6 extension manager

2. Then install and activate the extension

In our example we would like to use the Google font "Titillium Web" for text and headlines in a font weight of "400" and "600". In order to download the fonts, we recommend the free service .

1. Look for the desired font in the upper left and select it (e.g. "Titillium Web").

2. Enter the required font weights under "2. Select styles". (e.g. regular/400 and bold/600)

3. Specify as folder prefix under "3. Copy CSS" the path /bundles/tcinncustomizing/fonts/

1. Unzip the ZIP archive and upload the fonts via FTP to the plugin folder "fonts". Folder path: custom/plugins/TcinnCustomizing/src/Resources/public/fonts/

2. Open the file "base.scss" Folder path: custom/plugins/TcinnCustomizing/src/Resources/app/storefront/src/scss/

3. Deposit the CSS instructions of the fonts from section "3. Copy CSS" into the "base.scss" using copy and paste. Additional fonts can easily be added below the previously included CSS codes.

• Open ThemeWare® in the Theme Management and switch to the Tab "Layout" => Block "Typography" :

  1. Enter your font in the "Text" and/or "Headlines" section. (e.g. "'Titillium Web', sans-serif")

  2. Enter your font weights into the section "Font weight" (light, normal, bold). (e.g. 400, 400, 600)

• In order to load the fonts into the storefront, please deactivate the "ThemeWare® Customizing Plugin" once and activate it again afterwards.

• The desired font should be available in the storefront now.

As of: Shopware v6.5.0

For the Font "Roboto Condensed", the embedd could be as following:

As of: Shopware v6.6.6