Blockbase: Simplify the approach to font customization (#4980)

* Blockbase: Simplify our approach to font customization

* remove commented code

* Handle fonts that are customized the old way

* add comments

* update all child themes to use the new font customization settings

* Add a comment about this being a breaking change

* Add a notice when a user has an old version of blockbase

arbutus/theme.json

@@ -47,66 +47,28 @@
 			"fontFamilies": [
 				{
 					"fontFamily": "\"Roboto\", sans-serif",
-					"slug": "roboto",
-					"name": "roboto",
-					"google": "family=Open+Sans:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900"
+					"fontSlug": "roboto",
+					"slug": "body-font",
+					"name": "Body (Roboto)",
+					"google": "family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,800;1,900"
+				},
+				{
+					"fontFamily": "\"Roboto\", sans-serif",
+					"fontSlug": "roboto",
+					"slug": "heading-font",
+					"name": "Headings (Roboto)",
+					"google": "family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,800;1,900"
 				}
 			]
 		}
 	},
 	"styles": {
 		"blocks": {
-			"core/button": {
-				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--roboto)"
-				}
-			},
 			"core/post-title": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--roboto)",
 					"fontSize": "48px"
 				}
-			},
-			"core/pullquote": {
-				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--roboto)"
-				}
 			}
-		},
-		"elements": {
-			"h1": {
-				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--roboto)"
-				}
-			},
-			"h2": {
-				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--roboto)"
-				}
-			},
-			"h3": {
-				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--roboto)"
-				}
-			},
-			"h4": {
-				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--roboto)"
-				}
-			},
-			"h5": {
-				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--roboto)"
-				}
-			},
-			"h6": {
-				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--roboto)"
-				}
-			}
-		},
-		"typography": {
-			"fontFamily": "var(--wp--preset--font-family--roboto)"
 		}
 	}
 }

blockbase/inc/customizer/wp-customize-fonts-control.js

@@ -1,5 +1,7 @@
 wp.customize.bind( 'ready', () => {
 	let resetButton;
+	let fontBodyControl;
+	let fontHeadingControl;
 
 	wp.customize.control(
 		'customize-global-styles-fonts-reset-button',
@@ -12,6 +14,21 @@ wp.customize.bind( 'ready', () => {
 		}
 	);
 
+	// If the body and heading controls are null then the font customization is using
+	// the old format. We need to hide these controls so that the user is forced to
+	// reset to defaults before making other changes.
+	wp.customize.control( 'customize-global-styles-fontsbody', ( control ) => {
+		fontBodyControl = control.container[ 0 ];
+		fontBodyControl.hidden = determineIfNull();
+	} );
+	wp.customize.control(
+		'customize-global-styles-fontsheading',
+		( control ) => {
+			fontHeadingControl = control.container[ 0 ];
+			fontHeadingControl.hidden = determineIfNull();
+		}
+	);
+
 	wp.customize(
 		'customize-global-styles-fontsbody',
 		bindControlToHideResetButton
@@ -24,6 +41,8 @@ wp.customize.bind( 'ready', () => {
 	function bindControlToHideResetButton( control ) {
 		control.bind( () => {
 			resetButton.hidden = false;
+			fontHeadingControl.hidden = false;
+			fontBodyControl.hidden = false;
 		} );
 	}
 
@@ -40,7 +59,19 @@ wp.customize.bind( 'ready', () => {
 		);
 	}
 
+	function determineIfNull() {
+		return ! (
+			wp.customize.settings.settings[
+				'customize-global-styles-fontsbody'
+			].value &&
+			wp.customize.settings.settings[
+				'customize-global-styles-fontsheading'
+			].value
+		);
+	}
+
 	function resetFontSelection() {
+		const shouldWeReload = determineIfNull();
 		wp.customize( 'customize-global-styles-fontsbody', ( item ) => {
 			item.set( fontControlDefaultBody[ 0 ] );
 		} );
@@ -48,5 +79,13 @@ wp.customize.bind( 'ready', () => {
 			item.set( fontControlDefaultHeading[ 0 ] );
 		} );
 		resetButton.hidden = true;
+
+		// If the body and heading controls are null then the font customization is using
+		// the old format. We need to get the user to reset to default and then reload
+		// before they make other customizations.
+		if ( shouldWeReload ) {
+			wp.customize.previewer.save();
+			wp.customize.previewer.refresh();
+		}
 	}
 } );

blockbase/inc/customizer/wp-customize-fonts-preview.js

@@ -13,13 +13,9 @@ if ( fontSettings ) {
 }
 
 function blockBaseUpdateFontPreview() {
-	// Build the new body CSS
-	let innerHTML = 'body{';
-	innerHTML += `font-family:${ fontSettings[ 'body' ] };`;
-	innerHTML += '}';
-	// Build the new heading CSS
-	innerHTML += 'h1,h2,h3,h4,h5,h6,.wp-block-post-title,.wp-block-pullquote{';
-	innerHTML += `font-family:${ fontSettings[ 'heading' ] };`;
+	let innerHTML = 'body {';
+	innerHTML += `--wp--preset--font-family--body-font:${ fontSettings[ 'body' ] };`;
+	innerHTML += `--wp--preset--font-family--heading-font:${ fontSettings[ 'heading' ] };`;
 	innerHTML += '}';
 
 	// Inject them into the body.

blockbase/inc/customizer/wp-customize-fonts.php

@@ -217,15 +217,19 @@ class GlobalStylesFontsCustomizer {
 	}
 
 	function customize_preview_js( $wp_customize ) {
-		wp_enqueue_script( 'customizer-preview-fonts', get_template_directory_uri() . '/inc/customizer/wp-customize-fonts-preview.js', array( 'customize-preview' ) );
-		wp_localize_script( 'customizer-preview-fonts', 'googleFonts', $this->fonts );
-		wp_localize_script( 'customizer-preview-fonts', 'fontSettings', $this->font_settings );
+		if ( $this->fonts && $this->font_settings ) {
+			wp_enqueue_script( 'customizer-preview-fonts', get_template_directory_uri() . '/inc/customizer/wp-customize-fonts-preview.js', array( 'customize-preview' ) );
+			wp_localize_script( 'customizer-preview-fonts', 'googleFonts', $this->fonts );
+			wp_localize_script( 'customizer-preview-fonts', 'fontSettings', $this->font_settings );
+		}
 	}
 
 	function customize_control_js() {
-		wp_enqueue_script( 'customizer-font-control', get_template_directory_uri() . '/inc/customizer/wp-customize-fonts-control.js', array( 'customize-controls' ), null, true );
-		wp_localize_script( 'customizer-font-control', 'fontControlDefaultBody', array( $this->font_control_default_body ) );
-		wp_localize_script( 'customizer-font-control', 'fontControlDefaultHeading', array( $this->font_control_default_heading ) );
+		if ( $this->font_control_default_body && $this->font_control_default_heading ) {
+			wp_enqueue_script( 'customizer-font-control', get_template_directory_uri() . '/inc/customizer/wp-customize-fonts-control.js', array( 'customize-controls' ), null, true );
+			wp_localize_script( 'customizer-font-control', 'fontControlDefaultBody', array( $this->font_control_default_body ) );
+			wp_localize_script( 'customizer-font-control', 'fontControlDefaultHeading', array( $this->font_control_default_heading ) );
+		}
 	}
 
 	function enqueue_google_fonts() {
@@ -233,27 +237,31 @@ class GlobalStylesFontsCustomizer {
 	}
 
 	function create_customization_style_element( $wp_customize ) {
-		wp_enqueue_style( 'global-styles-fonts-customizations', ' ', array( 'global-styles' ) ); // This needs to load after global_styles, hence the dependency
-		$css  = 'body{';
-		$css .= 'font-family:' . $this->font_settings['body'] . ';';
-		$css .= '}';
-		$css .= 'h1,h2,h3,h4,h5,h6,.wp-block-post-title,.wp-block-pullquote{';
-		$css .= 'font-family:' . $this->font_settings['heading'] . ';';
-		$css .= '}';
-		wp_add_inline_style( 'global-styles-fonts-customizations', $css );
+		if ( $this->font_settings ) {
+			wp_enqueue_style( 'global-styles-fonts-customizations', ' ', array( 'global-styles' ) ); // This needs to load after global_styles, hence the dependency
+			$css  = 'body {';
+			$css .= '--wp--preset--font-family--body-font:' . $this->font_settings['body'] . ';';
+			$css .= '--wp--preset--font-family--heading-font:' . $this->font_settings['heading'] . ';';
+			$css .= '}';
+			wp_add_inline_style( 'global-styles-fonts-customizations', $css );
+		}
 	}
 
 	function update_font_settings( $wp_customize ) {
-		$body_value = $wp_customize->get_setting( $this->section_key . 'body' )->post_value();
-		if ( $body_value ) {
-			$body_font_setting           = $this->fonts[ $body_value ];
-			$this->font_settings['body'] = $body_font_setting['fontFamily'];
-		}
+		$body_setting = $wp_customize->get_setting( $this->section_key . 'body' );
+		$heading_setting = $wp_customize->get_setting( $this->section_key . 'heading' );
+		if ( $body_setting && $heading_setting ) {
+			$body_value = $body_setting->post_value();
+			if ( $body_value ) {
+				$body_font_setting           = $this->fonts[ $body_value ];
+				$this->font_settings['body'] = $body_font_setting['fontFamily'];
+			}
 
-		$heading_value = $wp_customize->get_setting( $this->section_key . 'heading' )->post_value();
-		if ( $heading_value ) {
-			$heading_font_setting           = $this->fonts[ $heading_value ];
-			$this->font_settings['heading'] = $heading_font_setting['fontFamily'];
+			$heading_value = $heading_setting->post_value();
+			if ( $heading_value ) {
+				$heading_font_setting           = $this->fonts[ $heading_value ];
+				$this->font_settings['heading'] = $heading_font_setting['fontFamily'];
+			}
 		}
 	}
 
@@ -272,19 +280,6 @@ class GlobalStylesFontsCustomizer {
 
 	function initialize( $wp_customize ) {
 		$theme       = wp_get_theme();
-		$merged_json = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()->get_raw_data();
-		$theme_json  = WP_Theme_JSON_Resolver_Gutenberg::get_theme_data()->get_raw_data();
-
-		$body_font_default    = $this->get_font_family( array( 'styles', 'typography', 'fontFamily' ), $theme_json );
-		$heading_font_default = $this->get_font_family( array( 'styles', 'elements', 'h1', 'typography', 'fontFamily' ), $theme_json );
-
-		$body_font_selected    = $this->get_font_family( array( 'styles', 'typography', 'fontFamily' ), $merged_json );
-		$heading_font_selected = $this->get_font_family( array( 'styles', 'elements', 'h1', 'typography', 'fontFamily' ), $merged_json );
-
-		$this->font_settings = array(
-			'body'    => $body_font_selected['fontFamily'],
-			'heading' => $heading_font_selected['fontFamily'],
-		);
 
 		//Add a Section to the Customizer for these bits
 		$wp_customize->add_section(
@@ -296,9 +291,71 @@ class GlobalStylesFontsCustomizer {
 			)
 		);
 
+		$merged_json = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()->get_raw_data();
+		$theme_font_families = $merged_json['settings']['typography']['fontFamilies']['theme'];
+		$body_font_default_array = array_filter( $theme_font_families, function( $font_family ) {
+			return $font_family['slug'] === "body-font";
+		} );
+		$body_font_default = array_shift( $body_font_default_array );
+		$heading_font_default_array = array_filter( $theme_font_families, function( $font_family ) {
+			return $font_family['slug'] === "heading-font";
+		} );
+		$heading_font_default = array_shift( $heading_font_default_array );
+
+		// See if the child theme has been updated. If not then show a notice.
+		if ( ! $body_font_default && ! $heading_font_default ) {
+			$wp_customize->add_control(
+				$this->section_key . '-v1-blockbase-format-notice',
+				array(
+					'type'        => 'hidden',
+					'description' => '<div class="notice notice-warning">
+					<p>' . __( "Your theme needs to be updated before you can customize fonts", 'blockbase' ) . '</p>
+					</div>',
+					'settings'    => array(),
+					'section'     => $this->section_key,
+				)
+			);
+
+			return;
+		}
+
+		if ( array_key_exists( 'user', $merged_json['settings']['typography']['fontFamilies'] ) ) {
+			$merged_font_families = $merged_json['settings']['typography']['fontFamilies']['user'];
+			$body_font_selected_array = array_filter( $merged_font_families, function( $font_family ) {
+				return $font_family['slug'] === "body-font";
+			} );
+			$body_font_selected = array_shift( $body_font_selected_array );
+
+			$heading_font_selected_array = array_filter( $merged_font_families, function( $font_family ) {
+				return $font_family['slug'] === "heading-font";
+			} );
+			$heading_font_selected = array_shift( $heading_font_selected_array );
+		} else {
+			$body_font_selected = $body_font_default;
+			$heading_font_selected = $heading_font_default;
+		}
+
+		// If there's no selected font then the user is probably using the old format for font customization
+		if ( $body_font_selected && $heading_font_selected ) {
+			$body_font_selected_font_family = $body_font_selected['fontFamily'];
+			$body_font_selected_font_slug = $body_font_selected['fontSlug'];
+			$heading_font_selected_font_family = $heading_font_selected['fontFamily'];
+			$heading_font_selected_font_slug = $heading_font_selected['fontSlug'];
+		} else {
+			$body_font_selected_font_family = null;
+			$body_font_selected_font_slug = null;
+			$heading_font_selected_font_family = null;
+			$heading_font_selected_font_slug = null;
+		}
+
+		$this->font_settings = array(
+			'body'    => $body_font_selected_font_family,
+			'heading' => $heading_font_selected_font_family,
+		);
+
 		// Add a reset button
-		$this->font_control_default_body    = $body_font_default['slug'];
-		$this->font_control_default_heading = $heading_font_default['slug'];
+		$this->font_control_default_body    = $body_font_default['fontSlug'];
+		$this->font_control_default_heading = $heading_font_default['fontSlug'];
 		$wp_customize->add_control(
 			$this->section_key . '-reset-button',
 			array(
@@ -312,8 +369,8 @@ class GlobalStylesFontsCustomizer {
 			)
 		);
 
-		$this->add_setting_and_control( $wp_customize, 'body', __( 'Body font', 'blockbase' ), $body_font_default['slug'], $body_font_selected['slug'], 'sanitize_title' );
-		$this->add_setting_and_control( $wp_customize, 'heading', __( 'Heading font', 'blockbase' ), $heading_font_default['slug'], $heading_font_selected['slug'], 'sanitize_title' );
+		$this->add_setting_and_control( $wp_customize, 'body', __( 'Body font', 'blockbase' ), $body_font_default['fontSlug'], $body_font_selected_font_slug, 'sanitize_title' );
+		$this->add_setting_and_control( $wp_customize, 'heading', __( 'Heading font', 'blockbase' ), $heading_font_default['fontSlug'], $heading_font_selected_font_slug, 'sanitize_title' );
 	}
 
 	function get_font_family( $array, $configuration ) {
@@ -399,8 +456,15 @@ class GlobalStylesFontsCustomizer {
 			$heading_value = $heading_default;
 		}
 
-		$body_setting    = $this->fonts[ $body_value ];
+		$body_setting = $this->fonts[ $body_value ];
+		$body_setting['name'] = "Body (" . $body_setting['name'] . ")";
+		$body_setting['fontSlug'] = $body_setting['slug'];
+		$body_setting['slug'] = "body-font";
+
 		$heading_setting = $this->fonts[ $heading_value ];
+		$heading_setting['name'] = "Heading (" . $heading_setting['name'] . ")";
+		$heading_setting['fontSlug'] = $heading_setting['slug'];
+		$heading_setting['slug'] = "heading-font";
 
 		// Set up variables for the theme.json.
 		$font_families = array(
@@ -427,71 +491,11 @@ class GlobalStylesFontsCustomizer {
 			$font_families
 		);
 
-		// Set the body typography settings.
-		$user_theme_json_post_content = set_settings_array(
-			$user_theme_json_post_content,
-			array( 'styles', 'typography', 'fontFamily' ),
-			$body_font_family_variable
-		);
-
-		$user_theme_json_post_content = set_settings_array(
-			$user_theme_json_post_content,
-			array( 'styles', 'blocks', 'core/button', 'typography', 'fontFamily' ),
-			$heading_font_family_variable
-		);
-
-		// Set the heading typography settings.
-		$user_theme_json_post_content = set_settings_array(
-			$user_theme_json_post_content,
-			array( 'styles', 'elements', 'h1', 'typography', 'fontFamily' ),
-			$heading_font_family_variable
-		);
-
-		$user_theme_json_post_content = set_settings_array(
-			$user_theme_json_post_content,
-			array( 'styles', 'elements', 'h2', 'typography', 'fontFamily' ),
-			$heading_font_family_variable
-		);
-
-		$user_theme_json_post_content = set_settings_array(
-			$user_theme_json_post_content,
-			array( 'styles', 'elements', 'h3', 'typography', 'fontFamily' ),
-			$heading_font_family_variable
-		);
-
-		$user_theme_json_post_content = set_settings_array(
-			$user_theme_json_post_content,
-			array( 'styles', 'elements', 'h4', 'typography', 'fontFamily' ),
-			$heading_font_family_variable
-		);
-
-		$user_theme_json_post_content = set_settings_array(
-			$user_theme_json_post_content,
-			array( 'styles', 'elements', 'h5', 'typography', 'fontFamily' ),
-			$heading_font_family_variable
-		);
-
-		$user_theme_json_post_content = set_settings_array(
-			$user_theme_json_post_content,
-			array( 'styles', 'elements', 'h6', 'typography', 'fontFamily' ),
-			$heading_font_family_variable
-		);
-
-		$user_theme_json_post_content = set_settings_array(
-			$user_theme_json_post_content,
-			array( 'styles', 'blocks', 'core/post-title', 'typography', 'fontFamily' ),
-			$heading_font_family_variable
-		);
-
-		$user_theme_json_post_content = set_settings_array(
-			$user_theme_json_post_content,
-			array( 'styles', 'blocks', 'core/pullquote', 'typography', 'fontFamily' ),
-			$heading_font_family_variable
-		);
-
 		//If the typeface choices === the default then we remove it instead
 		if ( $body_value === $body_default && $heading_value === $heading_default ) {
 			unset( $user_theme_json_post_content->settings->typography->fontFamilies );
+
+			// These lines need to stay for backwards compatibility.
 			unset( $user_theme_json_post_content->styles->typography->fontFamily );
 			unset( $user_theme_json_post_content->styles->elements->h1->typography->fontFamily );
 			unset( $user_theme_json_post_content->styles->elements->h2->typography->fontFamily );

blockbase/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "blockbase",
-  "version": "1.4.2",
+  "version": "2.0.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

blockbase/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blockbase",
-  "version": "1.4.9",
+  "version": "2.0.0",
   "description": "Blank Parent Theme",
   "bugs": {
     "url": "https://github.com/Automattic/themes/issues"

blockbase/readme.txt

@@ -18,6 +18,9 @@ For more information see our README.md file.
 
 == Changelog ==
 
+= 2.0.0 =
+* BREAKING CHANGE: Simplify the approach to font customization #4980
+
 = 1.4.1 =
 * Remove child-theme.json #4861
 

blockbase/style.css

@@ -7,7 +7,7 @@ Description: Blockbase is a simple theme that supports full-site editing. It com
 Requires at least: 5.7
 Tested up to: 5.8
 Requires PHP: 5.7
-Version: 1.4.9
+Version: 2.0.0
 License: GNU General Public License v2 or later
 License URI: https://raw.githubusercontent.com/Automattic/themes/trunk/LICENSE
 Text Domain: blockbase

blockbase/theme.json

@@ -344,8 +344,15 @@
 			"fontFamilies": [
 				{
 					"fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
-					"slug": "system-font",
-					"name": "System Font"
+					"fontSlug": "system-font",
+					"slug": "body-font",
+					"name": "Body (System Font)"
+				},
+				{
+					"fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
+					"fontSlug": "system-font",
+					"slug": "heading-font",
+					"name": "Headings (System Font)"
 				}
 			],
 			"fontSizes": [
@@ -388,7 +395,7 @@
 					"text": "var(--wp--custom--button--color--text)"
 				},
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--system-font)",
+					"fontFamily": "var(--wp--preset--font-family--body-font)",
 					"fontSize": "var(--wp--custom--button--typography--font-size)",
 					"fontWeight": "var(--wp--custom--button--typography--font-weight)",
 					"lineHeight": "var(--wp--custom--button--typography--line-height)"
@@ -432,7 +439,7 @@
 					}
 				},
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--system-font)",
+					"fontFamily": "var(--wp--preset--font-family--heading-font)",
 					"fontSize": "var(--wp--preset--font-size--large)",
 					"lineHeight": "var(--wp--custom--heading--typography--line-height)"
 				}
@@ -511,7 +518,7 @@
 		"elements": {
 			"h1": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--system-font)",
+					"fontFamily": "var(--wp--preset--font-family--heading-font)",
 					"fontWeight": "var(--wp--custom--heading--typography--font-weight)",
 					"lineHeight": "var(--wp--custom--heading--typography--line-height)",
 					"fontSize": "48px"
@@ -525,7 +532,7 @@
 			},
 			"h2": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--system-font)",
+					"fontFamily": "var(--wp--preset--font-family--heading-font)",
 					"fontWeight": "var(--wp--custom--heading--typography--font-weight)",
 					"lineHeight": "var(--wp--custom--heading--typography--line-height)",
 					"fontSize": "32px"
@@ -539,7 +546,7 @@
 			},
 			"h3": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--system-font)",
+					"fontFamily": "var(--wp--preset--font-family--heading-font)",
 					"fontWeight": "var(--wp--custom--heading--typography--font-weight)",
 					"lineHeight": "var(--wp--custom--heading--typography--line-height)",
 					"fontSize": "var(--wp--preset--font-size--large)"
@@ -553,7 +560,7 @@
 			},
 			"h4": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--system-font)",
+					"fontFamily": "var(--wp--preset--font-family--heading-font)",
 					"fontWeight": "var(--wp--custom--heading--typography--font-weight)",
 					"lineHeight": "var(--wp--custom--heading--typography--line-height)",
 					"fontSize": "var(--wp--preset--font-size--medium)"
@@ -567,7 +574,7 @@
 			},
 			"h5": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--system-font)",
+					"fontFamily": "var(--wp--preset--font-family--heading-font)",
 					"fontWeight": "var(--wp--custom--heading--typography--font-weight)",
 					"lineHeight": "var(--wp--custom--heading--typography--line-height)",
 					"fontSize": "var(--wp--preset--font-size--normal)"
@@ -581,7 +588,7 @@
 			},
 			"h6": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--system-font)",
+					"fontFamily": "var(--wp--preset--font-family--heading-font)",
 					"fontWeight": "var(--wp--custom--heading--typography--font-weight)",
 					"lineHeight": "var(--wp--custom--heading--typography--line-height)",
 					"fontSize": "var(--wp--preset--font-size--small)"
@@ -604,7 +611,7 @@
 		},
 		"typography": {
 			"lineHeight": "var(--wp--custom--body--typography--line-height)",
-			"fontFamily": "var(--wp--preset--font-family--system-font)",
+			"fontFamily": "var(--wp--preset--font-family--body-font)",
 			"fontSize": "var(--wp--preset--font-size--normal)"
 		}
 	}

geologist/theme.json

@@ -174,8 +174,16 @@
 			"fontFamilies": [
 				{
 					"fontFamily": "\"DM Sans\", sans-serif",
-					"slug": "dm-sans",
-					"name": "DM Sans",
+					"fontSlug": "dm-sans",
+					"slug": "body-font",
+					"name": "Body (DM Sans)",
+					"google": "family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700"
+				},
+				{
+					"fontFamily": "\"DM Sans\", sans-serif",
+					"fontSlug": "dm-sans",
+					"slug": "heading-font",
+					"name": "Headings (DM Sans)",
 					"google": "family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700"
 				}
 			],
@@ -216,7 +224,6 @@
 					"text": "var(--wp--custom--button--color--text)"
 				},
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--dm-sans)",
 					"fontSize": "var(--wp--custom--button--typography--font-size)",
 					"fontWeight": "var(--wp--custom--button--typography--font-weight)"
 				}
@@ -234,11 +241,6 @@
 					"lineHeight": "1.6"
 				}
 			},
-			"core/navigation": {
-				"typography": {
-					"fontSize": "var(--wp--preset--font-size--normal)"
-				}
-			},
 			"core/navigation-link": {
 				"color": {
 					"background": "transparent",
@@ -247,7 +249,6 @@
 			},
 			"core/post-title": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--dm-sans)",
 					"fontSize": "min(max(48px, 7vw), 64px)",
 					"fontWeight": "var(--wp--custom--heading--typography--font-weight)",
 					"lineHeight": "1.2"
@@ -316,42 +317,36 @@
 		"elements": {
 			"h1": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--dm-sans)",
 					"fontSize": "min(max(48px, 7vw), 80px)",
 					"lineHeight": "1.2"
 				}
 			},
 			"h2": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--dm-sans)",
 					"fontSize": "min(max(36px, 6vw), 65px)",
 					"lineHeight": "1.2"
 				}
 			},
 			"h3": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--dm-sans)",
 					"fontSize": "var(--wp--preset--font-size--large)",
 					"lineHeight": "1.2"
 				}
 			},
 			"h4": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--dm-sans)",
 					"fontSize": "var(--wp--preset--font-size--large)",
 					"lineHeight": "1.4"
 				}
 			},
 			"h5": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--dm-sans)",
 					"fontSize": "var(--wp--preset--font-size--normal)",
 					"lineHeight": "1.4"
 				}
 			},
 			"h6": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--dm-sans)",
 					"fontSize": "var(--wp--preset--font-size--small)",
 					"lineHeight": "1.4"
 				}
@@ -363,7 +358,6 @@
 			}
 		},
 		"typography": {
-			"fontFamily": "var(--wp--preset--font-family--dm-sans)",
 			"fontWeight": "400"
 		}
 	}

kerr/theme.json

@@ -155,8 +155,16 @@
 			"fontFamilies": [
 				{
 					"fontFamily": "\"Work Sans\", sans-serif",
-					"slug": "work-sans",
-					"name": "Work Sans",
+					"fontSlug": "work-sans",
+					"slug": "body-font",
+					"name": "Body (Work Sans)",
+					"google": "family=Work+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700"
+				},
+				{
+					"fontFamily": "\"Work Sans\", sans-serif",
+					"fontSlug": "work-sans",
+					"slug": "heading-font",
+					"name": "Headings (Work Sans)",
 					"google": "family=Work+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700"
 				}
 			],
@@ -197,7 +205,6 @@
 					"text": "var(--wp--custom--button--color--text)"
 				},
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--work-sans)",
 					"fontSize": "var(--wp--custom--button--typography--font-size)",
 					"fontWeight": "var(--wp--custom--button--typography--font-weight)"
 				}
@@ -233,7 +240,6 @@
 					}
 				},
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--work-sans)",
 					"fontSize": "var(--wp--preset--font-size--huge)",
 					"fontWeight": "400",
 					"lineHeight": 1.3
@@ -306,42 +312,36 @@
 		"elements": {
 			"h1": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--work-sans)",
 					"fontSize": "var(--wp--preset--font-size--huge)",
 					"lineHeight": 1.2
 				}
 			},
 			"h2": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--work-sans)",
 					"fontSize": "var(--wp--preset--font-size--large)",
 					"lineHeight": 1.2
 				}
 			},
 			"h3": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--work-sans)",
 					"fontSize": "var(--wp--preset--font-size--medium)",
 					"lineHeight": 1.2
 				}
 			},
 			"h4": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--work-sans)",
 					"fontSize": "var(--wp--preset--font-size--normal)",
 					"lineHeight": 1.4
 				}
 			},
 			"h5": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--work-sans)",
 					"fontSize": "var(--wp--preset--font-size--small)",
 					"lineHeight": 1.4
 				}
 			},
 			"h6": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--work-sans)",
 					"fontSize": "var(--wp--preset--font-size--small)",
 					"lineHeight": 1.4
 				}
@@ -353,7 +353,6 @@
 			}
 		},
 		"typography": {
-			"fontFamily": "var(--wp--preset--font-family--work-sans)",
 			"fontWeight": "400"
 		},
 		"core/site-logo": {

mayland-blocks/theme.json

@@ -98,30 +98,17 @@
 			"fontFamilies": [
 				{
 					"fontFamily": "\"Poppins\", sans-serif",
-					"slug": "poppins",
-					"name": "Poppins",
+					"fontSlug": "poppins",
+					"slug": "body-font",
+					"name": "Body (Poppins)",
 					"google": "family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900"
 				},
 				{
-					"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
-					"slug": "system-font",
-					"name": "System Font"
-				},
-				{
-					"fontFamily": "Helvetica Neue, Helvetica, Arial, sans-serif",
-					"slug": "helvetica-arial"
-				},
-				{
-					"fontFamily": "Geneva, Tahoma, Verdana, sans-serif",
-					"slug": "geneva-verdana"
-				},
-				{
-					"fontFamily": "Cambria, Georgia, serif",
-					"slug": "cambria-georgia"
-				},
-				{
-					"fontFamily": "Hoefler Text, Baskerville Old Face, Garamond, Times New Roman, serif",
-					"slug": "hoefler-times-new-roman"
+					"fontFamily": "\"Poppins\", sans-serif",
+					"fontSlug": "poppins",
+					"slug": "heading-font",
+					"name": "Headings (Poppins)",
+					"google": "family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900"
 				}
 			],
 			"fontSizes": [
@@ -150,11 +137,6 @@
 	},
 	"styles": {
 		"blocks": {
-			"core/button": {
-				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--poppins)"
-				}
-			},
 			"core/navigation": {
 				"typography": {
 					"fontSize": "var(--wp--preset--font-size--small)"
@@ -167,7 +149,6 @@
 			},
 			"core/post-title": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--poppins)",
 					"fontSize": "var(--wp--preset--font-size--huge)",
 					"lineHeight": "var(--wp--custom--heading--typography--line-height)"
 				}
@@ -190,37 +171,31 @@
 		"elements": {
 			"h1": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--poppins)",
 					"fontSize": "41.47px"
 				}
 			},
 			"h2": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--poppins)",
 					"fontSize": "var(--wp--preset--font-size--huge)"
 				}
 			},
 			"h3": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--poppins)",
 					"fontSize": "var(--wp--preset--font-size--large)"
 				}
 			},
 			"h4": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--poppins)",
 					"fontSize": "24px"
 				}
 			},
 			"h5": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--poppins)",
 					"fontSize": "var(--wp--preset--font-size--normal)"
 				}
 			},
 			"h6": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--poppins)",
 					"fontSize": "var(--wp--preset--font-size--small)"
 				}
 			},
@@ -229,9 +204,6 @@
 					"text": "var(--wp--custom--color--foreground)"
 				}
 			}
-		},
-		"typography": {
-			"fontFamily": "var(--wp--preset--font-family--poppins)"
 		}
 	}
 }

payton/theme.json

@@ -46,13 +46,15 @@
 			"fontFamilies": [
 				{
 					"fontFamily": "\"Source Serif Pro\", serif",
-					"slug": "source-serif-pro",
+					"fontSlug": "source-serif-pro",
+					"slug": "body-font",
 					"name": "Source Serif Pro",
 					"google": "family=Source+Serif+Pro:ital,wght@0,400;0,700;1,400;1,700"
 				},
 				{
 					"fontFamily": "\"Overpass\", sans-serif",
-					"slug": "overpass",
+					"fontSlug": "overpass",
+					"slug": "heading-font",
 					"name": "Overpass",
 					"google": "family=Overpass:ital,wght@0,200;0,400;0,700;1,200;1,400;1,700"
 				}
@@ -94,7 +96,6 @@
 					"text": "var(--wp--custom--button--color--text)"
 				},
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--overpass)",
 					"fontSize": "var(--wp--custom--button--typography--font-size)",
 					"fontWeight": "var(--wp--custom--button--typography--font-weight)",
 					"textTransform": "uppercase"
@@ -102,7 +103,6 @@
 			},
 			"core/post-title": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--overpass)",
 					"fontSize": "var(--wp--preset--font-size--huge)",
 					"lineHeight": 1.2
 				},
@@ -131,43 +131,36 @@
 		"elements": {
 			"h1": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--overpass)",
 					"fontSize": "var(--wp--preset--font-size--huge)"
 				}
 			},
 			"h2": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--overpass)",
 					"fontSize": "var(--wp--preset--font-size--large)"
 				}
 			},
 			"h3": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--overpass)",
 					"fontSize": "var(--wp--preset--font-size--medium)"
 				}
 			},
 			"h4": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--overpass)",
 					"fontSize": "var(--wp--preset--font-size--normal)"
 				}
 			},
 			"h5": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--overpass)",
 					"fontSize": "var(--wp--preset--font-size--small)"
 				}
 			},
 			"h6": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--overpass)",
 					"fontSize": "var(--wp--preset--font-size--small)"
 				}
 			}
 		},
 		"typography": {
-			"fontFamily": "var(--wp--preset--font-family--source-serif-pro)",
 			"fontWeight": "400"
 		}
 	}

quadrat/theme.json

@@ -231,8 +231,16 @@
 			"fontFamilies": [
 				{
 					"fontFamily": "\"DM Sans\", sans-serif",
-					"slug": "dm-sans",
-					"name": "DM Sans",
+					"fontSlug": "dm-sans",
+					"slug": "body-font",
+					"name": "Body (DM Sans)",
+					"google": "family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700"
+				},
+				{
+					"fontFamily": "\"DM Sans\", sans-serif",
+					"fontSlug": "dm-sans",
+					"slug": "heading-font",
+					"name": "Headings (DM Sans)",
 					"google": "family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700"
 				}
 			],
@@ -273,7 +281,6 @@
 					"text": "var(--wp--custom--button--color--text)"
 				},
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--dm-sans)",
 					"fontSize": "var(--wp--custom--button--typography--font-size)",
 					"fontWeight": "var(--wp--custom--button--typography--font-weight)"
 				}
@@ -304,7 +311,6 @@
 			},
 			"core/post-title": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--dm-sans)",
 					"fontSize": "min(max(48px, 7vw), 80px)",
 					"fontWeight": "var(--wp--custom--heading--typography--font-weight)",
 					"lineHeight": "1.2"
@@ -371,42 +377,36 @@
 		"elements": {
 			"h1": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--dm-sans)",
 					"fontSize": "min(max(48px, 7vw), 80px)",
 					"lineHeight": "1.2"
 				}
 			},
 			"h2": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--dm-sans)",
 					"fontSize": "var(--wp--preset--font-size--huge)",
 					"lineHeight": "1.2"
 				}
 			},
 			"h3": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--dm-sans)",
 					"fontSize": "var(--wp--preset--font-size--large)",
 					"lineHeight": "1.2"
 				}
 			},
 			"h4": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--dm-sans)",
 					"fontSize": "var(--wp--preset--font-size--medium)",
 					"lineHeight": "1.4"
 				}
 			},
 			"h5": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--dm-sans)",
 					"fontSize": "var(--wp--preset--font-size--normal)",
 					"lineHeight": "1.4"
 				}
 			},
 			"h6": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--dm-sans)",
 					"fontSize": "var(--wp--preset--font-size--small)",
 					"lineHeight": "1.4"
 				}
@@ -418,7 +418,6 @@
 			}
 		},
 		"typography": {
-			"fontFamily": "var(--wp--preset--font-family--dm-sans)",
 			"fontWeight": "400"
 		}
 	}

russell/theme.json

@@ -42,14 +42,16 @@
             "fontFamilies": [
                 {
                     "fontFamily": "\"DM Sans\", sans-serif",
-                    "slug": "dm-sans",
-                    "name": "DM Sans",
+                    "fontSlug": "dm-sans",
+                    "slug": "body-font",
+                    "name": "Body (DM Sans)",
                     "google": "family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700"
                 },
                 {
                     "fontFamily": "\"Libre Baskerville\", serif",
-                    "slug": "libre-baskerville",
-                    "name": "Libre Baskerville",
+                    "fontSlug": "libre-baskerville",
+                    "slug": "heading-font",
+                    "name": "Headings (Libre Baskerville)",
                     "google": "family=Libre+Baskerville:ital,wght@0,400;0,700;1,400"
                 }
             ],
@@ -84,57 +86,11 @@
     },
     "styles": {
         "blocks": {
-            "core\/button": {
+            "core/post-title": {
                 "typography": {
-                    "fontFamily": "var(--wp--preset--font-family--dm-sans)"
-                }
-            },
-            "core\/post-title": {
-                "typography": {
-                    "fontFamily": "var(--wp--preset--font-family--libre-baskerville)",
                     "fontSize": "var(--wp--preset--font-size--huge)"
                 }
-            },
-            "core\/pullquote": {
-                "typography": {
-                    "fontFamily": "var(--wp--preset--font-family--libre-baskerville)"
-                }
-            }
-        },
-        "elements": {
-            "h1": {
-                "typography": {
-                    "fontFamily": "var(--wp--preset--font-family--libre-baskerville)"
-                }
-            },
-            "h2": {
-                "typography": {
-                    "fontFamily": "var(--wp--preset--font-family--libre-baskerville)"
-                }
-            },
-            "h3": {
-                "typography": {
-                    "fontFamily": "var(--wp--preset--font-family--libre-baskerville)"
-                }
-            },
-            "h4": {
-                "typography": {
-                    "fontFamily": "var(--wp--preset--font-family--libre-baskerville)"
-                }
-            },
-            "h5": {
-                "typography": {
-                    "fontFamily": "var(--wp--preset--font-family--libre-baskerville)"
-                }
-            },
-            "h6": {
-                "typography": {
-                    "fontFamily": "var(--wp--preset--font-family--libre-baskerville)"
-                }
             }
-        },
-        "typography": {
-            "fontFamily": "var(--wp--preset--font-family--dm-sans)"
         }
     }
 }

seedlet-blocks/theme.json

@@ -138,14 +138,16 @@
 			"fontFamilies": [
 				{
 					"fontFamily": "'Fira Sans', Helvetica, Arial, sans-serif",
-					"slug": "fira-sans",
-					"name": "Fira Sans",
+					"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",
-					"slug": "playfair-display",
-					"name": "Playfair Display",
+					"fontSlug": "playfair-display",
+					"slug": "heading-font",
+					"name": "Heading (Playfair Display)",
 					"google": "family=Playfair+Display:ital,wght@0,400..900;1,400..900"
 				}
 			],
@@ -179,14 +181,8 @@
 	},
 	"styles": {
 		"blocks": {
-			"core/button": {
-				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--fira-sans)"
-				}
-			},
 			"core/post-title": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--playfair-display)",
 					"fontSize": "var(--wp--preset--font-size--huge)"
 				}
 			},
@@ -205,8 +201,7 @@
 				"typography": {
 					"fontSize": "32px",
 					"fontStyle": "italic",
-					"lineHeight": "1.3",
-					"fontFamily": "var(--wp--preset--font-family--playfair-display)"
+					"lineHeight": "1.3"
 				}
 			},
 			"core/separator": {
@@ -219,41 +214,6 @@
 					"link": "var(--wp--custom--color--primary)"
 				}
 			}
-		},
-		"elements": {
-			"h1": {
-				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--playfair-display)"
-				}
-			},
-			"h2": {
-				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--playfair-display)"
-				}
-			},
-			"h3": {
-				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--playfair-display)"
-				}
-			},
-			"h4": {
-				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--playfair-display)"
-				}
-			},
-			"h5": {
-				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--playfair-display)"
-				}
-			},
-			"h6": {
-				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--playfair-display)"
-				}
-			}
-		},
-		"typography": {
-			"fontFamily": "var(--wp--preset--font-family--fira-sans)"
 		}
 	}
 }

skatepark/theme.json

@@ -212,8 +212,16 @@
 			"fontFamilies": [
 				{
 					"fontFamily": "\"Red Hat Display\", sans-serif",
-					"slug": "red-hat-display",
-					"name": "Red Hat Display",
+					"fontSlug": "red-hat-display",
+					"slug": "body-font",
+					"name": "Body (Red Hat Display)",
+					"google": "family=Red+Hat+Display:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900"
+				},
+				{
+					"fontFamily": "\"Red Hat Display\", sans-serif",
+					"fontSlug": "red-hat-display",
+					"slug": "heading-font",
+					"name": "Heading (Red Hat Display)",
 					"google": "family=Red+Hat+Display:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900"
 				}
 			],
@@ -254,7 +262,6 @@
 					"text": "var(--wp--custom--button--color--text)"
 				},
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--red-hat-display)",
 					"fontSize": "var(--wp--custom--button--typography--font-size)",
 					"fontWeight": "var(--wp--custom--button--typography--font-weight)",
 					"letterSpacing": "0.1em",
@@ -296,7 +303,6 @@
 			},
 			"core/post-title": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--red-hat-display)",
 					"fontSize": "min(max(48px, 7vw), 72px)",
 					"fontWeight": "700",
 					"lineHeight": "1.2"
@@ -339,7 +345,6 @@
 		"elements": {
 			"h1": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--red-hat-display)",
 					"fontSize": "min(max(48px, 7vw), 72px)",
 					"fontWeight": "700",
 					"lineHeight": "1.2"
@@ -353,7 +358,6 @@
 			},
 			"h2": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--red-hat-display)",
 					"fontSize": "min(max(36px, 5vw), 64px)",
 					"fontWeight": "900",
 					"lineHeight": "1.2"
@@ -361,7 +365,6 @@
 			},
 			"h3": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--red-hat-display)",
 					"fontSize": "min(max(30px, 5vw), 48px)",
 					"fontWeight": "900",
 					"lineHeight": "1.3"
@@ -369,7 +372,6 @@
 			},
 			"h4": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--red-hat-display)",
 					"fontSize": "var(--wp--preset--font-size--normal)",
 					"fontWeight": "900",
 					"letterSpacing": "0.1em",
@@ -379,7 +381,6 @@
 			},
 			"h5": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--red-hat-display)",
 					"fontSize": "var(--wp--preset--font-size--small)",
 					"fontWeight": "900",
 					"letterSpacing": "0.1em",
@@ -389,7 +390,6 @@
 			},
 			"h6": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--red-hat-display)",
 					"fontSize": "var(--wp--custom--font-sizes--tiny)",
 					"fontWeight": "900",
 					"letterSpacing": "0.1em",
@@ -402,7 +402,6 @@
 			"blockGap": "0.5em"
 		},
 		"typography": {
-			"fontFamily": "var(--wp--preset--font-family--red-hat-display)",
 			"fontWeight": "400"
 		}
 	}

videomaker/theme.json

@@ -114,14 +114,16 @@
 			"fontFamilies": [
 				{
 					"fontFamily": "\"Inter\", serif",
-					"slug": "inter",
-					"name": "Inter",
+					"fontSlug": "inter",
+					"slug": "body-font",
+					"name": "Body (Inter)",
 					"google": "family=Inter:wght@100..900"
 				},
 				{
 					"fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
-					"slug": "system-font",
-					"name": "System Font"
+					"fontSlug": "system-font",
+					"slug": "heading-font",
+					"name": "Headings (System Font)"
 				}
 			],
 			"fontSizes": [

zoologist/theme.json

@@ -174,8 +174,16 @@
 			"fontFamilies": [
 				{
 					"fontFamily": "\"DM Sans\", sans-serif",
-					"slug": "dm-sans",
-					"name": "DM Sans",
+					"fontSlug": "dm-sans",
+					"slug": "body-font",
+					"name": "Body (DM Sans)",
+					"google": "family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700"
+				},
+				{
+					"fontFamily": "\"DM Sans\", sans-serif",
+					"fontSlug": "dm-sans",
+					"slug": "heading-font",
+					"name": "Headings (DM Sans)",
 					"google": "family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700"
 				}
 			],
@@ -216,7 +224,6 @@
 					"text": "var(--wp--custom--button--color--text)"
 				},
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--dm-sans)",
 					"fontSize": "var(--wp--custom--button--typography--font-size)",
 					"fontWeight": "var(--wp--custom--button--typography--font-weight)"
 				}
@@ -252,7 +259,6 @@
 					}
 				},
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--dm-sans)",
 					"fontSize": "min(max(48px, 7vw), 64px)",
 					"fontWeight": "700",
 					"lineHeight": 1.2
@@ -326,42 +332,36 @@
 		"elements": {
 			"h1": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--dm-sans)",
 					"fontSize": "min(max(48px, 7vw), 80px)",
 					"lineHeight": 1.2
 				}
 			},
 			"h2": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--dm-sans)",
 					"fontSize": "min(max(36px, 6vw), 65px)",
 					"lineHeight": 1.2
 				}
 			},
 			"h3": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--dm-sans)",
 					"fontSize": "var(--wp--preset--font-size--large)",
 					"lineHeight": 1.2
 				}
 			},
 			"h4": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--dm-sans)",
 					"fontSize": "var(--wp--preset--font-size--large)",
 					"lineHeight": 1.4
 				}
 			},
 			"h5": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--dm-sans)",
 					"fontSize": "var(--wp--preset--font-size--normal)",
 					"lineHeight": 1.4
 				}
 			},
 			"h6": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--dm-sans)",
 					"fontSize": "var(--wp--preset--font-size--small)",
 					"lineHeight": 1.4
 				}
@@ -373,7 +373,6 @@
 			}
 		},
 		"typography": {
-			"fontFamily": "var(--wp--preset--font-family--dm-sans)",
 			"fontWeight": "400"
 		}
 	}