Google Fonts in Ionic 2

问题

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?

回答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';
}

回答2:

According to https://forum.ionicframework.com/t/how-to-change-the-font-of-all-texts-in-ionic/30459/8 changing the default $font-family (by the way you need to add !default tag to the declaration) only worked with downloaded fonts. So you could try that and download the fonts into your app instead of referencing uri.

来源：https://stackoverflow.com/questions/41340925/google-fonts-in-ionic-2