CODEWITHSUNDEEP
cssvue.jsvuejs2vuetify.js
BeaST 30
BeaST 30

Reputation: 744

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

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?

Upvotes: 0

Views: 407

Answers (1)

palaѕн
palaѕн

Reputation: 73896

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>

Upvotes: 2

Related Questions