How to Efficiently Load Google Fonts in Nuxt

How to efficiently load google fonts in Nuxt

You're loading your fonts from a CDN, which is not the recommended way of doing things.

Here is a quote from this awesome performance checklist 2021 written by Vitaly Friedman

Now, many of us might be using a CDN or a third-party host to load web fonts from. In general, it’s always better to self-host all your static assets if you can, so consider using google-webfonts-helper, a hassle-free way to self-host Google Fonts. And if it’s not possible, you can perhaps proxy the Google Font files through the page origin.

Looking at this, I do recommend the usage of @nuxtjs/google-fonts, this is a cool Nuxt module.

I've actually asked if my configuration of the module was okay, here is the github issue: https://github.com/nuxt-community/google-fonts-module/issues/26

And here, a usage example in nuxt.config.js

export default {
  buildModules: [
    [
      '@nuxtjs/google-fonts',
      {
        families: {
          Mali: {
            wght: [400, 600, 700],
          },
        },
        subsets: ['latin'],
        display: 'swap',
        prefetch: false,
        preconnect: false,
        preload: false,
        download: true,
        base64: false,
      },
    ],
  ]
}

How to link a Google font to my Nuxt files?

If you want to have your fonts loaded properly, you need to have them linked to your page somehow at some point. Hence why putting your SCSS files into the css property is probably the way to go.

nuxt.config.js

export default {
  // Global CSS: https://go.nuxtjs.dev/config-css
  css: ['put-your-files-here']
}

Otherwise, here is how to load some fonts properly with Nuxt.

Google font import not working with NuxtJS component style

Try to follow my answer here and set the default font of Vuetify to use this one.

Also, please use the related google-fonts-module module to have them done at build time globally rather than scoped locally per component (CDN is usually not reliant/performing poorly).

How to host google fonts locally in Nuxt

this question was asked not so long ago. Here is my solution: https://stackoverflow.com/a/68166329/8816585

Give it a try, this is using @nuxtjs/google-fonts for some simple local fonts fetching during build time and works pretty well!

Loading custom fonts in Nuxt/Tailwind Project

I'm assuming you're using the module @nuxtjs/tailwindcss.

1. First, you'll have to run npm run build, so that tailwind files are created:

   • ~/tailwind.config.js
   • ~/assets/css/tailwind.css

2. Create a folder fonts under assets and place the fonts you've downloaded.

3. Include your fonts in ~/css/tailwind.css, as such:

@include font-face( KapraNeuePro, '~/assets/fonts/KapraNeueProFamily/Kapra-Neue-Pro-Regular', 400, normal, otf);
@include font-face( KapraNeuePro, '~/assets/fonts/KapraNeueProFamily/Kapra-Neue-Pro-Medium', 600, medium, otf);

etc.

4. Check out tailwind's docs on how to add font families in tailwind.config.js, and which configuration better suits your needs:
   (the following one is a quick working example)

module.exports = {
  theme: {
    fontFamily: {
      sans: ["KapraNeuePro"],
      serif: ["KapraNeuePro"],
      mono: ["KapraNeuePro"],
      display: ["KapraNeuePro"],
      body: ["KapraNeuePro"]
    },
    variants: {},
    plugins: []
  }
};

5. Dont' forget to remove from your layout and page all the default CSS related to font-family

---

Related Topics