How to adjust style in Google WebFont Loader

I have this code that asynchronously loads Google Fonts to avoid render blocking, I have it before ending the </body> of my code.

<script type="text/javascript">
      WebFontConfig = {
        google: {
          families: ['Poppins:300,400,500,600,700']
        }
      };
      (function(d) {
        var wf = d.createElement('script'),
          s = d.scripts[0];
        wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
        wf.async = true;
        s.parentNode.insertBefore(wf, s);
      })(document);
    
    </script>

The problem is that the numbers have different widths? styles? I want all the numbers to be the same in my TextArea and not look like this: Imgur

PS: I am using Poppins and if I load the fonts in a common way (<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">) this error does not happen.

The code I took from Google WebFont Loader