ChrizTalk

Using Google Fonts in Ionic 2

February 8, 2017ChrizIonic8 comments
If you like it, please share it:

In one of my previous posts I wrote about using Font Awesome as an icon set in Ionic 2 apps. See https://chriztalk.com/ionic-2-font-awesome/.

But what about using other fonts in an Ionic 2 app?

In this blog I will focus on adding a Google Font to you Ionic 2 app, but it should work for any font as long as you have the source files of the font.

It’s a step by step tutorial based on an empty Ionic application.

So let’s get started by creating a new application or cd to your existing application folder.

$ ionic start ionic2GoogleFonts blank --v2
$ cd ionic2GoogleFonts

Go to https://fonts.google.com and select a font you like.

Google Fonts

For this example I use the Barrio font.

Google Fonts Barrio selected

Click the ‘1 Family Selected’ bar on the bottom and you will see something like this:

Google Fonts Barrio url

Open the font url https://fonts.googleapis.com/css?family=Barrio in your browser and you will see something like this:

Google Fonts Barrio woff2 url

Copy the woff2 url from the latin font-face (used for most western-european countries) and open it in your browser.

https://fonts.gstatic.com/s/barrio/v1/N2_l9UdKOoL83CQFCx4DGOvvDin1pK8aKteLpeZ5c0A.woff2

The woff2 file will now be downloaded. For convenience, rename it to barrio.woff2.

Now you should copy this file to your ionic project.

Create a new folder called fonts in the src/assets folder of your project.

Copy barrio.woff2 to the src/assets/fonts folder.

Next we have to define the font in the style sheet.
Add the following lines to the app.scss file in the src/app folder of your Ionic 2 app:

@font-face{
font-family: Barrio;
src: url('../assets/fonts/barrio.woff2') format('woff2');
}
*{
font-family: Barrio;
}

Now when you run the application:

$ ionic serve

You should see something like this:

Ionic 2 Google Fonts

NOTICE: This might not work on older Android devices. Check http://caniuse.com/#search=WOFF2 to see what browser support woff2.

If you want the source files for this app, you can find it here: https://github.com/henkie14/ionic2GoogleFonts

That’s all folks.


If you like it, please share it:
Previous Post Ionic 2 and Firebase Google authentication Next Post Ionic 2 and Font Awesome using Sass

8 comments. Leave new

Dimitri
February 18, 2017 10:14 pm

Thanks for another awesome tutorial! I’ve followed all steps, and don’t seem to work. I’ve pretty much exacted all options to test, any ideas how to track errors/mistakes? Many thanks!

Reply
Chriz
February 19, 2017 12:48 pm

Did you try it by using the GitHub source?
https://github.com/henkie14/ionic2GoogleFonts

Reply
Kaushik Mishra
June 5, 2017 9:47 pm

I tried the same but the app does not load the font in ios emulator

Reply
Maantu Das
June 8, 2017 8:30 am

Thanks. It really helped me.

Reply
Alex
June 14, 2017 8:11 am

Thanks man. This is awesome!!

Reply
Jen
June 25, 2017 1:40 pm

Thanks ?

Reply
SK
August 16, 2017 8:05 pm

I tried the Github source. It doesn’t work on Android 4.4.2, but it works perfectly nice on my latest phone Android 7.1.1. Thanks a lot.

Reply
Anjali Jibhakate
June 13, 2018 12:24 pm

Nice post. It helped me a lot. Thank you ?

Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts

  • Ionic 3 and Firebase Facebook authentication using AngularFire2
  • Ionic 3 and Firebase authentication using AngularFire2
  • Ionic 3, Firebase and AngularFire2
  • Ionic 2 and Font Awesome using Sass
  • Using Google Fonts in Ionic 2

My Ionic 2 Theme

Please have a look at my new Ionic 2 theme.

&copy 2016 ChrizTalk