ionic change default font

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';

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

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

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;
  }