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.
8 comments. Leave new
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!
Did you try it by using the GitHub source?
https://github.com/henkie14/ionic2GoogleFonts
I tried the same but the app does not load the font in ios emulator
Thanks. It really helped me.
Thanks man. This is awesome!!
Thanks ?
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.
Nice post. It helped me a lot. Thank you ?