Using Google Fonts in an Ionic Application

Nov 9, 2017

2 min read


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 Github.

GNU Bash icon

$ ionic start ionic-use-google-fonts blank

cd in to the new project created by the above Ionic CLI command and run ionic serve to see the blank template with just a homepage available. As of now, the Ionic application looks like this:

The font here used in the application at global level is default. We will be changing it to Revalia. 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.

After selecting the font, open the highlighted link in the screenshot above, in a new tab.

Again, open the link provided in the latin section, just like in the above image and download or save the file directly in you ionic project.

The location to save the file will be YOUR-IonicApp > src/assets/fonts. Create a new directory fonts in the assets folder if not available. Place the file there, and rename it as per your convenience.

Now since we want this font to be used at the global level of application, open app.scss in src/app 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:

CSS icon

1@font-face {
2 font-family: 'Revalia';
3 src: url('../assets/fonts/revalia.woff2') format('woff2');
6* {
7 font-family: Revalia;

Run the ionic application with:

GNU Bash icon

$ ionic serve


To get the full code, you can visit this Github Repository.

Originally Published at

⬅️ Previous: Multi Page Navigation in an Ionic App

Next: Basic Navigation in Ionic Applications ➡️

Enjoyed this post? Sign up to my newsletter!

A periodic update about my recent blog posts and tutorials. Join 1300+ devs!

No spam, unsubscribe at any time!

Subscribe on Revue

HomeBlogNewsletterAbout meSpeakingEmail

©  2019-2022 Aman Mittal · All Rights Reserved