I have a basic project just installed for testing this problem.

In my public/index.html i have inserted this font link

<link rel="stylesheet href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap">

In my App.vue i have

  <div id="poppins" style="display: inline-block;">Item One a</div>

export default {
  name: 'App',
  mounted () {

The problem is: The clientWidth returns different from the true length of the div (poppins). Should the preload be inserted? I tried but without success. This problem also occurs when I locally download the font.


  • are you checking width once the font is loaded and rendered or do you check width asap ?
    – G-Cyrillus
    Oct 21 at 13:53
  • After render the width is correct. The problem is on mounted() method. Oct 21 at 14:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.