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

2022 - HackerNoon Contributor of the Year - Low Code

2022 - Most Authentic Developer Advocate of the Year

Newsletter

Using Google Fonts in an Ionic Application

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

5 things I learnt from Steal Like An Artist

The HackerNoon Newsletter: Heres How You Can Code It Forward and Help Out Your Community (11/18/2025)

Google to Invest $40 Billion in Texas for Cloud and AI Infrastructure

The HackerNoon Newsletter: Building a RAG System That Runs Completely Offline (11/13/2025)

Breaking Down the Walls: Rescue Your SPA From Complete Freeze

Rethinking Reactivity: ScrollForge Links UI and Style Through a Single Causal Graph

5 things I learnt from Steal Like An Artist

The HackerNoon Newsletter: Heres How You Can Code It Forward and Help Out Your Community (11/18/2025)

Google to Invest $40 Billion in Texas for Cloud and AI Infrastructure

The HackerNoon Newsletter: Building a RAG System That Runs Completely Offline (11/13/2025)

Breaking Down the Walls: Rescue Your SPA From Complete Freeze

Rethinking Reactivity: ScrollForge Links UI and Style Through a Single Causal Graph

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps