Change Ionic V1 default font


#1

I need help , how to change ionic V1 whole app default font , please if anyone has done this to share .
many thanks in advance.


#2

This one could be usable :


Hope it helps you.


#3

@Youtch thank you but the issue not solved, it seems the default font override the on i added to my CSS , i am not able to find from where ionic.scss read the data .the inspection shown ionic.scss:4 when i try to edit this file it shown empty even after i add the whole project to chrome workspace


#4

@Youtch update … the font applied successfully on all page elements but the header bar is not changed, do you have an idea how to do it ? thanks for your time to help


#5

Could you share your header bar’s code ?
Maybe can you try to override the header bar’s class of your header as that :
<h1 class="headerClass">Your Title</h1>
Description in scss
.headerClass{ font-family: YourFont }


#6

@Youtch , what i want is change ion-header bar title default font “app header bar” , there is no special code from my side , when i serve my app ion-header take ionic default font.
the default font is : font-family: RobotoDraft,Roboto,“Helvetica Neue”,“Segoe UI”,sans-serif;


#7

@Youtch —Update , it works fine now , what i did , i have added the below code to Css file

.MyFont *
{
  
   
  font-family: 'Cairo-Light' !important;


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

and then in my view i have add class to <ion-view class="MyFont" > so this style will effect only the elements i want.
many thanks @Youtch you inspired me to use classes .