$font-family-base not overriding default value

Ionic Framework ionic-v3
1

Hello,

I’m trying to change the font-family and in the app.variables.scss I tried:

$font-family-base: "Maven Pro", sans-serif;

But it does not work. It still remains the default font.

UPDATE:

Using specific variable for specific devices work, but not with the base, see:

@font-face {
  font-family: "Maven Pro";
  font-style: normal;
  font-weight: 400;
  src: local("Maven Pro"), local("Maven-Pro-Regular"), url("#{$font-path}/MavenPro-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Maven Pro";
  font-style: normal;
  font-weight: 500;
  src: local("Maven Pro Medium"), local("Maven-Pro-Medium"), url("#{$font-path}/MavenPro-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "Maven Pro";
  font-style: normal;
  font-weight: 700;
  src: local("Maven Pro Bold"), local("Maven-Pro-Bold"), url("#{$font-path}/MavenPro-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Maven Pro";
  font-style: normal;
  font-weight: 900;
  src: local("Maven Pro Ultra Bold"), local("Maven-Pro-Regular-Ultra-Bold"), url("#{$font-path}/MavenPro-Black.ttf") format("truetype");
}

// $font-family-base: "Maven Pro"; THIS DOES NOT WORK!
$font-family-md-base: "Maven Pro"; // THIS DOES WORK
$font-family-ios-base: "Maven Pro"; // THIS DOES WORK
$font-family-wp-base: "Maven Pro"; // THIS DOES WORK
5 Likes
2

Thank-you for this :+1:

3

hi, would you be able to just write the quick steps on where you placed these. Would really help! Thanks

4

Check my repo out:

https://github.com/dgroh/ionic-v2-long-lists-overlapping-content-above-it