How do I install new fonts in Ionic 4?

Question

Does anyone know how to update the font for Ionic 4?

I tried adding the aileron.woff to assets/fonts and putting this in the variables.scss to no avail.

Answer 1

You seem to be interested in Ionic 4 / Angular.

I just created a test app with template "blank" in Ionic 4.0.0 beta. Here's what I put into variable.sccs to change all fonts across platforms:

:root,
:root[mode=ios],
:root[mode=md] {
  --ion-font-family: "Palatino", "Times New Roman", serif !important;

  font-family: "Palatino", "Times New Roman", serif !important;
}

On my Mac I see "Palatino".

The key is, to use "!important". As far as the Beta goes, theming of fonts is not yet documented. It may be clarified later or the behavior may change in final. Keep this in mind.