How to use custom google fonts classes in vue-vuetify project? - css

Question

I am using Inter font in my vue-vuetify project. I wanted to know that is there any way through which I can use the Inter font classes in my project directly?
Thin, Extra-light, light, medium, etc. are the classes available in Inter font. How to use these classes in my project directly?
Please refer this link for more
https://fonts.google.com/specimen/Inter?selection.family=Inter:wght#100
How can I apply any class for example Thin in my project?
Currently, I am doing this by declaring CSS in my project and setting the font-weight property as per each and every class.
But, it isn't the same as these classes.
For example, I have declared a css class namely
.headline-5 {
letter-spacing: 0.46px;
color: #000000;
opacity: 1;
font-size: 23px;
font-weight: 100;
}
Which has the same class as of Inter Regular. Is this approach correct or any other way is possible?

Answer 1

Which has the same class as of Inter Regular. Is this approach correct or any other way is possible?
I think a good approch would be to create a base class for Inter Regular like:
.headline-5 {
letter-spacing: 0.46px;
color: #000000;
opacity: 1;
font-size: 23px;
font-weight: 400;
}
and a thin class modifier for it, just to update the font-weight like:
.headline-5.thin {
font-weight: 100;
}
Then you can use Regular and Thin font versions in any place you like:
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#100;400&display=swap');
.container {
font-family: 'Inter', sans-serif;
}
.headline-5 {
letter-spacing: 0.46px;
color: #000000;
opacity: 1;
font-size: 30px;
font-weight: 400;
}
.headline-5.thin {
font-weight: 100;
}
<div class="container">
<p class="headline-5 thin">Almost before we knew it, we had left the ground.</p>
<p class="headline-5">Almost before we knew it, we had left the ground.</p>
</div>