How to efficiently load google fonts in Nuxt

by

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,
      },
    ],
  ]
}

And don’t forget to also handle the @font-face CSS side of course!

PS: in case you have some issues of specific weights not being downloaded, you can use either overwriting: true in your module configuration or bump the package version to v3.0.0-1.

More Related Contents:

  1. Vue.js dynamic with variables
  2. Why one CSS class overrides other? [closed]
  3. How to use .env variables in Nuxt 2 or 3?
  4. Vuejs Error: The client-side rendered virtual DOM tree is not matching server-rendered
  5. How do I use /deep/ or >>> or ::v-deep in Vue.js?
  6. Vuex – Do not mutate vuex store state outside mutation handlers
  7. Downloading a Google font and setting up an offline site that uses it
  8. How to install jQuery into Nuxt.js?
  9. Vue.js toggle class on click
  10. Scope Bootstrap Css in Vue
  11. How to use microfrontends with Vue/Nuxt?
  12. Vue.js – Add class to clicked button
  13. CSS Image Effects
  14. Can media queries resize based on a div element instead of the screen?
  15. nth-child doesn’t respond to class [duplicate]
  16. CSS Margin Collapsing
  17. Which CSS properties are inherited?
  18. How do I apply opacity to a CSS color variable?
  19. Remove extra button spacing/padding in Firefox
  20. css vertical centering
  21. Cross Site Scripting in CSS Stylesheets
  22. Hover effect : expand bottom border
  23. Why can’t you group descendants in a CSS selector?
  24. How can I set the width of select box options?
  25. Make outer div be automatically the same height as its floating content
  26. Vertical align table-cell don’t work with position absolute
  27. Vue template or render function not defined yet I am using neither?
  28. How to push a footer to the bottom of page when content is short or missing?
  29. How to make a Bootstrap 4 full width dropdown in Navbar?
  30. Stacking DIVs on top of each other?

Leave a Comment