Bulma: Support for secondary font-family

[neovive]

Description

Add the ability to specify a secondary font-family, making it easier to create font combinations for headers and body text.

This will likely require additional Sass variables for $family-secondary and possibly $family-heading and $family-body.

[jimblue]

+1

[bigardone]

+1

[jeanlucaslima]

Updates on that?

[christopherdupont]

+1

[jeanlucaslima]

@jgthms you are self-assigned to this bug, would you like some help on this?

Or is this some pattern of bulma? Just so we can close this issue 😄

[sjclark]

This would be fantastic - I think primarily just having the ability to define a heading font family would be fantastic.

Even just: $title-font-family ? And/or $subtitle-font-family for consistency!

[jeanlucaslima]

ping :-)

[jeturcotte]

cloooosed? but but but but but... hurting for this, presently.

[emcog]

I have a bit of hack which works for me

• First I divided my two fonts into $family-serif and $family-sans-serif.
• $family-primary is declared as serif of sans – what ever you want. In my case $family-serif
• .title class is defined as a different font. In my case this is $family-sans-serif

Dividing into $family-serif and $family-sans-serif isn't necessary but I like, as it follows a convention I can easily understand.

[emkajeej]

@emcog seems to me as the Bulma way of customising. This is how I would do it and there's nothing stopping anyone from using this approach either, I think,

[mlncn]

It seems Bulma should come with a $family-serif by default (it has a $family-sans-serif so many will assume there's a serif family to match) and then a $family-heading. An example could show how to set $family-heading to $family-serif.

[daglundberg]

Support for a secondary font-family for titles in Bulma would change my life basically. Big fat +1

[emcog]

@daggepagge @mlncn

$family-serif: "adobe-garamond-pro", serif
$family-sans-serif: "futura-pt", sans-serif
$family-primary: $family-serif
.title
    font-family: $family-sans-serif

[cyrilchapon]

Hey,

We're facing this, and fighting against with a single .has-alternative-font for now.. (ugly but working)

Regarding multi-family support, IMHO and with experience of our website built with bulma :

• There should be way more than just a heading-family variable
  
  
  
  • button-family could make sense
  
  
  • input-family same
  
  
  • heading-family indeed
  
  
  • some others, maybe
  
  
• The sizing should come with a factor for the alternative font

Example in here, we're using Gotham + Source Sans. Those families don't look the same at the same size (one is more accessible than the other), and Gotham 12 is more like Source Sans 13. Currently, even with our .has-alternative-font this is very annoying.

EDIT: the entire rem strategy could be challenged with that last argument

[cyrilchapon]

Follow up discussion in #2178

which all elements should be included. The suggestion from #349 so far are:

• $button-family
• $title-family
• $subtitle-family?
• $header-family
• $input-family
• $body-family

I just digged into bulma's doc to considered every single thing we can tweak the family on.

• ~Columns~ : nope
• Layout :
  
  
  
  • ~Container~ : nope
  
  
  • ~Level~ : nope
  
  
  • Media : would deserve discussion
  
  
  • ~Hero~ : nope
  
  
  • ~Section~ : nope
  
  
  • Footer : would deserve discussion
  
  
  • ~Tiles~ : nope
  
  
• Form : would deserve discussion : would whold form deserve a variable ?
  
  
  
  • Control : Yes
  
  
  • Input : Yes (inherit Control ?)
  
  
  • Textarea : Yes (inherit Control ?)
  
  
  • Select : Yes (inherit Control ?)
  
  
  • Checkbox : Yes (inherit Control ?)
  
  
  • Radio : Yes (inherit Control ?)
  
  
  • File : Yes (inherit Control ?)
  
  
• Elements
  
  
  
  • Box : would deserve discussion
  
  
  • Button : Yes (inherit Control ?)
  
  
  • Content : I think no... ?
  
  
  • ~Delete~ : nope
  
  
  • ~Icon~ : nope
  
  
  • ~Image~ : nope
  
  
  • Notification : Yes, definately
  
  
  • ~Progress bars~ : Nope for now, careful if we add percentage one day
  
  
  • Table : Yes, and maybe split up th and the rest
  
  
  • Tag : Yes, definately
  
  
  • Title : Yes, definately
  
  
• Components
  
  
  
  • Breadcrumb : Yes
  
  
  • Card : Yes, probably multiples
  
  
  • Dropdown : Yes (inherit Control ?)
  
  
  • Menu : Yes
  
  
  • Message : Yes, probably multiples
  
  
  • Modal : Yes, probably multiples
  
  
  • Navbar : Yes
  
  
  • Pagination : Yes
  
  
  • Panel : Yes
  
  
  • Tabs : Yes
  
  

---

So I sum up

The simple ones

• Button
• Notification
• Tag
• Title
• Breadcrumb
• Menu
• Pagination
• Tabs

The "inherit" ones

• Control ?
• Input
• Textarea
• Select
• Checkbox
• Radio
• File
• Dropdown

The harsh ones

These ones can be hard to anticipate, because they can include some other components / elements which can hold family. Should the parent family take-over the children one ? Or because they could be split into sub families (like message-title and message-content)

• Media
• Footer
• Form
• Box
• Table
• Card
• Menu
• Message
• Modal
• Navbar
• Panel

[lesleslie]

@cyrilchapon I haven't forgot about this. I've been very busy, but doing so, I agree that more of these font family helpers/variables really would be useful. I'll get back on it soon.

[jgthms]

You can now specify a different font-family for the .title, .subtitle and .button by using the variables $title-family, $subtitle-family and $button-family respectively.

By default, they're set to false and don't do anything:

$title-family: false !default

Simply set a value when importing Bulma to add a specific font-family:

$title-family: "Georgia", serif;

[neovive]

Thanks for adding this Jeremy! I completely forgot about this request. Great to see Bulma still going strong years later. It's an excellent framework.

[daglundberg]

Thank you so much for adding this!

[ntwi]

I notice this was mentioned, but would really love to control the heading font family that has a content container. Is this still in the works?

[anitagraham]

I would love to see a $navigation-family.