The first one has text rendered in 12 point Courier. The second will display the text in any font you specify in the form element below. Enter a non-existent font name, or nonsense text. The second element will render in Courier. It will be the same width as the first.
Every font has specific widths defined for each character.
These widths are the font metrics. We cannot check for the existence of a font by any built-in method. So we create two positioned elements. In the first, we place a predefined text to be displayed with a predefined font. Courier, or any monospaced font is best, since you will probably not test for the existence of a monospaced font.