Google Fonts in Ionic 2

Question

I am trying to use Google Fonts in Ionic 2.

After researching Stackoverflow & Ionic Forum, I have imported the font & included the base in the variables.scss as follows

@import url('https://fonts.googleapis.com/css?family=Lato');
$font-family-base: "Lato";
$font-family-md-base: "Lato";
$font-family-ios-base: "Lato";
$font-family-wp-base: "Lato";

Obviously, this is not rendering the font. What am I doing wrong or what else needs to be done?

Answer 1

In case this helps anybody, I needed to get a Google Font to show within my Ionic 2 app. This is how I achieved it:

Go to https://fonts.googleapis.com/css?family=Rajdhani

Get the URL of the woff file

Go to this URL and download the woff file. Put it into your assets/fonts/ directory

Edit app/app.scss and add

@font-face {
  font-family: 'Rajdhani';
  src: url('../assets/fonts/Rajdhani.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

* {
  font-family: 'Rajdhani';
}