In the following we explain how to integrate Google Web Fonts or your own Fonts DSGVO-compliant into ThemeWare.


Requirement

However, the prerequisite for this is that you use ThemeWare at least in version 1.4.18 and a extension of ThemeWare exists. Furthermore, in the following Theme configurations have to be set as follows:

  • Tab "Colors & Typography" => Tab "Typography" => Section "Basic setting" => Integrate fonts locally: Active
  • Tab "Colors & Typography" => Tab "Typography" => Section "Basic setting" => Primary-Font / Secondary-Font: Individual Font


In case you would like to use your own fonts, or the required fonts are already available in the right format, please directly go to the section "Uploading Fonts to the Server and including them into the Theme".


Download and integrate required Google fonts

In the basic configuration (Tab "Colors & Typography" => Tab "Typography" => Field „Basic configuration"), you first have to check which primary and secondary fonts are being used. In addition, the font weights are relevant.


In our example this is:

  • Primary Font: Open Sans with a font-weight of 300,400,700
  • Secondary font: Roboto with a font-weight of 300,400,700



In order to download the fonts, we recommend the free of charges service of Herokuapp.


Download fonts with Herokuapp

1. Locate on the top left the previously reviewed primary font and select it.

2. Specify the primary font-weights under "Select styles". (regular = 400, italic = 400i)



3. Download the ZIP archive via the button. The folder prefix "../fonts/" does not need to be adapted.


Upload fonts to the server and integrate into the Theme

1. Unzip the ZIP archive and upload the fonts via FTP into the font-folder of the theme extension. This folder is located here inside your Shopware file: /themes/frontend/name-of-your-extension/frontend/_public/src/ fonts


2. Create a file called all.less in the less folder of your theme derivation, in case it does not already exist. This folder is located here: /themes/frontend/name-of-your-extension/frontend/_public/src/less


3. Deposit here by copying and pasting the CSS-instructions of the fonts in the all.less file. Multiple fonts are simply added below the previously included CSS codes.


Please repeat all necessary steps for each additional font. Compile the theme in order that the changes take effect!