Fonts for numbers and fonts for letters

Question

Hi, I’m making use of the Raleway font of CDN Google Fonts, but the numbers seem floating, the serif for the letters are good, clean, but for the numbers has a "dropped" aspectI thought I’d use another source for the numbers but the problem is I have over 500 pages in the project and a few pages are static content, I wondered if there’s any way to change the typography of the numbers through some regular expression in javascript, recognizing numbers and numbers 123123 and inserts a tag <span class='fontNum'>123123</span> but with some caveats.

For unique numbers: <span class='fontNum'>1</span>

For numbers with more than one digit: <span class='fontNum'>1234</span>

For an ex format, CPF: <span class='fontNum'>111.111.111-00</span>

And not: <span class='fontNum'>111</span>.<span class='fontNum'>111</span>.<span class='fontNum'>111</span>-<span class='fontNum'>00</span>

If you can help me with the three formats I will do the other formats based on the last of the CPF.

The change would only be aesthetic in the DOM, I believe that with javascript the reading of the robots would not have problems in attaching the strings in the way that came from the database or that are inserted in the static HTML, because I believe that robots read the processed HTML and not how the code was after all javascript executed. This way the HTML is complete and the numbers changed only on the user screen.

If in fact the searchers do not read the modified code in the DOM by javascript, it could still look like this:

<span class='fontNum'>111</span>.<span class='fontNum'>111</span>.<span class='fontNum'>111</span>-<span class='fontNum'>00</span>

Answer 1

There is a way to fix this only with CSS, not with all Fonts, but with the Raleway fortunately works because she is OpenType

lining-nums activates the set of figures where the numbers are all on the baseline. Corresponds to the values Opentype lnum.

To fix this you will need to put the property font-variant-numeric: lining-nums; in your CSS body. That way you don’t need to encapsulate all the digit strings in one tag and put another css with another font, you can "fix" the original font itself

You can read more about this property here: https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric

Code of the image above

body {
  font-family: 'Raleway', sans-serif;
  font-variant-numeric: lining-nums;
  font-size: 20px;
}
span {
  font-variant-numeric: initial;
}

<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

<p>Fonte corrigida com font-variant-numeric</p>
1234567890
<br>
<br>
<i>Padrão original: </i><span>1234567890</span>

Current browser support for property: https://caniuse.com/#feat=font-Variant-Numeric