In this post, I will be showing you to change font in any Ionic 2/3 application. To start with, I will be setting up a new ionic project such that you can refer back to on Gituhb. in to the new project created by the above Ionic CLI command and run to see the blank template with just a homepage available. As of now, the Ionic application looks like this: cd ionic serve The font here used in the application at global level is default. We will be changing it to . It’s just a random suggestion, you can pick whatever you want but I’d suggest, if you are doing for the first time or new to Ionic development, pick a font in which you can see the changes reflected in the app. Revalia After selecting the font, open the highlighted link in the screenshot above, in a new tab. Again, open the link provided in the section, just like in the above image and download or save the file directly in you ionic project. latin The location to save the file will be . Create a new directory in the folder if not available. Place the file there, and rename it as per your convenience. YOUR-IonicApp > src/assets/fonts fonts assets Now since we want this font to be used at the global level of application, open in and first include the local file of the font we want to use and then use that font at global level by using an asterisk as css-selector: app.scss src/app * Run the ionic application with: Output: To get the full code, you can visit . this Github Repository If you like this article, please clap 👏 . Thank you!

Google

What is Ionic?

Setup Nodemon to auto restart Nodejs application server

Newsletter

Using Google Fonts in an Ionic Application

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

5 things I learnt from Steal Like An Artist

The 💩 Poop Emoji's 10th Anniversary

107 Stories To Learn About Search Engine

10 Tools That Will Boost Your #Productivity

10 Google Artificial Intelligence Tools Available to Everyone

5 things I learnt from Steal Like An Artist

The 💩 Poop Emoji's 10th Anniversary

107 Stories To Learn About Search Engine

10 Tools That Will Boost Your #Productivity

10 Google Artificial Intelligence Tools Available to Everyone

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps