How to change font globally?

Ionic Framework ionic-v3
1

If I add this to each page’s scss file it is working for that page:

page-home {
font-family: ‘Josefin Sans’;
font-size: 0.5em;
}

But if I added this to app/app.scss, it changes font size, but not font family.

body {
font-family: ‘Josefin Sans’;
font-size: 1.0em;
}

How can I change font family for all pages?

1 Like
2

You can overwrite this sass variables in ‘/src/theme/variables.scss’:

  • $font-family-ios-base
  • $font-family-md-base
  • $font-family-wp-base

For example:

$font-family-ios-base: "Josefin Sans", -apple-system, "Helvetica Neue", "Roboto", sans-serif;
$font-family-md-base: "Josefin Sans", "Roboto", "Helvetica Neue", sans-serif;
$font-family-wp-base: "Josefin Sans", "Segoe UI", "Noto Sans", sans-serif;

There’s a related topic: