Google Fonts Lining Numbers

Get Raleway lining numerals for system font usage

You can use the Expert mode on http://www.fontsquirrel.com/tools/webfont-generator with OpenType flattening to generate a new font with lining numerals turned on.

Additionally, you could generate a font with the stylistic alts. This will give you a more modern, alternative W.

Font-variant-numeric for Google Fonts

TL;DR: not all fonts support tabular-nums.

This page here does a good job explaining that only 'Open Type' fonts can interact with the font-variant-* properties. https://practice.typekit.com/lesson/caring-about-opentype-features/

This article indicates that Google Fonts does not support this yet, but is looking at supporting open font properties: https://css-tricks.com/almanac/properties/f/font-variant-numeric/ (last updated May 9th, but the article is from 2017)

It seems that the core of the problem is that the font designers have not yet accounted for this use, so browsers can't leverage it.

Numbers Not on Same Line

This is definitely down to the design of the font being used.."Raleway".

Sample Image

h1 {  font-family: 'Raleway', sans-serif;  font-size: 72px;  text-align: center;}h2 {  font-family: 'Open Sans', sans-serif;  font-size: 72px;  text-align: center;}
* {  margin:0;  }

<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<h1>0123456789</h1>

<h2>0123456789</h2>

OpenType settings reset by font-weight and font-style in Chrome

The reason for this is that two different versions of Raleway are used together.

The versions served by Google only have those old style numerals — they don't come with the lining numerals (lnum). So for all fonts loaded from the Google servers, you'll see these irregular looking numerals.

But you don't see them for the normal weight, because it's loading a local verson of Raleway. An installable version (also known as the "desktop version") contains all of the OpenType layout features Raleway comes with — including lining numerals. So for all text set in the normal weight, the numerals will be changed to lining numerals. For all flavors of Raleway that you don't have installed, and will be fetched from Google, won't have these so you'll see the irregular ones.

Try to uninstall all local versions of Raleway and try the CodePen again. (Take heed: fonts installed through Typekit will have to be removed through the Creative Cloud app.)

Why you see a difference between Chrome and Firefox, I don't know — I did experience the problem you mention, but I did in both browsers, until I uninstalled my local version of Raleway.

Is there a way to specify that Android's TypeFace should use lining numbers and not old-style numbers?

So, for Android 5.0 and above (API 21), you can use the fontFeatureSettings property to enable this:

TextView myTextView = findViewById(R.id.myTextView);
myTextView.setFontFeatureSettings("lnum"); // Enabling lining numbers

Which I've tested to work with Raleway. Unfortunately that's probably not a sufficient option. There's a similar question here in which the suggested solution is to re-upload the font to FontSquirrel's font generator and substitute the lining number glyphs for the tabular glyphs.

How to align numbers in CSS?

You can fix this by adding CSS instructing the browser to use the lining-figures.
Read more here

body {
  font-family: 'Playfair Display', serif;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum";
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet">

123456789

Font messes up alignment of numbers

The Problem

This is part of the font itself and not something you can provide a quick fix for (unless you're dealing with very little text). If we look at Google Font's page for the Raleway font, we'll see that numbers have different alignment to letters:

Example

If you don't want the numbers to be aligned like this, you're going to have to use a different font instead.

A Fix

You can fix this by wrapping the numbers you wish to change the alignment of in a separate element and adjusting their vertical-align separately, but this is probably going to be more effort than its worth. I've given an example of this below:

h1 {
  font-family: Raleway;
  font-size: 2rem;
  border-bottom: 1px solid $text-color;
  border-top: 1px solid $text-color;
  padding: 2rem 0;
}

.raised {
  display: inline-block;
  vertical-align: 12%;
}

<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<h1>
  <span class="raised">5</span>
  Comments
</h1>