How to add custom fonts in Shopware 6.5.1?

Question

Did anybody successfully add custom fonts to Shopware 6.5.1 storefront?

What I tried to do but all failed:

1. add in customtheme/src/Resources/app/storefront/src/assets/font/font.woff2
2. point $app-css-relative-asset-path variable to this directory and add the following to base.scss

@font-face {
    font-family: 'Myriad Pro';
    font-style: normal;
    font-weight: 300;
    font-display: fallback;
    src: url('#{$app-css-relative-asset-path}/font/font.woff2') format('woff2'),
    url('#{$app-css-relative-asset-path}/font/font.woff') format('woff');
}

This does not work at all. It does not even change the path to the font in storefront. Other scss changes in base.scss are working.

In shopware 6.4 this aproach worked, though.

Answer 1

This is the way it works for me with 6.4.x to 6.5.1.1

• put your assets in custom/apps/MyTheme/src/Resources/public/assets/fonts
• define your fonts and the relative path in overrides.scss like

$font-family-base: 'my-font', Helvetica, Arial, sans-serif;
$headings-font-family: 'my-font', Helvetica, Arial, sans-serif;

$my-asset-path: '#{$sw-asset-theme-url}/bundles/mytheme/assets' !default;

• Define the font-faces in base.scss like

@font-face {
  font-family: 'my-font';
  src: url('#{$my-asset-path}/fonts/my-font.eot?#iefix') format('eot'),
  url('#{$my-asset-path}/fonts/my-font.woff2') format('woff2'),
  url('#{$my-asset-path}/fonts/my-font.woff') format('woff'),
  url('#{$my-asset-path}/fonts/my-font.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}