CODEWITHSUNDEEP
angularionic-frameworksassionic2ionic3
user2828442
user2828442

Reputation: 2515

Custom font issue in Ionic

Requirement: I need to apply custom font.

Brief explanation: In app.scss we are calling fonts shown below:

@font-face {
  font-family: 'Roboto';
  src: url('../assets/fonts/Roboto/Roboto-Light.ttf') format('ttf');
  font-weight: normal;
  font-style: normal;
}

* {
  font-family: 'Roboto';
}

    // @font-face {
//   font-family: 'Humanst';
//   src: url('../assets/fonts/humanst-webfont.woff2') format('woff2'), url('../assets/fonts/humanst-webfont.woff') format('woff');
//   font-weight: normal;
//   font-style: normal;
// }

// * {
//   font-family: 'Humanst' !important;
// }

When we do ionic serve, this font is not applied, problem doesn't end here, if we comment the Roboto font code and uncomment Humanst, menu icon, back icon, and all other icons also disappear [see top left and top right] as shown in image below.

Why is this happening?

enter image description here

Upvotes: 4

Views: 795

Answers (1)

Melchia
Melchia

Reputation: 24224

Go to variables.scss & add the following code at the end of the file:

@font-face {
   font-family: 'Humanst';
   src: url('../assets/fonts/humanst-webfont.woff2') format('woff2'), url('../assets/fonts/humanst-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 }

$font-family-base: 'Humanst';
$font-family-ios-base: 'Humanst';
$font-family-md-base: 'Humanst';
$font-family-wp-base: 'Humanst';

!important should only be used as a last resort otherwise it will override everything!

Upvotes: 2

Related Questions