# Ionic 5 changing default font family

**URL:** <https://forum.ionicframework.com/t/ionic-5-changing-default-font-family/187141>\
**Category:** Ionic Framework\
**Created:** [April 12, 2020, 3:57pm UTC](https://forum.ionicframework.com/t/ionic-5-changing-default-font-family/187141 "2020-04-12T15:57:22Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![abdosaeed](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/abdosaeed/32/123391_2.png) [@abdosaeed](https://forum.ionicframework.com/u/abdosaeed)\
**Post date:** [April 12, 2020, 3:57pm UTC](https://forum.ionicframework.com/t/ionic-5-changing-default-font-family/187141/1 "2020-04-12T15:57:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![janithRS](https://avatars.discourse-cdn.com/v4/letter/j/ba8739/32.png) [@janithRS](https://forum.ionicframework.com/u/janithRS)\
**Post date:** [July 23, 2020, 2:22pm UTC](https://forum.ionicframework.com/t/ionic-5-changing-default-font-family/187141/2 "2020-07-23T14:22:07Z")

</div>

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’;\*\*  
**}**

---

<div class="post-metadata">

**Author:** ![utkarshan123](https://avatars.discourse-cdn.com/v4/letter/u/34f0e0/32.png) [@utkarshan123](https://forum.ionicframework.com/u/utkarshan123)\
**Post date:** [March 12, 2024, 7:17am UTC](https://forum.ionicframework.com/t/ionic-5-changing-default-font-family/187141/3 "2024-03-12T07:17:09Z")

</div>

this solution work for me thanku

---

<div class="post-metadata">

**Author:** ![raman004](https://avatars.discourse-cdn.com/v4/letter/r/73ab20/32.png) [@raman004](https://forum.ionicframework.com/u/raman004)\
**Post date:** [March 15, 2024, 12:06am UTC](https://forum.ionicframework.com/t/ionic-5-changing-default-font-family/187141/4 "2024-03-15T00:06:43Z")

</div>

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.