How to efficiently load google fonts in Nuxt

I am using this google font font-family: 'Saira Semi Condensed', sans-serif;

Link: https://fonts.google.com/specimen/Saira+Semi+Condensed

I am working in on a NuxtJS project. I have to use this font in two different components but with different font-weight. I have imported all the google fonts links in Layout.vue.

For component A the font-weight is 600 & for component B the font-weight is 800. So I thought giving different font-weights in the respective component will work. But it is not working. The only basic font has applied i.e. Saira Semi Condensed, sans-serif; but the font-weight values are not reflected. To resolve this problem I need import two google font links with the same fonts but different font-weight in Layout.vue which makes it redundant.

For font-weight: 600

@import url('https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@600&display=swap%27);

For font-weight: 800

@import url('https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@800&display=swap%27);

I think my way of importing two links for the same fonts is not look good. Can you guys please help me to solve this issue? Thank you in advanced.

Code:

Layout.vue

<template>
  <div>
    <Nuxt />
  </div>
</template>

<style>
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');

html {
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
</style>

index.vue

<template>
  <div>
    <Navbar />
    <ComponentA />
    <ComponentB />
    <Footer />
  </div>
</template>

<script>
import Navbar from '../components/Navbar.vue'
import Clock from '../components/ComponentA.vue'
import Days from '../components/ComponentB.vue'
import Footer from '../components/Footer.vue'
export default {
  components: {
    Navbar,
    ComponentA,
    ComponentB,
    Footer,
  },
}
</script>

ComponentA.vue

<template>
  <div>
    <h1>I am component A</h1>
  </div>
</template>

<script>
export default {
  name: 'ComponentA',
}
</script>

<style scoped>
footer {
    color: blue;
    font-family: 'Saira Semi Condensed', sans-serif;
    font-size: 20px;
    text-align: center;
 }
</style>

ComponentB.vue

<template>
  <div>
    <h1>I am component B</h1>
  </div>
</template>

<script>
export default {
  name: 'ComponentB',
}
</script>

<style scoped>
footer {
    color: red;
    font-family: 'Saira Semi Condensed', sans-serif;
    font-size: 24px;
    text-align: center;
 }
</style>

Solution

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.