HOW TO ADD FONT IN IONIC 4 APPLICATION

Share the post

Hello All, In the last tutorial we had discussed How to redirect from one page to another in Ionic 4. In this tutorial, We will see How to use fonts in the Ionic 4 application?. What are the different steps required to implement new font in the Ionic application? Before we go further, Make sure that you have installed all dependencies & SDK required for the Ionic 4 application. I assume that you know all the basics & you have already created a new Ionic 4 application. In this session, We are going to use google fonts to download new fonts. So, let’s start to implement new font in the Ionic 4 application.

Steps required to implement new font in Ionic 4 application

1. Create a New project in Ionic 4

2. Create a new page in the Ionic 4 application using the following command

ionic g page home

3. Download the new font from the Google font page. In this example, we are using Potta One font which is offered by Google. After download the font family we are getting one zip file. Extract it then you will get the PottaOne-Regular.ttf file.

4. Create new folder fonts under src/assets. Now, copy the PottaOne-Regular.ttf file in this folder.

5. Now open the home.page.scss & copy below code

@font-face {
  font-family: 'Potta font';
  font-style: normal;
  font-weight: normal;
  src: url('../../assets/fonts/PottaOne-Regular.ttf');
}

h2 {
  font-family : 'Potta font';
}

Note : Make sure that name of font-family should be same @font-face => font-family. Here we are using name ‘Potta font’.

font family name should be same

Output

Output

In the above example, We have added HTML TO PDF text added under the h2 tag. Therefore, All text under h2 is applied with the new font.

1 thought on “HOW TO ADD FONT IN IONIC 4 APPLICATION”

Leave a Comment