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:
Attention: Do Never edit original files of Shopware or any extensions (plugins, apps or themes)!
Embedding fonts manually
1. Preparing extension
Upload the zip file of our extension via the Shopware 6 extension manager
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.
Look for the desired font in the upper left and select it (e.g. "Titillium Web").
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
Unzip the ZIP archive and upload the fonts via FTP to the plugin folder "fonts". Folder path:
custom/plugins/TcinnCustomizing/src/Resources/public/fonts/
Open the file "base.scss" Folder path:
custom/plugins/TcinnCustomizing/src/Resources/app/storefront/src/scss/
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" :
Enter your font in the "Text" and/or "Headlines" section. (e.g. "'Titillium Web', sans-serif")
Enter your font weights into the section "Font weight" (light, normal, bold). (e.g. 400, 400, 600)
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:
As of: Shopware v6.6.6
Last updated