How to get Ionic to automatically use custom fonts in their right size?


#1

Hi everyone.

TLDR: Even though I imported my custom fonts and they are working, all headers buttons parapgraphs (all elements) have the same font size. How can I get Ionic to automatically use the right font size for the components, just like it does without a custom font?

I just imported my custom font. I tried it using two approaches.
The first one was with several .ttf files each for a specific boldness of the font. I saved these files in the assets/fonts folder.
Then for each font I importet a font-face:

@font-face {
    font-family: 'Muli';
    src: url('../assets/fonts/Muli-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Muli';
    src: url('../assets/fonts/Muli-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Muli';
    src: url('../assets/fonts/Muli-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

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

@font-face {
    font-family: 'Muli';
    src: url('../assets/fonts/Muli-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Muli';
    src: url('../assets/fonts/Muli-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Muli';
    src: url('../assets/fonts/Muli-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Muli';
    src: url('../assets/fonts/Muli-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'Muli';
    src: url('../assets/fonts/Muli-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Muli';
    src: url('../assets/fonts/Muli-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Muli';
    src: url('../assets/fonts/Muli-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Muli';
    src: url('../assets/fonts/Muli-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Muli';
    src: url('../assets/fonts/Muli-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

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

Then I imported the bases into vaiables.scss

$font-family-base: 'Muli';
$font-family-ios-base: 'Muli';
$font-family-md-base: 'Muli';
$font-family-wp-base: 'Muli';

This didn’t work. The app used the font, but it didn’t use it dynamically.
The second appraoch was to just use a single woff2 file.
I imported it again as a font-face:

@font-face {
  font-family: 'Muli';
  src: url('../assets/fonts/muli.woff2');
}

And kept the imports of the base font in variables.scss.

Same behaviour. The app still uses the font but doesn’t automatically use the right font sizes.

Any help would be much appreciated!