CODEWITHSUNDEEP
ionic-frameworkfonts
faizy
faizy

Reputation: 739

Font change in ionic

i want to use “Comfortaa” font in my application,to all page(like default font).i used the font using url. like this:

<style>
  @import url('https://fonts.googleapis.com/css?family=Comfortaa');
</style>

in .scss

font-family: 'Comfortaa'

but application is in offline the font did not work in my aaplication.how i can use the font in both offline and online condition. when app is in offline it shows a italic type font. like this

Upvotes: 0

Views: 625

Answers (2)

Manish
Manish

Reputation: 13557

For add custom font in a application 
Do following step:

Add custom font to assets/fonts folder

Add following code to app.scss file

@font-face {
  font-family: 'San Francisco Light';
  font-weight: normal;
  font-style: normal;
  src: url('../assets/fonts/SanFranciscoDisplay-Regular.otf');
}

After In theme/variables.scss file

add variable name
like this:`enter code here`
$font-family-ios-base: "San Francisco Light";
$font-family-md-base:  "roboto";

Upvotes: 1

Husain
Husain

Reputation: 579

First download and put the folder in src/assets/fonts and then in your theme folder write:

 $font-path: "../assets/fonts";
 @font-face {
 font-family: GlobalFont;
 src: url("../assets/fonts/Comfortaa/Comfortaa.ttf");
 }

 body, span, button, h1, h2, h3, h4, h5, h6, p, ion-item, ion-title {

font-family: 'GlobalFont' !important; }

Upvotes: 0

Related Questions