Add a New Font into Your Ionic App

Fonts play a key role in providing a sense of what the app is trying to convey. It is, after all, the key identity of the app and how the app directly expresses a message to its users. It can invoke a sense of playfulness, it can also invoke a sense of roughness, and even a sense of serious and meticulousness.

* Let's do together with the step below:

- Step 1: Select fonts that you want to use

The best place to start to look for fonts is Google Fonts: download here

You can have more than 1 type of font in your Ionic app, so go ahead, download a few.

- Step 2: Place your selected fonts inside your assets folder

In a typical Ionic Angular application, the assets folder can be typically be found here:

Myapp/src/assets/

Inside the assets folder, it might be a good idea to create a fonts folder and place the fonts that you have downloaded in there. You have to first unzip the font file and place the .otf, .ttf, .woff or .eot file inside the fonts folder. Don’t just drop the .zip file inside the fonts folder, this will not work. Please remember to unzip the .zip files first and place whatever file inside into the fonts folder.

- Step 3: Import the fonts into your app

Add the following codes into either you global.scss file. In this case I am importing a font name Varela with its file inside my assets/font folder.

@font-face {   
  font-family: 'KhmerOSMuoLight ';    //This is what we are going to call
  src: url('../assets/fonts/KhmerOSMuoLight.ttf');
}@font-face {   
  font-family: 'KhmerOSMuoLight ';  //This is what we are going to call  
  src: url('./assets/fonts/KhmerOSMuoLight.ttf');
}

- Step 4: Use the fonts inside your app

Now that you have successfully added the font file into your app, you can now call these fonts from anywhere in your app through in line styling or through the .scss file. For example, I can set a class in my home.page.scss file to change the fonts inside my <ion-content> like so:

ion-content{ 
  font-family:KhmerOSMuoLight !important;
  font-size:1.1em;
}

In the style above, I have changed all the fonts inside <ion-content> into the KhmerOSMuoLight font (that was imported earlier inside global.scss). Now, the Varela font will be used. If I want to create a special class for the Lato font, I need to add the following:

ion-content{ 
  font-family:KhmerOSMuoLight !important;
  font-size:1.1em;
}.specialDiv{  font-family: KhmerOSMuoLight !important;
  font-size:1.1em;}

And inside your html file:

<ion-content>This will use the KhmerOSMuoLight  font<div class="specialDiv">
   This will use the KhmerOSMuoLight font
</div></ion-content>

Thank You for You Value Time