Using Google Fonts in Ionic 2

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.

For this example I use the Barrio font.

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

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

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:

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.