`preload` for downloaded fonts

[codeflorist]

SEO- and performance-wise it makes sense to add a <link rel="preload" tag for the fonts used by the site. The option preload: true however only works, if download: false is set. It would be great, if it also works with downloaded fonts.

[riddla]

I'm currently using a quick and dirty local Nuxt module for this:

import { defineNuxtModule } from "nuxt/kit";
import { globby } from "globby";
import { basename, extname } from "node:path";

export default defineNuxtModule({
  hooks: {
    ready: async (nuxt) => {
      if (!nuxt.options.nitro.publicAssets) {
        return;
      }

      const googleFontsModuleDir = nuxt.options.nitro.publicAssets.find(
        (assetDirectory) => assetDirectory?.dir?.includes("nuxt-google-fonts")
      );

      if (!googleFontsModuleDir) {
        return;
      }

      const outputDir = googleFontsModuleDir.dir;
      const outputFonts = await globby(outputDir!);

      outputFonts.forEach((fontFilePath) => {
        nuxt.options.app.head.link!.push({
          rel: "preload",
          as: "font",
          type: `font/woff2`,
          href: `/fonts/${basename(fontFilePath)}`,
        });
      });
    },
  },
});

[codeflorist]

@riddla

Nice, thanks!

It's also worth mentioning, that https://github.com/nuxt/fonts has the preload-feature on-board, and it seems, that nuxt/fonts will be the successor package of nuxt-modules/google-fonts (see https://github.com/nuxt/fonts/issues/57)