Embed fonts locally
How to embed Google Fonts locally
These instructions can be used for Google Fonts and other custom fonts.
For this tutorial, the use of a child theme is not necessary. If you want to use a child theme, use the instructions for integration with child-theme.
Embed fonts locally
Instead of loading the fonts from the Google server, you can also place them locally on your own server and embed them. You can also use this tutorial to include your own webfonts in your store.
In this tutorial, the fonts are placed in the public folder of your Shopware installation.
1. Choose font
To download the fonts as web fonts from Google Fonts, you can use the free service of Herokuapp.
Enter the name of the font you want (in this example it is "Raleway") in the search (1) and select the font from the suggestions (2).
You can then choose font styles (3) of the font.
2. Insert CSS
Create a CSS file locally with the name of the font, e.g. raleway.css and copy the CSS code from the gray box into this file.
Connect to your online store via FTP client and navigate to the {root}/public/css folder. Load the raleway.css file into the css folder of your Shopware 6 installation.
In the administration of your Shopware shop, open the settings (plugin/app configuration) of pur theme under Extensions > My Extensions > Tab: Themes > Theme [Variant] > Context Menu: Configuration
Enable custom CSS files (1) and insert the link to the CSS file in the text field (2). Resources in the public folder of your installation can be accessed with a relative path.
3. Upload fonts to the server
Under Step 4 - "Download files" you can download a zip file of the fonts.
Unzip the downloaded ZIP archive with the fonts on your computer and upload the individual font files via FTP client to the {root}/public/fonts folder of your Shopware installation.
4. Theme configuration
Disable connection to Google Fonts
Now you have to tell the theme that the fonts you would like to use should not be loaded from the Google servers. Uncheck the checkbox Load fonts from Google (1).
Assign fonts
Enter the name of the fonts, e.g. 'Raleway', sans-serif including the generic font-family into the fields Font type text (1) and Font type headline (2). Font type text and Font type headline can of course be different font families.
In order to use the Custom font fields (Google Fonts or self-hosted), the Font-type text (5) and Font -type headline (6) fields must be set to the value - --- Use 'Custom fonts' ---.
The Font weights (3, 4) do not need to be specified here, as they are defined in the CSS code from step 2 and were only used for loading via the Google servers.
Last updated
