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.
Last updated
In this tutorial, you will learn how to self-host fonts and embed them using the "ThemeWare® Customizing Plugin.
Last updated
© 2024 by ThemeWare® | Made with 💙 by TC-Innovations GmbH
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!
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)!
Upload the zip file of our extension via the Shopware 6 extension manager
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 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/
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.
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.
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
Enter the required font weights under "2. Select styles". (e.g. regular/400 and bold/600)
Specify as folder prefix under "3. Copy CSS" the path /bundles/tcinncustomizing/fonts/
Download the ZIP archive via the button
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.
