Currently, I am incorporating the google font
font-family: 'Saira Semi Condensed', sans-serif;If you want to check out this font, here is the link:
In my ongoing NuxtJS project, I have a requirement to use this font in two different components but with varying font-weight. I have already imported all the necessary google fonts links within Layout.vue.
The font-weight for component A is set to 600, while for component B it is 800. Initially, I tried giving different font-weights directly in their respective components, but unfortunately, it didn't work as expected. The only basic font applied was
Saira Semi Condensed, sans-serif;Layout.vue, which seems 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 believe that my approach of importing two links for the same fonts doesn't seem appropriate. Could anyone please assist me in resolving this issue? Your help would be greatly appreciated.
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>