Latest Chrome update broke font-weights for ionic-v5 deployed website

I have an ionic v5 app deployed to the web via firebase. This morning I found the font-weights aren’t being respected by google chrome. macOS Safari and iOS Safari are normal still (as Chrome had been for the past month while building this site)

https://santekotturi.com/

Here’s an ion-card with an ion-card-title element with font-weight set to 900.

Do I need to do something additional to use the default ionic font? New font file format for Chrome?

I created a new ionic tabs app and served it to chrome and font weights ARE respected there but I’m not serving that from firebase.

It’s quite possible it has something to do with my code BUT it was fine for 1+ month, I changed nothing overnight and now its different.

If anyone has any insights, seen this before etc, please let me know!

CHROME:

SAFARI:

I noticed chrome changed the font of their url bar:

I found the cause. I’ve set mode to iOS (because I prefer it to android styles for a website). This causes the font-family to be set to: -apple-system
which apparently stopped working in Chrome.

To reproduce:

  1. generate a new ionic app
  2. run using ionic serve
  3. Open the app in Chrome
  4. Launch chrome dev tools
  5. Open the device toolbar and set the device to an iOS device (iPhone or iPad).
  6. Refresh so the “iOS” class is applied to the entire app
  7. All bold fonts are gone.

If you check chrome dev tools, the computed font-family is -apple-system:

I filed a bug for this here: https://github.com/ionic-team/ionic/issues/21061