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

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

<script>
export default {
  name: 'App',
  mounted () {
    console.log(document.getElementById('poppins').clientWidth)
  }
}
</script>

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.

Thanks.