24

I know this question is asked and answered before in the links below. I want to change the default font without having to add to every css.

Things I have tried:

  1. Changing the .tff, .eot, .woff, .svg file directly to merge my fonts and ionicons
  2. Tried to implement the font by specifying it in html and css file (it works, but i want it to be default)
  3. Overwrite the www/lib/ionic/fonts with open-sans font (the ionicons disappear)
  4. When i use the first link (all formatting is gone, only left with text and buttons) I also tried placing the font-face on top and bottom in scss/ionic.app.scss

Please help! The answers i have seen are instructions but no explanation how it works. I don't know how "ionic setup sass" works/what it does. How gulp plays a part in this.

https://forum.ionicframework.com/t/how-to-change-the-font-of-all-texts-in-ionic/30459

https://forum.ionicframework.com/t/change-font-family-and-use-ionicons-icons/26729

Sherlin
  • 293
  • 1
  • 2
  • 5

7 Answers7

35

The correct solution for Ionic 2 should be to change the $font-family-base variable and its friends. That's the way Ionic is made to do it. It gives you more control (like having different fonts per platform), and it avoids the !important keyword, which is always a good thing.

Using Ionic 3.3, go to your variables.scss and find the section "Shared variables". Add these lines:

$font-family-base: 'MyFont';
$font-family-ios-base: 'MyFont';
$font-family-md-base: 'MyFont';
$font-family-wp-base: 'MyFont';
Coo
  • 1,842
  • 3
  • 19
  • 37
  • Where did you put the font files ? & how did you import them? – Melchia Feb 02 '18 at 12:58
  • I created a _fonts.scss that I import in variables.scss. The fonts themselves exist in the assets folder. The content of _fonts.css is generated by transfonter.org. This is not necessarily the right way, it's just a possible solution. – Coo Feb 03 '18 at 11:52
22

For Ionic 4

There are global variables that are shared across components. --ion-font-family is one of them. Add this in property under :root in variables.scss:

  :root {
      --ion-font-family: 'MyFont';
  }

Ionic 4 Docs: Advanced Theming Documentation

Community
  • 1
  • 1
codeherk
  • 1,609
  • 15
  • 24
20

Import all the font files in to your app.

Example:

@font-face {
    font-family: 'Lato-Light';
    src: url('../fonts/Lato-Light.eot') format('embedded-opentype'), url('../fonts/Lato-Light.woff') format('woff'), url('../fonts/Lato-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

If you want this font in entire app ,Just give like this

* {
    font-family: 'Lato-Light' !important;
}

If you have any doubt.Please let me know.Thanks

Muhsin Keloth
  • 7,855
  • 7
  • 39
  • 59
  • 3
    A problem with this approach is that my fontawesome icons don't work because of the !important directive. – Robert Ngetich Sep 02 '16 at 07:05
  • 3
    what worked for me was to leave out !important and to modify the $font-family-sans-serif and $font-family-light-sans-serif variables in _variables.scss so that my font is first on the list. – Robert Ngetich Sep 02 '16 at 07:46
11

You don't want to replace the icon font by the way, so you should use the CSS3 not() property

For example, in app.scss :

  @import url(https://fonts.googleapis.com/css?family=Varela+Round);

  *:not(ion-icon) {
    font-family: 'Varela Round', sans-serif!important;
  }
glemiere
  • 4,790
  • 7
  • 36
  • 60
5

For Ionic 2: Download the fonts from fonts.google.com and paste it in your assets folder. Now in your scss file do the following:

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

body, span, button, h1, h2, h3, h4, h5, h6, p, ion-item, ion-title {
font-family: 'MyFont' !important;
}
Surya Shukla
  • 116
  • 1
  • 6
0

You can simply include your icons as svg format.

Here's a list with all the latest ionicons: https://github.com/Orlandster1998/ionicons-svg

Orlandster
  • 4,706
  • 2
  • 30
  • 45
0

as stated above for me adding the following lines in global.scss file worked. It works also taking the !important out. Initially it was not working as the url I put was incorrect. The url below is the right url if you have put your custom font inside a folder called fonts inside assets which you find in folder src. In my case I had made a mistake in the url initially and when I was pointing to '/fonts/MonumentGrotesk-Mono.ttf' it was not showing errors but showing Times New Roman font for the whole App. Then changing to the right url '/assets/fonts/MonumentGrotesk-Mono.ttf' worked brilliantly.

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



  * {
      font-family: 'MonumentGrotesk-Mono' !important;
    }
Pietro
  • 127
  • 6