How to change the font of all texts in ionic?

1

Question 1:
I want to change the font of every text in my project to a custom font.

Do i have to make a css rule for each and every html element?
Like:

 h1, h2, button, .... {
    font-face: "MyCustomFont"
}

or is there a global config that I can change?

Question 2:
if i set it to a custom font, will it be okay on Android, iOS, wp8 platforms?
My custom font works when I test on browser with ionic serve but not on emulator/device, is there any additional step to make a custom font work on these platforms?

Thanks.

1 Like
2

if you add a fonts folder to your www it should place it in your platforms when you add the platforms and emulate, if not you will need to add the font to your platforms folder for it to emulate and be in your builds

yourapp/platforms/android(or ios)/assets/www/font

1 Like
3

  1. To change the font for the whole application you need to use sass.

    ionic setup sass

Then open scss/ionic.app.scss
And to change for the whole app you can set the sass var like:

@import url(http://fonts.googleapis.com/css?family=Oxygen);
$font-family-base: "Oxygen", sans-serif !default;
  1. Like @lkpttrsn says, you can just add the font folder for your custom font in the www folder and refer to it in your sass above. You can use this link to generate a set of font and css files to include in your project if you wanted to embed the font files, alternatively you can use the google fonts method above and it’ll load it from the internet.
8 Likes
4

dont work from me


// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: "../lib/ionic/fonts"; //!default;

@import url(https://fonts.googleapis.com/css?family=Arima+Madurai|Lato|Pacifico);

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

// $font-family-base: "Lato", sans-serif !default;
// $font-family-base: "Arima Madurai", cursive !default;
$font-family-base: "Pacifico", cursive !default;
5

did you got it to work? facing the same problem

6

only work with local fonts. i downloaded fonts and works fine!!!

7

can you please explain for ionic 2

8

I could only get this working by downloading the font from google and storing it my app, which tbh is probably better for app load time. Then in your scss file:

@font-face {
font-family: AppFont;
src: url("
/assets/fonts/RobotoCondensed-Regular.ttf");
}

body, span, button, h1, h2, h3, h4, h5, h6 {
font-family: ‘AppFont’ !important;
}

9

I tried this fix but only the header tags work. The form and

doesn’t change. Any thoughts?

10

I hope, you have figured it out by now. Just in case, if others too are wondering how to get forms and headers updated, you can just add ion-title, ion-item elements too, like so:

@font-face {
font-family: AppFont;
src: url("
/assets/fonts/RobotoCondensed-Regular.ttf");
}

body, span, button, h1, h2, h3, h4, h5, h6, p, ion-item, ion-title {
font-family: ‘AppFont’ !important;
}

Basically, just do an inspect element of where you want the font to get updated and add that element.

Cheers!

4 Likes
11

This worked for me:
Paste this in.

app.scss

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

* {
  font-family: 'Humanst';
}

Refrence

4 Likes
12

Thanks.
It works with me too :slight_smile:

13

in folder theme > variables.scss >add code

@font-face {
font-family: AppFont;
src: url("
/assets/fonts/SUPERMARKET.TTF");
}

$font-family-ios-base: “AppFont”;
$font-family-md-base:“AppFont”;
$font-family-wp-base:“AppFont”;

3 Likes
14

In case anyone using Ionic 4/5 comes across this,
Set the --ion-font-family in root: after you’ve loaded the font face.
You can also change the text colour for the app if needed at the same time :slight_smile:

ie

@font-face {
font-family: “alegreya_sansregular”;
src: url("/assets/fonts/alegreyasans-regular-webfont.woff2") format(“woff2”);
font-weight: normal;
font-style: normal;
}
:root {
–ion-text-color: var(–ion-color-dark);
–ion-font-family: “alegreya_sansregular”;
}

15 
@font-face {
  font-family: "Champagne & Limousines Bold";
  src: url("../font/Champagne&LimousinesBold.ttf");
  font-weight: 200;
  font-style: normal;
}

:root,
:root[mode="ios"],
:root[mode="md"] {
  --ion-font-family: "Champagne & Limousines Bold", sans-serif !important;
  font-family: "Champagne & Limousines Bold", sans-serif !important;
}

change it on variables css file

2 Likes