Embed fonts locally with child-theme
Last updated
Last updated
These instructions can be used for Google Fonts and other custom fonts.
This guide requires the use of a child theme.
If you do not want to use a child theme, use the basic instructions.
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 fonts in your store.
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 the font styles (3) of the font.
Via CSS/SCSS you define which fonts the theme should load.
Before you copy the code, adjust the paths of the url from ../font/ to #{$app-css-relative-asset-path}/font/. To do this, you can easily rewrite the path directly in the input field (1) marked in the screenshot below.
You can copy this code into the SCSS file of the child theme at {root}/custom/plugins/{yourChildTheme}/src/Resources/app/storefront/src/scss/base.scss or a file of your choice imported into it.
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 into the font folder of your assets folder.
You can find the assets folder in
In the assets folder you create a subfolder font, so that the paths given in step 2 fit. The path for the fonts is now complete:
Make sure that the individual font files are uploaded to the font folder from the ZIP file, i.e. without an additional folder.
In Shopware 6, however, the storefront does not directly access the assets files in your theme. These files are copied to the theme directory in the public folder of the store when you install / activate / update your child-theme.
At first it seems misleading to store the fonts in the assets folder of the theme if you then have to copy them to another directory. However, it is important to store the fonts in the theme files as well, since certain actions clean up the public folders and recreate them with the assets from extensions.
However, your fonts are still in the plugin directory from step 2 and you don't yet know the correct folder to copy them to.
Via the Shopware console (SSH access required) and the command
or for the development template of Shopware
the files from the assets folder of extensions and themes are loaded into the correct directory.
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).
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.
