Integrate your own fonts

The official Shopware documentation explains how to integrate your own fonts and assets into a child theme or an add-on extension. In this article, I will show you how to store the fonts on your server and use them independently of additional extensions.

Upload your Fonts

In the Shopware installation on your server, you will find the folder public/fonts. Store the fonts you want to integrate there:

In this example, I have included the Open Sans font.

Initialize font via font-face

You can integrate individual CSS in my themes. This is necessary to initialize the font. You can find out where to integrate the CSS in the following article:

pageIndividual Code

Now use the following CSS code to initialize your fonts:

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  src: url('/fonts/Open Sans/open-sans-v34-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/Open Sans/open-sans-v34-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/Open Sans/open-sans-v34-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/Open Sans/open-sans-v34-latin-300.woff') format('woff'), /* Modern Browsers */
       url('/fonts/Open Sans/open-sans-v34-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/Open Sans/open-sans-v34-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}

Please note that the path to your font must be correct. Depending on how you have set up your Shopware instance, the path will differ. In this example, I have used the default path to the fonts folder:

/fonts/yourFontFolder/yourFont.ttf

You can then simply use the font in the theme settings: