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.

  src: url('../assets/fonts/aileron.woff') format('woff');

Answer 1

This is how I managed to add a custom font to my Ionic application

1. Add a directory that contains the font files to the project under the folder src\assets\fonts

   src\assets\fonts\myCustomFont
    |
    +-- MyCustomFontBold.ttf
    +-- MyCustomFontBoldItalic.ttf
    +-- MyCustomFontItalic.ttf
    +-- MyCustomFontRegular.ttf
   

2. Define the fonts in the file src\theme\variables.scss:

   @font-face {
     font-family: 'My Custom Font';
     font-style: normal;
     font-weight: normal;
     src: url('../assets/fonts/myCustomFont/MyCustomFontRegular.ttf');
   }
   
   @font-face {
     font-family: 'My Custom Font';
     font-style: normal;
     font-weight: bold;
     src: url('../assets/fonts/myCustomFont/MyCustomFontBold.ttf');
   }
   
   @font-face {
     font-family: 'My Custom Font';
     font-style: italic;
     font-weight: normal;
     src: url('../assets/fonts/myCustomFont/MyCustomFontItalic.ttf');
   }
   
   @font-face {
     font-family: 'My Custom Font';
     font-style: italic;
     font-weight: bold;
     src: url('../assets/fonts/myCustomFont/MyCustomFontBoldItalic.ttf');
   }
   

3. In the same file src\theme\variables.scss, edit the :root element to define your custom font as the font of the Ionic application:

   --ion-font-family: 'My Custom Font';