css - Can’t set custom font when using SASS - Ionic framework -
i set custom font using sass. able when using default configuration style.css file when try run same code on ionic.app.scss 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 of ionic @import "www/lib/ionic/scss/ionic"; .login_title { font-family: "bariol_regular"; text-align: center; }
the scss compiled correctly, font of login-title class doesn't display right font, ionic default font.
whats happening css being called after ionic styles, , getting priority on change.
place .login_title, , future style changes, above ionic @import
Comments
Post a Comment