preloading fonts with Nuxt js
I am trying to optimize my page www.gamestegy.com and for example on this link https://www.gamestegy.com/read-post/233/alistair-the-juggernaut-build when I check it on PageSpeed Insights, I get this message: Preload key requests. Which would allow me to save almost 2 seconds.
My current setup is that I have a font.css file in assets folder where the fonts are imported in this manner:
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 500; src: local('IBM Plex Mono Medium'), local('IBMPlexMono-Medium'), url('../fonts/ibm-plex-mono-v5-latin-ext_latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/ibm-plex-mono-v5-latin-ext_latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } The assets folder also contains the woff2 and woff files which are being imported to font.css
Now this setup doesn’t have any preloading (from what I understand). So I tried to investigate how to setup preloading and one of the options I found was to use in nuxt.config.js:
render: { bundleRenderer: { shouldPreload: (file, type) => { return ['script', 'style', 'font'].includes(type); } } }, However, this imports all of the font files which may not be necessary for the page (in total 20+ imports). How do I do font preloading importing correctly?
Regards, Rokas
