title: How to use font-weight in vue?
body: <p>I have already installed vuetify and use the its <code>font-weight-</code> class</p>
  <p>Here is my code below:</p>
  <pre><code>&lt;template&gt;
    &lt;v-app&gt;
      &lt;p class=&quot;font-weight-black&quot;&gt;Black text.&lt;/p&gt;
      &lt;p class=&quot;font-weight-bold&quot;&gt;Bold text.&lt;/p&gt;
      &lt;p class=&quot;font-weight-medium&quot;&gt;Medium weight text.&lt;/p&gt;
      &lt;p class=&quot;font-weight-regular&quot;&gt;Normal weight text.&lt;/p&gt;
      &lt;p class=&quot;font-weight-light&quot;&gt;Light weight text.&lt;/p&gt;
      &lt;p class=&quot;font-weight-thin&quot;&gt;Thin weight text.&lt;/p&gt;
      &lt;p class=&quot;font-italic&quot;&gt;Italic text.&lt;/p&gt;
    &lt;/v-app&gt;
  &lt;/template&gt;
  </code></pre>
  <p>My question is why <strong>medium</strong>, <strong>normal</strong>, <strong>light</strong>, and <strong>thin</strong> were all same font-weight (see picture below) compare to its example from <a href="https://vuetifyjs.com/en/styles/text-and-typography/#font-weights-and-italics" rel="nofollow noreferrer">vuetify font-weight</a>. Anybody knows how to fix this?</p>
  <p><a href="https://i.stack.imgur.com/Ggv10.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ggv10.png" alt="enter image description here" /></a></p>