Unable to apply Google Font to Ionic2 project

Question

I am unable to apply Google Fonts API to my Ionic2 project. Here's what I tried:

app.scss

@font-face {
  font-family: 'Yanone Kaffeesatz', sans-serif !important;

}

html, body {
  font-family: 'Yanone Kaffeesatz', sans-serif !important;
}

index.html

<link href="https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" rel="stylesheet">

Why isn't it working?

Answer 1

app.scss

@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);

// Font Variables
$yanone-kaffeesatz: 'Yanone Kaffeesatz', sans-serif !important;

// Styles
html, body {
  font-family: $yanone-kaffeesatz;
}

local use

assets/custom-fonts/YanoneKaffeesatz-Regular.ttf

on theme/variables.scss

@font-face {
  font-family: 'yanone-kaffeesatz';
  src: url('../assets/custom-fonts/YanoneKaffeesatz-Regular.ttf') format('truetype');
}