How to change font globally?


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?


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: