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

Ionic Framework
1

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:

image
image2944×1790 1.23 MB

SAFARI:

image
image3070×1806 1.4 MB

I noticed chrome changed the font of their url bar:

image
image760×74 3.57 KB

2

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:

image
image1320×140 13.6 KB

3

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