Blockbase v2 – Changes to font families

Blockbase v2 contains a breaking change from this PR. This modifies the way that fonts work, which should make it easier for child themes to implement their own fonts.

In Blockbase v1, changing the fonts in a child theme had a few limitations:

  1. The blocks that implemented “body” and “heading” font families were fixed. For example, you couldn’t set a heading font on paragraph block without having a very confusing experience in the Customizer
  2. The approach required every child theme to declare all the “heading fonts” in its theme.json, which meant that the theme.json changes for setting a font family were large.

Blockbase defines two font slugs: body-font, which is used for the main body of text, and heading-font which is used for h1, h2, h3, h4, h5 and h6 elements, Post Title blocks, Button blocks, and Pullquote blocks.

To implement these fonts a child theme simply needs to redefine the fontFamilies array in theme.json, like this:

"fontFamilies": [
		"fontFamily": "'Fira Sans', Helvetica, Arial, sans-serif",
		"fontSlug": "fira-sans",
		"slug": "body-font",
		"name": "Body (Fira Sans)",
		"google": "family=Fira+Sans:ital,wght@0,100..900;1,100..900"
		"fontFamily": "'Playfair Display', Georgia, Times, serif",
		"fontSlug": "playfair-display",
		"slug": "heading-font",
		"name": "Heading (Playfair Display)",
		"google": "family=Playfair+Display:ital,wght@0,400..900;1,400..900"

Any themes that were built with Blockbase v1 will need to be updated. See this PR for an example of the changes required.

This change gives child themes more freedom to control which blocks and elements will use the heading font and which will use the body font. This should allow more diversity in all Blockbase child themes.

Leave a Reply

%d bloggers like this: