title: Ionic2 $font-family-base not working
body: <p>The variable <code>$font-family-base</code> in Ionic2 is not working.</p>
  
  <p>In the <code>app.variable.scss</code> file I added a new value to it, but the old value remains.</p>
  
  <p>Other variables like <code>$font-size-base</code> is working fine</p>
  
  <p>Those are my gulp tasks for building <code>www</code>:</p>
  
  <pre><code>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"
              ]
          }
      });
  });
  </code></pre>
  
  <p>What am I missing?</p>
  
  <p>That is my <strong>font-faces</strong></p>
  
  <pre><code>@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");
  }
  </code></pre>
  
  <p>This <strong>font-faces</strong> are in my <code>app.scss</code> file which is referenced in my <code>app.core.scss</code></p>
  
  <p><strong>app.core.scss</strong>:</p>
  
  <pre><code>// 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";
  </code></pre>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>If I do it using specific device sass variable i.e:</p>
  
  <ul>
  <li>$font-family-md-base</li>
  <li>$font-family-ios-base</li>
  <li>$font-family-wp-base</li>
  </ul>
  
  <p>Tha is a wird behavior, but I guess the <code>$font-family-base</code> has to be set in a specific order or file, what I still didn't figure out.</p>