Ionic 5 changing default font family

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

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

this solution work for me thanku

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.