How to efficiently load google fonts in Nuxt - css

Question

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>

Answer 1

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.