Load custom fonts without webfont.js

[jahvi]

Related issues

N/A

Short description and why it's useful

Right now custom google fonts (Playfair Display, Robot and Material Icons) are loaded using webfont.js which is useful because it helps load custom fonts asynchronously and prevent FOUC however it comes at a cost.

I noticed this also run some expensive tasks in the browser that triggers "Style Recalculations" which can be very costly for the browser and one the things Google recommends minimising.

Purple spikes = style recalculations

Performance trace (before)

I replaced this to use a css @import which is not the best but I believe with the addition of font-display: swap it can help cover the benefits of webfont.js without the processing drawbacks (and also reduces the JS used by ~3%)

Fewer purple spikes

Performance trace (after)

It's hard for me to measure the performance benefits with my local server but I noticed around ~10% increase in FP, FCP and FMP. We can include the @font-face declarations directly which should help with latency while getting the fonts as well but that's open to discussion.

Screenshots of visual changes before/after (if there are any)

See above

Which environment this relates to

Check your case. In case of any doubts please read about Release Cycle

• Test version (https://test.storefrontcloud.io) - this is a new feature or improvement for Vue Storefront. I've created branch from develop branch and want to merge it back to develop
• RC version (https://next.storefrontcloud.io) - this is a stabilisation fix for Release Candidate of Vue Storefront. I've created branch from release branch and want to merge it back to release
• Stable version (https://demo.storefrontcloud.io) - this is an important fix for current stable version. I've created branch from hotfix or master branch and want to merge it back to hotfix

Upgrade Notes and Changelog

• No upgrade steps required (100% backward compatibility and no breaking changes)
• I've updated the Upgrade notes and Changelog on how to port existing VS sites with this new feature

IMPORTANT NOTICE - Remember to update CHANGELOG.md with description of your change

Contribution and currently important rules acceptance

• I read and followed contribution rules
• I read the TypeScript Action Plan and adjusted my PR according to it
• I read about Vue Storefront Modules and I am aware that every new feature should be a module

[patzick]

Thanks @jahvi !

QA team note - tests should check if there are some problems with font loads

[MariaKern]

Related to #2893