Embedding fonts locally using the ThemeWare® Customizing Plugin

In this tutorial, you will learn how to self-host fonts and embed them 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".

Note: Creating a ThemeWare® duplicate is not necessary for template customizations.

Important: Currently, no individual customizations are possible in the Shopware 6 Cloud!

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:

ThemeWare® Customizing Plugin

Attention: Do Never edit original files of Shopware or any extensions (plugins, apps or themes)!

Embedding fonts manually

1. Preparing extension

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

2. Then install and activate the extension

2. Downloading the required Google Fonts

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 google-webfonts-helper.

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/
4. Download the ZIP archive via the button

Tip: If the integration does not work with the path specified under 3., please add the following variable #{$sw-asset-public-url} before the path.

Example:

#{$sw-asset-public-url}/bundles/tcinncustomizing/fonts/

3. Uploading fonts to the server and embedding them

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.
4. Save the change of the file "base.scss" and upload it again if necessary.

4. Configuring ThemeWare®

• 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)

  3. Deactivate the option "Import Google Fonts" in order not to load the fonts from Google servers.

• Save the settings in order to compile the current theme and changes will be transferred to the storefront.

5. Loading fonts into the storefront

• 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 example

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

// Roboto Condensed

@font-face {
    font-family: 'Roboto Condensed';
    src: url('#{$sw-asset-public-url}/bundles/tcinncustomizing/fonts/static/RobotoCondensed-Light.ttf');
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url('#{$sw-asset-public-url}/bundles/tcinncustomizing/fonts/static/RobotoCondensed-Regular.ttf');
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url('#{$sw-asset-public-url}/bundles/tcinncustomizing/fonts/static/RobotoCondensed-Bold.ttf');
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Permanent Marker';
    src: url('#{$sw-asset-public-url}/bundles/tcinncustomizing/fonts/static/PermanentMarker-Regular.ttf');
    font-optical-sizing: auto;
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

As of: Shopware v6.6.6