diff --git a/wp-admin/includes/admin-filters.php b/wp-admin/includes/admin-filters.php
index 33354cb073..8e3da338c5 100644
--- a/wp-admin/includes/admin-filters.php
+++ b/wp-admin/includes/admin-filters.php
@@ -168,3 +168,6 @@ add_action( 'post_updated', array( 'WP_Privacy_Policy_Content', '_policy_page_up
// Append '(Draft)' to draft page titles in the privacy page dropdown.
add_filter( 'list_pages', '_wp_privacy_settings_filter_draft_page_titles', 10, 2 );
+
+// Font management.
+add_action( 'admin_print_styles', 'wp_print_font_faces', 50 );
diff --git a/wp-includes/block-editor.php b/wp-includes/block-editor.php
index 015a553f57..05bcd4e7c2 100644
--- a/wp-includes/block-editor.php
+++ b/wp-includes/block-editor.php
@@ -361,6 +361,7 @@ function _wp_get_iframed_editor_assets() {
ob_start();
wp_print_styles();
+ wp_print_font_faces();
$styles = ob_get_clean();
ob_start();
diff --git a/wp-includes/default-filters.php b/wp-includes/default-filters.php
index bf39f29b4d..c08073326c 100644
--- a/wp-includes/default-filters.php
+++ b/wp-includes/default-filters.php
@@ -358,7 +358,6 @@ add_action( 'start_previewing_theme', 'wp_clean_theme_json_cache' );
add_action( 'after_switch_theme', '_wp_menus_changed' );
add_action( 'after_switch_theme', '_wp_sidebars_changed' );
add_action( 'wp_print_styles', 'print_emoji_styles' );
-add_action( 'plugins_loaded', '_wp_theme_json_webfonts_handler' );
if ( isset( $_GET['replytocom'] ) ) {
add_filter( 'wp_robots', 'wp_robots_no_robots' );
@@ -719,4 +718,7 @@ add_action( 'init', 'wp_register_persisted_preferences_meta' );
// CPT wp_block custom postmeta field.
add_action( 'init', 'wp_create_initial_post_meta' );
+// Font management.
+add_action( 'wp_head', 'wp_print_font_faces', 50 );
+
unset( $filter, $action );
diff --git a/wp-includes/deprecated.php b/wp-includes/deprecated.php
index 72bf98d832..1d3ddd519e 100644
--- a/wp-includes/deprecated.php
+++ b/wp-includes/deprecated.php
@@ -5367,3 +5367,506 @@ function block_core_navigation_submenu_build_css_colors( $context, $attributes,
return $colors;
}
+
+/**
+ * Runs the theme.json webfonts handler.
+ *
+ * Using `WP_Theme_JSON_Resolver`, it gets the fonts defined
+ * in the `theme.json` for the current selection and style
+ * variations, validates the font-face properties, generates
+ * the '@font-face' style declarations, and then enqueues the
+ * styles for both the editor and front-end.
+ *
+ * Design Notes:
+ * This is not a public API, but rather an internal handler.
+ * A future public Webfonts API will replace this stopgap code.
+ *
+ * This code design is intentional.
+ * a. It hides the inner-workings.
+ * b. It does not expose API ins or outs for consumption.
+ * c. It only works with a theme's `theme.json`.
+ *
+ * Why?
+ * a. To avoid backwards-compatibility issues when
+ * the Webfonts API is introduced in Core.
+ * b. To make `fontFace` declarations in `theme.json` work.
+ *
+ * @link https://github.com/WordPress/gutenberg/issues/40472
+ *
+ * @since 6.0.0
+ * @deprecated 6.4.0 Use wp_print_font_faces() instead.
+ * @access private
+ */
+function _wp_theme_json_webfonts_handler() {
+ _deprecated_function( __FUNCTION__, '6.4.0', 'wp_print_font_faces' );
+
+ // Block themes are unavailable during installation.
+ if ( wp_installing() ) {
+ return;
+ }
+
+ if ( ! wp_theme_has_theme_json() ) {
+ return;
+ }
+
+ // Webfonts to be processed.
+ $registered_webfonts = array();
+
+ /**
+ * Gets the webfonts from theme.json.
+ *
+ * @since 6.0.0
+ *
+ * @return array Array of defined webfonts.
+ */
+ $fn_get_webfonts_from_theme_json = static function() {
+ // Get settings from theme.json.
+ $settings = WP_Theme_JSON_Resolver::get_merged_data()->get_settings();
+
+ // If in the editor, add webfonts defined in variations.
+ if ( is_admin() || ( defined( 'REST_REQUEST' ) && REST_REQUEST ) ) {
+ $variations = WP_Theme_JSON_Resolver::get_style_variations();
+ foreach ( $variations as $variation ) {
+ // Skip if fontFamilies are not defined in the variation.
+ if ( empty( $variation['settings']['typography']['fontFamilies'] ) ) {
+ continue;
+ }
+
+ // Initialize the array structure.
+ if ( empty( $settings['typography'] ) ) {
+ $settings['typography'] = array();
+ }
+ if ( empty( $settings['typography']['fontFamilies'] ) ) {
+ $settings['typography']['fontFamilies'] = array();
+ }
+ if ( empty( $settings['typography']['fontFamilies']['theme'] ) ) {
+ $settings['typography']['fontFamilies']['theme'] = array();
+ }
+
+ // Combine variations with settings. Remove duplicates.
+ $settings['typography']['fontFamilies']['theme'] = array_merge( $settings['typography']['fontFamilies']['theme'], $variation['settings']['typography']['fontFamilies']['theme'] );
+ $settings['typography']['fontFamilies'] = array_unique( $settings['typography']['fontFamilies'] );
+ }
+ }
+
+ // Bail out early if there are no settings for webfonts.
+ if ( empty( $settings['typography']['fontFamilies'] ) ) {
+ return array();
+ }
+
+ $webfonts = array();
+
+ // Look for fontFamilies.
+ foreach ( $settings['typography']['fontFamilies'] as $font_families ) {
+ foreach ( $font_families as $font_family ) {
+
+ // Skip if fontFace is not defined.
+ if ( empty( $font_family['fontFace'] ) ) {
+ continue;
+ }
+
+ // Skip if fontFace is not an array of webfonts.
+ if ( ! is_array( $font_family['fontFace'] ) ) {
+ continue;
+ }
+
+ $webfonts = array_merge( $webfonts, $font_family['fontFace'] );
+ }
+ }
+
+ return $webfonts;
+ };
+
+ /**
+ * Transforms each 'src' into an URI by replacing 'file:./'
+ * placeholder from theme.json.
+ *
+ * The absolute path to the webfont file(s) cannot be defined in
+ * theme.json. `file:./` is the placeholder which is replaced by
+ * the theme's URL path to the theme's root.
+ *
+ * @since 6.0.0
+ *
+ * @param array $src Webfont file(s) `src`.
+ * @return array Webfont's `src` in URI.
+ */
+ $fn_transform_src_into_uri = static function( array $src ) {
+ foreach ( $src as $key => $url ) {
+ // Tweak the URL to be relative to the theme root.
+ if ( ! str_starts_with( $url, 'file:./' ) ) {
+ continue;
+ }
+
+ $src[ $key ] = get_theme_file_uri( str_replace( 'file:./', '', $url ) );
+ }
+
+ return $src;
+ };
+
+ /**
+ * Converts the font-face properties (i.e. keys) into kebab-case.
+ *
+ * @since 6.0.0
+ *
+ * @param array $font_face Font face to convert.
+ * @return array Font faces with each property in kebab-case format.
+ */
+ $fn_convert_keys_to_kebab_case = static function( array $font_face ) {
+ foreach ( $font_face as $property => $value ) {
+ $kebab_case = _wp_to_kebab_case( $property );
+ $font_face[ $kebab_case ] = $value;
+ if ( $kebab_case !== $property ) {
+ unset( $font_face[ $property ] );
+ }
+ }
+
+ return $font_face;
+ };
+
+ /**
+ * Validates a webfont.
+ *
+ * @since 6.0.0
+ *
+ * @param array $webfont The webfont arguments.
+ * @return array|false The validated webfont arguments, or false if the webfont is invalid.
+ */
+ $fn_validate_webfont = static function( $webfont ) {
+ $webfont = wp_parse_args(
+ $webfont,
+ array(
+ 'font-family' => '',
+ 'font-style' => 'normal',
+ 'font-weight' => '400',
+ 'font-display' => 'fallback',
+ 'src' => array(),
+ )
+ );
+
+ // Check the font-family.
+ if ( empty( $webfont['font-family'] ) || ! is_string( $webfont['font-family'] ) ) {
+ trigger_error( __( 'Webfont font family must be a non-empty string.' ) );
+
+ return false;
+ }
+
+ // Check that the `src` property is defined and a valid type.
+ if ( empty( $webfont['src'] ) || ( ! is_string( $webfont['src'] ) && ! is_array( $webfont['src'] ) ) ) {
+ trigger_error( __( 'Webfont src must be a non-empty string or an array of strings.' ) );
+
+ return false;
+ }
+
+ // Validate the `src` property.
+ foreach ( (array) $webfont['src'] as $src ) {
+ if ( ! is_string( $src ) || '' === trim( $src ) ) {
+ trigger_error( __( 'Each webfont src must be a non-empty string.' ) );
+
+ return false;
+ }
+ }
+
+ // Check the font-weight.
+ if ( ! is_string( $webfont['font-weight'] ) && ! is_int( $webfont['font-weight'] ) ) {
+ trigger_error( __( 'Webfont font weight must be a properly formatted string or integer.' ) );
+
+ return false;
+ }
+
+ // Check the font-display.
+ if ( ! in_array( $webfont['font-display'], array( 'auto', 'block', 'fallback', 'optional', 'swap' ), true ) ) {
+ $webfont['font-display'] = 'fallback';
+ }
+
+ $valid_props = array(
+ 'ascend-override',
+ 'descend-override',
+ 'font-display',
+ 'font-family',
+ 'font-stretch',
+ 'font-style',
+ 'font-weight',
+ 'font-variant',
+ 'font-feature-settings',
+ 'font-variation-settings',
+ 'line-gap-override',
+ 'size-adjust',
+ 'src',
+ 'unicode-range',
+ );
+
+ foreach ( $webfont as $prop => $value ) {
+ if ( ! in_array( $prop, $valid_props, true ) ) {
+ unset( $webfont[ $prop ] );
+ }
+ }
+
+ return $webfont;
+ };
+
+ /**
+ * Registers webfonts declared in theme.json.
+ *
+ * @since 6.0.0
+ *
+ * @uses $registered_webfonts To access and update the registered webfonts registry (passed by reference).
+ * @uses $fn_get_webfonts_from_theme_json To run the function that gets the webfonts from theme.json.
+ * @uses $fn_convert_keys_to_kebab_case To run the function that converts keys into kebab-case.
+ * @uses $fn_validate_webfont To run the function that validates each font-face (webfont) from theme.json.
+ */
+ $fn_register_webfonts = static function() use ( &$registered_webfonts, $fn_get_webfonts_from_theme_json, $fn_convert_keys_to_kebab_case, $fn_validate_webfont, $fn_transform_src_into_uri ) {
+ $registered_webfonts = array();
+
+ foreach ( $fn_get_webfonts_from_theme_json() as $webfont ) {
+ if ( ! is_array( $webfont ) ) {
+ continue;
+ }
+
+ $webfont = $fn_convert_keys_to_kebab_case( $webfont );
+
+ $webfont = $fn_validate_webfont( $webfont );
+
+ $webfont['src'] = $fn_transform_src_into_uri( (array) $webfont['src'] );
+
+ // Skip if not valid.
+ if ( empty( $webfont ) ) {
+ continue;
+ }
+
+ $registered_webfonts[] = $webfont;
+ }
+ };
+
+ /**
+ * Orders 'src' items to optimize for browser support.
+ *
+ * @since 6.0.0
+ *
+ * @param array $webfont Webfont to process.
+ * @return array Ordered `src` items.
+ */
+ $fn_order_src = static function( array $webfont ) {
+ $src = array();
+ $src_ordered = array();
+
+ foreach ( $webfont['src'] as $url ) {
+ // Add data URIs first.
+ if ( str_starts_with( trim( $url ), 'data:' ) ) {
+ $src_ordered[] = array(
+ 'url' => $url,
+ 'format' => 'data',
+ );
+ continue;
+ }
+ $format = pathinfo( $url, PATHINFO_EXTENSION );
+ $src[ $format ] = $url;
+ }
+
+ // Add woff2.
+ if ( ! empty( $src['woff2'] ) ) {
+ $src_ordered[] = array(
+ 'url' => sanitize_url( $src['woff2'] ),
+ 'format' => 'woff2',
+ );
+ }
+
+ // Add woff.
+ if ( ! empty( $src['woff'] ) ) {
+ $src_ordered[] = array(
+ 'url' => sanitize_url( $src['woff'] ),
+ 'format' => 'woff',
+ );
+ }
+
+ // Add ttf.
+ if ( ! empty( $src['ttf'] ) ) {
+ $src_ordered[] = array(
+ 'url' => sanitize_url( $src['ttf'] ),
+ 'format' => 'truetype',
+ );
+ }
+
+ // Add eot.
+ if ( ! empty( $src['eot'] ) ) {
+ $src_ordered[] = array(
+ 'url' => sanitize_url( $src['eot'] ),
+ 'format' => 'embedded-opentype',
+ );
+ }
+
+ // Add otf.
+ if ( ! empty( $src['otf'] ) ) {
+ $src_ordered[] = array(
+ 'url' => sanitize_url( $src['otf'] ),
+ 'format' => 'opentype',
+ );
+ }
+ $webfont['src'] = $src_ordered;
+
+ return $webfont;
+ };
+
+ /**
+ * Compiles the 'src' into valid CSS.
+ *
+ * @since 6.0.0
+ * @since 6.2.0 Removed local() CSS.
+ *
+ * @param string $font_family Font family.
+ * @param array $value Value to process.
+ * @return string The CSS.
+ */
+ $fn_compile_src = static function( $font_family, array $value ) {
+ $src = '';
+
+ foreach ( $value as $item ) {
+ $src .= ( 'data' === $item['format'] )
+ ? ", url({$item['url']})"
+ : ", url('{$item['url']}') format('{$item['format']}')";
+ }
+
+ $src = ltrim( $src, ', ' );
+
+ return $src;
+ };
+
+ /**
+ * Compiles the font variation settings.
+ *
+ * @since 6.0.0
+ *
+ * @param array $font_variation_settings Array of font variation settings.
+ * @return string The CSS.
+ */
+ $fn_compile_variations = static function( array $font_variation_settings ) {
+ $variations = '';
+
+ foreach ( $font_variation_settings as $key => $value ) {
+ $variations .= "$key $value";
+ }
+
+ return $variations;
+ };
+
+ /**
+ * Builds the font-family's CSS.
+ *
+ * @since 6.0.0
+ *
+ * @uses $fn_compile_src To run the function that compiles the src.
+ * @uses $fn_compile_variations To run the function that compiles the variations.
+ *
+ * @param array $webfont Webfont to process.
+ * @return string This font-family's CSS.
+ */
+ $fn_build_font_face_css = static function( array $webfont ) use ( $fn_compile_src, $fn_compile_variations ) {
+ $css = '';
+
+ // Wrap font-family in quotes if it contains spaces.
+ if (
+ str_contains( $webfont['font-family'], ' ' ) &&
+ ! str_contains( $webfont['font-family'], '"' ) &&
+ ! str_contains( $webfont['font-family'], "'" )
+ ) {
+ $webfont['font-family'] = '"' . $webfont['font-family'] . '"';
+ }
+
+ foreach ( $webfont as $key => $value ) {
+ /*
+ * Skip "provider", since it's for internal API use,
+ * and not a valid CSS property.
+ */
+ if ( 'provider' === $key ) {
+ continue;
+ }
+
+ // Compile the "src" parameter.
+ if ( 'src' === $key ) {
+ $value = $fn_compile_src( $webfont['font-family'], $value );
+ }
+
+ // If font-variation-settings is an array, convert it to a string.
+ if ( 'font-variation-settings' === $key && is_array( $value ) ) {
+ $value = $fn_compile_variations( $value );
+ }
+
+ if ( ! empty( $value ) ) {
+ $css .= "$key:$value;";
+ }
+ }
+
+ return $css;
+ };
+
+ /**
+ * Gets the '@font-face' CSS styles for locally-hosted font files.
+ *
+ * @since 6.0.0
+ *
+ * @uses $registered_webfonts To access and update the registered webfonts registry (passed by reference).
+ * @uses $fn_order_src To run the function that orders the src.
+ * @uses $fn_build_font_face_css To run the function that builds the font-face CSS.
+ *
+ * @return string The `@font-face` CSS.
+ */
+ $fn_get_css = static function() use ( &$registered_webfonts, $fn_order_src, $fn_build_font_face_css ) {
+ $css = '';
+
+ foreach ( $registered_webfonts as $webfont ) {
+ // Order the webfont's `src` items to optimize for browser support.
+ $webfont = $fn_order_src( $webfont );
+
+ // Build the @font-face CSS for this webfont.
+ $css .= '@font-face{' . $fn_build_font_face_css( $webfont ) . '}';
+ }
+
+ return $css;
+ };
+
+ /**
+ * Generates and enqueues webfonts styles.
+ *
+ * @since 6.0.0
+ *
+ * @uses $fn_get_css To run the function that gets the CSS.
+ */
+ $fn_generate_and_enqueue_styles = static function() use ( $fn_get_css ) {
+ // Generate the styles.
+ $styles = $fn_get_css();
+
+ // Bail out if there are no styles to enqueue.
+ if ( '' === $styles ) {
+ return;
+ }
+
+ // Enqueue the stylesheet.
+ wp_register_style( 'wp-webfonts', '' );
+ wp_enqueue_style( 'wp-webfonts' );
+
+ // Add the styles to the stylesheet.
+ wp_add_inline_style( 'wp-webfonts', $styles );
+ };
+
+ /**
+ * Generates and enqueues editor styles.
+ *
+ * @since 6.0.0
+ *
+ * @uses $fn_get_css To run the function that gets the CSS.
+ */
+ $fn_generate_and_enqueue_editor_styles = static function() use ( $fn_get_css ) {
+ // Generate the styles.
+ $styles = $fn_get_css();
+
+ // Bail out if there are no styles to enqueue.
+ if ( '' === $styles ) {
+ return;
+ }
+
+ wp_add_inline_style( 'wp-block-library', $styles );
+ };
+
+ add_action( 'wp_loaded', $fn_register_webfonts );
+ add_action( 'wp_enqueue_scripts', $fn_generate_and_enqueue_styles );
+ add_action( 'admin_init', $fn_generate_and_enqueue_editor_styles );
+}
diff --git a/wp-includes/fonts.php b/wp-includes/fonts.php
new file mode 100644
index 0000000000..b628db18cf
--- /dev/null
+++ b/wp-includes/fonts.php
@@ -0,0 +1,57 @@
+ array[] $variations {
+ * Optional. An associated array of font variations for this font-family.
+ * Each variation has the following structure.
+ *
+ * @type array $font_variation {
+ * @type string $font-family The font-family property.
+ * @type string|string[] $src The URL(s) to each resource containing the font data.
+ * @type string $font_style Optional. The font-style property. Default 'normal'.
+ * @type string $font-weight Optional. The font-weight property. Default '400'.
+ * @type string $font-display Optional. The font-display property. Default 'fallback'.
+ * @type string $ascent-override Optional. The ascent-override property.
+ * @type string $descent-override Optional. The descent-override property.
+ * @type string $font-stretch Optional. The font-stretch property.
+ * @type string $font-variant Optional. The font-variant property.
+ * @type string $font-feature-settings Optional. The font-feature-settings property.
+ * @type string $font-variation-settings Optional. The font-variation-settings property.
+ * @type string $line-gap-override Optional. The line-gap-override property.
+ * @type string $size-adjust Optional. The size-adjust property.
+ * @type string $unicode-range Optional. The unicode-range property.
+ * }
+ * }
+ * }
+ */
+function wp_print_font_faces( $fonts = array() ) {
+ static $wp_font_face = null;
+
+ if ( empty( $fonts ) ) {
+ $fonts = WP_Font_Face_Resolver::get_fonts_from_theme_json();
+ }
+
+ if ( empty( $fonts ) ) {
+ return;
+ }
+
+ if ( null === $wp_font_face ) {
+ $wp_font_face = new WP_Font_Face();
+ }
+
+ $wp_font_face->generate_and_print( $fonts );
+}
diff --git a/wp-includes/fonts/class-wp-font-face-resolver.php b/wp-includes/fonts/class-wp-font-face-resolver.php
new file mode 100644
index 0000000000..da1ea1c711
--- /dev/null
+++ b/wp-includes/fonts/class-wp-font-face-resolver.php
@@ -0,0 +1,154 @@
+ $src_url ) {
+ // Skip if the src doesn't start with the placeholder, as there's nothing to replace.
+ if ( ! str_starts_with( $src_url, $placeholder ) ) {
+ continue;
+ }
+
+ $src_file = str_replace( $placeholder, '', $src_url );
+ $src[ $src_key ] = get_theme_file_uri( $src_file );
+ }
+
+ return $src;
+ }
+
+ /**
+ * Converts all first dimension keys into kebab-case.
+ *
+ * @since 6.4.0
+ *
+ * @param array $data The array to process.
+ * @return array Data with first dimension keys converted into kebab-case.
+ */
+ private static function to_kebab_case( array $data ) {
+ foreach ( $data as $key => $value ) {
+ $kebab_case = _wp_to_kebab_case( $key );
+ $data[ $kebab_case ] = $value;
+ if ( $kebab_case !== $key ) {
+ unset( $data[ $key ] );
+ }
+ }
+
+ return $data;
+ }
+}
diff --git a/wp-includes/fonts/class-wp-font-face.php b/wp-includes/fonts/class-wp-font-face.php
new file mode 100644
index 0000000000..974e13ed1d
--- /dev/null
+++ b/wp-includes/fonts/class-wp-font-face.php
@@ -0,0 +1,430 @@
+ '',
+ 'font-style' => 'normal',
+ 'font-weight' => '400',
+ 'font-display' => 'fallback',
+ );
+
+ /**
+ * Valid font-face property names.
+ *
+ * @since 6.4.0
+ *
+ * @var string[]
+ */
+ private $valid_font_face_properties = array(
+ 'ascent-override',
+ 'descent-override',
+ 'font-display',
+ 'font-family',
+ 'font-stretch',
+ 'font-style',
+ 'font-weight',
+ 'font-variant',
+ 'font-feature-settings',
+ 'font-variation-settings',
+ 'line-gap-override',
+ 'size-adjust',
+ 'src',
+ 'unicode-range',
+ );
+
+ /**
+ * Valid font-display values.
+ *
+ * @since 6.4.0
+ *
+ * @var string[]
+ */
+ private $valid_font_display = array( 'auto', 'block', 'fallback', 'swap', 'optional' );
+
+ /**
+ * Array of font-face style tag's attribute(s)
+ * where the key is the attribute name and the
+ * value is its value.
+ *
+ * @since 6.4.0
+ *
+ * @var string[]
+ */
+ private $style_tag_attrs = array();
+
+ /**
+ * Creates and initializes an instance of WP_Font_Face.
+ *
+ * @since 6.4.0
+ */
+ public function __construct() {
+ if (
+ function_exists( 'is_admin' ) && ! is_admin()
+ &&
+ function_exists( 'current_theme_supports' ) && ! current_theme_supports( 'html5', 'style' )
+ ) {
+ $this->style_tag_attrs = array( 'type' => 'text/css' );
+ }
+ }
+
+ /**
+ * Generates and prints the `@font-face` styles for the given fonts.
+ *
+ * @since 6.4.0
+ *
+ * @param array[][] $fonts Optional. The font-families and their font variations.
+ * See {@see wp_print_font_faces()} for the supported fields.
+ * Default empty array.
+ */
+ public function generate_and_print( array $fonts ) {
+ $fonts = $this->validate_fonts( $fonts );
+
+ // Bail out if there are no fonts are given to process.
+ if ( empty( $fonts ) ) {
+ return;
+ }
+
+ $css = $this->get_css( $fonts );
+
+ /*
+ * The font-face CSS is contained within and open a