How do I make the width of each character the same?

Question

I'm using a custom font. The design doesn't allow me to change font.

While the number change, the content after it got pushed around due to the different width of digits.

Is there a way to make all the digits same width? I don't want to assign the width of the span component because I need this to be inline and the width should be determined by the number of digits it has.

const numberDom = document.querySelector('.number');
let number = 0;

function tick() {
  number += 1;
  numberDom.innerText = number;
}

setInterval(tick, 50);

p {
  font-size: 1rem;
}

.number {
  font-family: 'Carter One', cursive;
  font-size: 1.5rem;
  color: #365;
}

.number::after {
  content: 'pt';
  font-size: 0.75em;
  margin-left: 0.1em;
  color: #587;
}

<link href="https://fonts.googleapis.com/css?family=Carter+One&display=swap" rel="stylesheet">

<p>You got <span class="number"></span>, good job!</p>

Answer 1

Okay so first I made a function that it changes the looks of your <p>. after that the only solution I could find to stop the jiggling was to put the number in an inline-block.

Here is my fiddle

Edit

I made a script that changes the width of the inline-block. It's an if statement that if your number is 1000 or higher the width will change.

Fiddle

You can always make an else if with over 10000 et cetera.