Bulma: Overriding base typography styles

[5tormTrooper]

This is about the Bulma Docs.

Description

I'm using Bulma with React & GatsbyJS, and I'm having some trouble adjusting the base typography.
Based off the Netlify CMS starter, I have a sass file with the following:

@import "~bulma/sass/utilities/initial-variables"

// insert custom styles...

@import "~bulma"

The Sass file is then imported into layouts/index to serve the styles globally. As far as I can tell that should the correct way to override bulma vars in this setup, but it only appears to work for some things:

// works
$tomato: tomato
$tomato-invert: #fff
$primary: $tomato
$link: $tomato
$primary-invert: $tomato-invert

// does not work
$widescreen-enabled: false
$fullhd-enabled: false
body
  font-size: 24px // style rule appears below the original one, see screenshot

https://cl.ly/2N0f1W0T2K2n

So my questions are:
What is the best way to override _all_ bulma base styles?
Specifically,

• the body font-size
• font styles for the headings (setting a custom Google font and sizing)
• responsive toggles
  My best hack for the headings override is this:

// Typography
@import url('https://fonts.googleapis.com/css?family=Oleo+Script:300,400,700')
$family-serif: 'Oleo Script', 'Helvetica', 'serif'

.content h1,
.content h2,
.content h3,
.content h4
  font-family: $family-serif

[jgthms]

There’s a variable for the body font size. It’s set to 1rem so you could also change the html font size.

For the content headings there’s a variable for the weight but not the family.

[5tormTrooper]

Thanks for getting back to me. Do you think the package could include a variable for the family?

And also, do you think it would be a good idea to extend the documentation on typography a little? I see that I'm not the first to bring up this issue, and it may save future confusion.

Great framework btw 🙂

[jgthms]

Yes, absolutely. Additional variables for customization are always welcome.

Same for the docs! Feel free to make them clearer.

[gamugamu]

I have the same kind of problem:

@import url('https://fonts.googleapis.com/css?family=Nunito');
@import "../node_modules/bulma/sass/utilities/initial-variables";
$family-sans-serif: 'Nunito', sans-serif;
$family-monospace: 'Nunito', sans-serif;

My css generated from sass never take those font change. And there is like no documentation about how to change the font base.

[adakbar]

@gamugamu You may set $body-family directly instead the $family-sans-serif, didn't know why this work even though $body-family should have same value as $family-sans-serif.

[drdreo]

Thanks for this @adakbar. Still failing to work when setting $family-sans-serif directly

[nguyen-michael]

@drdreo

This is a response to a year old comment, BUT for seekers of mysterious CSS issues using this starter (and others), I think I discovered the issue on my end. I am using the same Gatsby starter.

It has to do with PurgeCSS plugin. It can remove CSS that is used at build time. See the documentation for more information on whilelisting selectors, etc.

https://www.gatsbyjs.org/packages/gatsby-plugin-purgecss/

This is not a bulma issue.