DAG DAG - 1 month ago 8
Sass (Sass) Question

Ionic2 $font-family-base not working

The variable

$font-family-base
in Ionic2 is not working.

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

Other variables like
$font-size-base
is working fine

Those are my gulp tasks for building
www
:

gulp.task("fonts", function () {
return copyFonts({
src: [
"app/fonts/**/*.+(eot|ttf|woff|woff2|svg)"
]
});
});

gulp.task("sass", function () {
return buildSass({
sassOptions: {
includePaths: [
"node_modules/ionic-angular",
"node_modules/ionicons/dist/scss"
]
}
});
});


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
app.scss
file which is referenced in my
app.core.scss


app.core.scss:

// 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";


UPDATE:

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
$font-family-base
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

$font-family-md-base

and

$font-family-wp-base

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

$font-family-md-base
$font-family-ios-base
$font-family-wp-base

or any of them to make it work.