DAG DAG - 5 months ago 36
Sass (Sass) Question

Ionic2 $font-family-base not working

The variable

in Ionic2 is not working.

In the
file I added a new value to it, but the old value remains.

Other variables like
is working fine

Those are my gulp tasks for building

gulp.task("fonts", function () {
return copyFonts({
src: [

gulp.task("sass", function () {
return buildSass({
sassOptions: {
includePaths: [

What am I missing?

That is my font-faces

@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");

This font-faces are in my
file which is referenced in my


// http://ionicframework.com/docs/v2/theming/

// App Shared Imports
// --------------------------------------------------
// These are the imports which make up the design of this app.
// By default each design mode includes these shared imports.
// App Shared Sass variables belong in app.variables.scss.
@import "../app";

@import "../users/sus/sus";
@import "../users/sus/home/home";
@import "../users/sus/subjects/german/german";
@import "../users/sus/subjects/math/math";


If I do it using specific device sass variable i.e:

  • $font-family-md-base

  • $font-family-ios-base

  • $font-family-wp-base

Tha is a wird behavior, but I guess the
has to be set in a specific order or file, what I still didn't figure out.

Answer Source

I've just asked Mike (from Ionic Team) and he told me:

$font-family-ios-base is for when it is on an ios device

And the same applies for




But I think the key is that:

$font-family-base is when it's neither ios or md

I think this explains the behaviour you were talking about. So in your case you would need to change the value of that font in


or any of them to make it work.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download