Embedding fonts locally

In this tutorial, you will learn how to self-host fonts and embed them manually.

In this article you will learn how to self-host your own fonts or Google Fonts respectively how to store them locally on your webserver and how to embed them in your Shopware 6 shop (self-hosted).

Important: In the Shopware 6 Cloud, no individual customizations are currently possible!

Preface

In order to easily deposit the font files and the corresponding CSS customizations you should use a separate extension (plugin or app) for individual customizations.

• Please check if there already exists a suitable extension in the Shopware Community Store.

• Alternatively, you may use the following manual method.

Attention: Never edit original files of Shopware or any extensions (plugins, apps or themes)!

Manually embedding fonts

The easiest way is to provide the files in the folder "public" of your Shopware installation.

1. Downloading the required Google Fonts

In our example we wish 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.

1. Look for the desired font in the upper left and select it (e.g. "Titillium Web").

2. Specify the required font weights under "2. Select styles". (e.g. regular/400 and bold/600)

3. As folder prefix under "3. Copy CSS" you can leave it at "../fonts/".

4. Download the ZIP archive via the button.

2. Uploading and embedding fonts on the server

1. Unzip the ZIP archive and upload the fonts via FTP to the folder "Fonts". Folder path: public/fonts/

2. Switch to the folder "css" and create the file "fonts.css" Folder path: public/css/

3. In "fonts.css" copy and paste the CSS instructions of the fonts from section "3. Copy CSS". Additional fonts can easily be added under the CSS codes previously embedded.
4. Save the change to the fonts.css file and upload it again if necessary.

3. Configuring ThemeWare®

1. Open ThemeWare® in the Theme Management and switch to the Tab "Layout" => Block "Typography":

   1. Enter your font in the Section "Text" and/or "Headlines". (e.g. "'Titillium Web', sans-serif")

   2. Enter your font weights in the Section "Font weight" (light, normal, bold). (e.g. 400, 400, 600)

   3. Deactivate the option "Import Google Fonts" in order not to load the fonts from Google servers.

2. Now switch to the Tab "Others" => Block "Expert settings" => Section "CSS file":

   1. Enter the path to your "fonts.css" into the field "External CSS file". (e.g. "yourshop.com/css/fonts.css")

3. Check whether the "Expert mode" (Tab "Others" => Block "Expert settings") is activated so that the CSS file is loaded.

4. Save the settings in order to compile the current theme and activate changes in the storefront.

5. The desired font should be available in the storefront now.

Tip: Check in the plugin settings ("Extensions" => "My extensions" => "Themes" => "ThemeWare® ...") whether the "Debug mode" is deactivated so that the CSS file is loaded.

4. Completion

• Check whether fonts are no longer loaded via the Google Fonts API.