How to properly using a custom font in Ionic 4?

I’m trying to using a custom font in Ionic 4 unsuccessful.
My method is similar that I was using in v3:

  1. Create a file named theme/museo-sans-rounded.scss with my all custom font-face properties
  2. Import this file into theme/variable.scss: @import ‘museo-sans-rounded’;
  3. Add a new property --ion-font-family: ‘Museo Sans Rounded’; inside :root {} in theme/variable.scss

But the custom font isn’t displayed correctly. Ionic keeps using the default font instead my custom font.

49

I didn’t see any documentation about this topic.

1 Like

Old question but second result at Google, so putting

:root,
:root[mode='ios'],
:root[mode='md'] {
  --ion-font-family: 'Lato-Light', sans-serif !important;
  font-family: 'Lato-Light', sans-serif !important;
}

into variables.scss, works well.

3 Likes