ionic 4 and --ion-font-family

2
votes

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!

1
fontsionic4

1 Answers

1
votes

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;