Ionic 5 changing default font family

Ionic Framework
1

Hi
my ionic version is 6.5.0
i did next:
1- in assets folder, i create folder named fonts
2- in global.scss, i put next code

@font-face {
font-family: ‘appfont’;
font-style: normal;
font-weight: normal;
src: url(’./assets/fonts/Sofia\ Pro\ SemiBold.ttf’);
}

3- in pages i scss file i put next

  • {
    font-family: “appfont”;
    }

but the font not worked for me, please help

3 Likes
2

Hi @abdosaeed

You should add this to your variables.scss

@font-face {
font-family: AppFont;
src: url("…/assets/fonts/Oxygen-Regular.ttf"); //change url accordingly
}

:root {
** --ion-font-family: ‘AppFont’;**
}

8 Likes
3

this solution work for me thanku

4

Try clear the cache of the browser and ionic server to make the changes apply. Check your browser console for error related to the font loading.