theme-json-variables.php

<?php
/**
 * Font variable overrides
 *
 * @package Wpdev\FontOverrides
 */

namespace Wpdev\FontOverrides;

/**
 * Render our CSS variables for the frontend.
 *
 * @return void
 */
function render_fallback_css_variables_frontend() {

	$custom_css = generate_custom_fallback_css_vars();

	if ( '' !== $custom_css ) {
		echo '<style id="wpdev-css-variables">' . $custom_css . '</style>';
	}
}
add_action( 'wp_print_styles', __NAMESPACE__ . '\render_fallback_css_variables_frontend', 99 );




/**
 * Render our CSS variables for the editor.
 *
 * @return void
 */
function enqueue_block_editor_assets() {

	// The first parameter MUST be an existing editor style handle.
	wp_add_inline_style( 'wpdev-theme-stylesheet', generate_custom_fallback_css_vars() );
}
add_action( 'enqueue_block_assets', __NAMESPACE__ . '\enqueue_block_editor_assets' );




/**
 * Generate custom fallback CSS variables.
 *
 * @return string
 */
function generate_custom_fallback_css_vars() {

	$custom_css = '';

	// Grab global styles from theme.json.
	$styles = wp_get_global_styles( 'blocks' );

	// Check for a specific style and add it to the custom CSS.
	if ( isset( $styles['elements']['button']['typography']['fontFamily'] ) ) {
		$custom_css .= 'body {
			--wpdev--button--font-family: ' . esc_attr( $styles['elements']['button']['typography']['fontFamily'] ) . ';
		}';
	}

	return $custom_css;
}