Utilizing Google Fonts in an Ionic Software by Aman Mittal

On this submit, I will likely be exhibiting you to alter font in any Ionic 2/3 software. To begin with, I will likely be establishing a brand new ionic undertaking such which you could refer again to on Github.

$ ionic begin ionic-use-google-fonts clean

cd in to the brand new undertaking created by the above Ionic CLI command and run ionic serve to see the clean template with only a homepage obtainable. As of now, the Ionic software appears like this:

The font right here used within the software at international degree is default. We will likely be altering it to Revalia. It’s only a random suggestion, you may decide no matter you need however I’d recommend, if you’re doing for the primary time or new to Ionic improvement, decide a font in which you’ll be able to see the adjustments mirrored within the app.

After choosing the font, open the highlighted hyperlink within the screenshot above, in a brand new tab.

Once more, open the hyperlink offered within the latin part, similar to within the above picture and obtain or save the file straight in you ionic undertaking.

The situation to save lots of the file will likely be YOUR-IonicApp > src/belongings/fonts. Create a brand new listing fonts within the belongings folder if not obtainable. Place the file there, and rename it as per your comfort.

Now since we wish this font for use on the international degree of software, open app.scss in src/app and first embrace the native file of the font we need to use after which use that font at international degree by utilizing an asterisk * as css-selector:

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

Run the ionic software with:

Output:

To get the total code, you may go to this Github Repository.

Initially Revealed at Hackernoon.com