Can’t set custom font when using SASS - Ionic framework

I would like to set a custom font using SASS. I was able to do that when I was using the default configuration with style.css file but when I try to run the same code on ionic.app.scss it doesn't work.

//style.css

@font-face {
font-family: 'Bariol_Regular';
src: url('../lib/ionic/fonts/Bariol_Regular.eot');
src: url('../lib/ionic/fonts/Bariol_Regular.eot') format('embedded-opentype'),
     url('../lib/ionic/fonts/Bariol_Regular.woff2') format('woff2'),
     url('../lib/ionic/fonts/Bariol_Regular.woff') format('woff'),
     url('../lib/ionic/fonts/Bariol_Regular.ttf') format('truetype'),
     url('../lib/ionic/fonts/Bariol_Regular.svg#Bariol_Regular') format('svg');
}

.login_title {
font-family: "Bariol_Regular";
text-align: center;
}

//ionic.app.scss

$ionicons-font-path: "../lib/ionic/fonts" !default;

//Common
@font-face {
    font-family: 'Bariol_Regular';
    src: url("../lib/ionic/fonts/Bariol_Regular.eot");
    src: url("../lib/ionic/fonts/Bariol_Regular.eot") format('embedded-opentype'),
         url("../lib/ionic/fonts/Bariol_Regular.woff2") format('woff2'),
         url("../lib/ionic/fonts/Bariol_Regular.woff") format('woff'),
         url("../lib/ionic/fonts/Bariol_Regular.ttf") format('truetype'),
         url("../lib/ionic/fonts/Bariol_Regular.svg#Bariol_Regular") format('svg');
    font-weight: normal;
    font-style: normal;
}

// Include all of Ionic
@import "www/lib/ionic/scss/ionic";

.login_title {
    font-family: "Bariol_Regular";
    text-align: center;
}

The scss get compiled correctly, but then the font of the login-title class doesn't display the right font, but just the ionic default font.