ionic 4 and --ion-font-family

Question

I want to add a new font to ionic 4 but I have a strange problem with --ion-font-family.

• Steps:
• 1: I dowloaded and set my custom font Roboto-Light in the assets/font folder

• 2: I updated variables.css with code below

  @font-face { font-family: 'Roboto-Light'; src: url('../assets/font/Roboto-Light.ttf') format('truetype'); font-weight: normal; font-style: normal; }

  --ion-font-family: "Roboto" , "Helvetica-Neue", "sans-serif", "Roboto-Light" !important;

I used google inspector to discover what ionic fonts are used by default and it was "Roboto" , "Helvetica-Neue", "sans-serif". Ok. Now the font-family use a fallback strategy. That is to say, it try the first, if the browser does not support, it try the next and so on.

So now, my problem: If a had "Roboto-Light" at the end of --ion-font-family, it should not be taken at the primary font ! And it is the case ...

I really don't understand and any help will be greatly appreciated!

Answer 1

I maybe too late to answer, but for those who encounters the same issue, I managed to solve the same problem by adding additional "font-family" tag. So the CSS looks like:

/* Apply the global font style */
body {
    font-family: 'MyFont', Arial, sans-serif !important;
    --ion-font-family:: 'MyFont', Arial, sans-serif !important;
}

Answer 2

I'm not sure if this is the complete solution but you have a mistake in your css:

--ion-font-family: "Roboto" , "Helvetica-Neue", "sans-serif", "Roboto-Light" !important;

The generic-family should always go last:

--ion-font-family: "Roboto" , "Helvetica-Neue", "Roboto-Light", sans-serif !important;