Incorporate font loader module

[Triloworld]

Font loading is now only:

• local asset

What we see in our and other project is based on the module: https://www.npmjs.com/package/nuxt-font-loader

Final result:

• local asset but by nuxt-font-loader
• proxy to nuxt-font-loader for external ones

What is different from nuxt-loader-loader can't? Can this be documented if there is some?

"completely new approach of font declaration" <- why needed if we have working and future proof one? Maybe I missing some point there

[StephanGerbeth]

Hi @Triloworld,

In nuxt-font-loader a global configuration is loaded, which globally renders the font declarations into the web page. This has the disadvantage that per page/component all fonts defined per font, preload etc. are loaded viewport independent and uncontrolled. In nuxt-speedkit, the configuration is a global reference. You define the usage of fonts component-based. So only the font declarations which are relevant will be rendered in the page and loaded viewport based.
For example, it is possible to declare 12 fonts (also with media query support), but when the page is loaded, only 2 fonts will be loaded initially and viewport-based. The rest of the fonts are lazy-loaded component-based.

This allows us to massively streamline and control the initial loading process, since only the critical page-based resources are loaded.

Does this explanation help you?

Cheers
Stephan

[Triloworld]

This need some documentation! Yes indeed. Is this option work on component based?

Component can have more than one font declared, one of them is in different media query and one is same as other component. Module can load lazy, by media query and know what is loaded to ignore loaded one. Thats the goal of module?

[StephanGerbeth]

Yes, that is one goal of this module. All parts of this module have an essential impact to the Lighthouse Performance Score.

Thanks for your feedback. We will describe it in a more detailed way in our documentation as soon as possible.