How to add custom fonts in Shopware 6.5.1?

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.

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

• put your assets in custom/apps/MyTheme/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;
}

Your approach with $app-css-relative-asset-path is not wrong. Did you use a relative path?

In Shopware 6.5 create a fonts folder in custom/plugins/CUSTOMTHEME/src/Resources/app/storefront/src/assets/.

Before you use any @font-face you need to set two variables. A separate file for fonts is preferred.

Put the following code at the top of the file or above your first @font-face.

_fonts.scss

/// @deprecated tag:v6.5.0 Use `app-css-relative-asset-path` instead
$asset-path: '#{$sw-asset-theme-url}/bundles/storefront/assets' !default;
$app-css-relative-asset-path: '../assets' !default;

And then for your @font-face, do what you've already done.

@font-face {
  font-family: 'my-font';
  src: url('#{$app-css-relative-asset-path}/fonts/my-font.ttf') format('truetype');
}

Side note

Putting your fonts in the public folder will remove them as soon as you run the build-administration script. So I wouldn't recommend that.