Preload font on smarty and use on @font-face

Question

I am working with Shopware. I am trying to preload a font from my application using smarty. The purpose is, google pagespeed tells it as an issue.

So we have a font in the theme, load from font-face as follows.

@font-face {
    @hash-shopware-woff-2: swhash('@{font-directory}/shopware.woff2');
    @hash-shopware-woff: swhash('@{font-directory}/shopware.woff');
    @hash-shopware-ttf: swhash('@{font-directory}/shopware.ttf');
    @hash-shopware-svg: swhash('@{font-directory}/shopware.svg');

    font-family: @sw-icon-fontname;
    font-display: block;
    src:url('@{font-directory}/shopware.woff2?#@{hash-shopware-woff-2}') format('woff2'),
        url('@{font-directory}/shopware.woff?@{hash-shopware-woff}') format('woff'),
        url('@{font-directory}/shopware.ttf?@{hash-shopware-ttf}') format('truetype'),
        url('@{font-directory}/shopware.svg?@{hash-shopware-svg}') format('svg');
    font-weight: normal;
    font-style: normal;
}

This one creates page-speed issue. So I was planning to comment this and preload font using smarty and write font-face from preloaded font. (All the variables are available on the theme.)

So I wrote preload as follows.

<link href="{preload file={link file='frontend/_public/src/fonts/shopware.woff2'} as='font'}" crossorigin="crossorigin" type="font/woff2" />

And I have added a font-face as follows,

@font-face {
    font-family: 'font-name';
    font-display: block;
    font-weight: normal;
    font-style: normal;
}

Is this preload correct? Because browser console didn't show this file loading.

If I call font via src: url('path'); it loads the font, but pagespeed considering it not as a good practice.

Is this approach will work? What change I have to make?

Thank you.

Answer 1

I am currently facing the same problem. What I noticed is that the file call src:url('@{font-directory}/shopware.woff2 generates a double slash because there is already a slash in the variable @font-directory. So maybe the solution would be to use a double slash during preload? Have you ever tried that? Something like this: <link href="{preload file={link file='frontend/_public/src/fonts*//*shopware.woff2'} ... />