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.

google webfonts helper

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.

<link rel="stylesheet" href="/css/raleway.css" >

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).

Schriften laden deaktivieren, damit keine Verbindung mehr zu Google aufgebaut wird.

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.