Archeo: Add fonts to theme.json (#5609)

* Archeo: Add fonts to theme.json

* Add archeo_preload_webfonts function back in

* Also replace the fonts in Stewart

* Use theme.json fonts for Livro

* Add fonts for Remote to theme.json

* Remove preload fuctions and use  on the font files

Co-authored-by: Sarah Norris <sarah@sekai.co.uk>

archeo/functions.php

@@ -51,9 +51,6 @@ if ( ! function_exists( 'archeo_styles' ) ) :
 			wp_get_theme()->get( 'Version' )
 		);
 
-		// Add styles inline.
-		wp_add_inline_style( 'archeo-style', archeo_get_font_face_styles() );
-
 		// Enqueue theme stylesheet.
 		wp_enqueue_style( 'archeo-style' );
 
@@ -63,119 +60,5 @@ endif;
 
 add_action( 'wp_enqueue_scripts', 'archeo_styles' );
 
-if ( ! function_exists( 'archeo_editor_styles' ) ) :
-
-	/**
-	 * Enqueue editor styles.
-	 *
-	 * @since Archeo 1.0
-	 *
-	 * @return void
-	 */
-	function archeo_editor_styles() {
-
-		// Add styles inline.
-		wp_add_inline_style( 'wp-block-library', archeo_get_font_face_styles() );
-
-	}
-
-endif;
-
-add_action( 'admin_init', 'archeo_editor_styles' );
-
-
-if ( ! function_exists( 'archeo_get_font_face_styles' ) ) :
-
-	/**
-	 * Get font face styles.
-	 * Called by functions archeo_styles() and archeo_editor_styles() above.
-	 *
-	 * @since Archeo 1.0
-	 *
-	 * @return string
-	 */
-	function archeo_get_font_face_styles() {
-
-		return "
-		@font-face{
-			font-family: 'Chivo';
-			font-weight: 100;
-			font-style: normal;
-			font-stretch: normal;
-			font-display: swap;
-			src: url('" . get_theme_file_uri( 'assets/fonts/Chivo-Thin.woff2' ) . "') format('woff2');
-		}
-		@font-face{
-			font-family: 'Chivo';
-			font-weight: 400;
-			font-style: normal;
-			font-stretch: normal;
-			font-display: swap;
-			src: url('" . get_theme_file_uri( 'assets/fonts/Chivo-Regular.woff2' ) . "') format('woff2');
-		}
-		@font-face{
-			font-family: 'Chivo';
-			font-weight: 700;
-			font-style: normal;
-			font-stretch: normal;
-			font-display: swap;
-			src: url('" . get_theme_file_uri( 'assets/fonts/Chivo-Bold.woff2' ) . "') format('woff2');
-		}
-		@font-face{
-			font-family: 'Chivo';
-			font-weight: 100;
-			font-style: italic;
-			font-stretch: normal;
-			font-display: swap;
-			src: url('" . get_theme_file_uri( 'assets/fonts/Chivo-ThinItalic.woff2' ) . "') format('woff2');
-		}
-		@font-face{
-			font-family: 'Chivo';
-			font-weight: 400;
-			font-style: italic;
-			font-stretch: normal;
-			font-display: swap;
-			src: url('" . get_theme_file_uri( 'assets/fonts/Chivo-Italic.woff2' ) . "') format('woff2');
-		}
-		@font-face{
-			font-family: 'Chivo';
-			font-weight: 700;
-			font-style: italic;
-			font-stretch: normal;
-			font-display: swap;
-			src: url('" . get_theme_file_uri( 'assets/fonts/Chivo-BoldItalic.woff2' ) . "') format('woff2');
-		}
-		";
-
-	}
-
-endif;
-
-if ( ! function_exists( 'archeo_preload_webfonts' ) ) :
-
-	/**
-	 * Preloads the main web font to improve performance.
-	 *
-	 * Only the main web font (font-weight: 100,400, font-style: normal) is preloaded here since that font is always relevant. 
-	 * The other fonts are only needed if the user changed style or weight of the fonts,
-	 * and therefore preloading it would in most cases regress performance when that font would otherwise not be loaded
-	 * at all.
-	 *
-	 * @since Archeo 1.0
-	 *
-	 * @return void
-	 */
-	function archeo_preload_webfonts() {
-		?>
-		<link rel="preload" href="<?php echo esc_url( get_theme_file_uri( 'assets/fonts/Chivo-Thin.woff2' ) ); ?>" as="font" type="font/woff2" crossorigin>
-		<link rel="preload" href="<?php echo esc_url( get_theme_file_uri( 'assets/fonts/Chivo-Regular.woff2' ) ); ?>" as="font" type="font/woff2" crossorigin>
-		<?php
-	}
-
-endif;
-
-add_action( 'wp_head', 'archeo_preload_webfonts' );
-
 // Add block patterns
 require get_template_directory() . '/inc/block-patterns.php';
-

archeo/theme.json

@@ -64,7 +64,57 @@
 				{
 					"fontFamily": "\"Chivo\", sans-serif",
 					"name": "Chivo",
-					"slug": "chivo"
+					"slug": "chivo",
+					"fontFace": [
+						{
+							"fontFamily": "Chivo",
+							"fontDisplay": "block",
+							"fontWeight": "100",
+							"fontStyle": "normal",
+							"fontStretch": "normal",
+							"src": [ "file:./assets/fonts/Chivo-Thin.woff2" ]
+						},
+						{
+							"fontFamily": "Chivo",
+							"fontDisplay": "block",
+							"fontWeight": "400",
+							"fontStyle": "normal",
+							"fontStretch": "normal",
+							"src": [ "file:./assets/fonts/Chivo-Regular.woff2" ]
+						},
+						{
+							"fontFamily": "Chivo",
+							"fontDisplay": "block",
+							"fontWeight": "700",
+							"fontStyle": "normal",
+							"fontStretch": "normal",
+							"src": [ "file:./assets/fonts/Chivo-Bold.woff2" ]
+						},
+						{
+							"fontFamily": "Chivo",
+							"fontDisplay": "block",
+							"fontWeight": "100",
+							"fontStyle": "italic",
+							"fontStretch": "normal",
+							"src": [ "file:./assets/fonts/Chivo-ThinItalic.woff2" ]
+						},
+						{
+							"fontFamily": "Chivo",
+							"fontDisplay": "block",
+							"fontWeight": "400",
+							"fontStyle": "italic",
+							"fontStretch": "normal",
+							"src": [ "file:./assets/fonts/Chivo-Italic.woff2" ]
+						},
+						{
+							"fontFamily": "Chivo",
+							"fontDisplay": "block",
+							"fontWeight": "700",
+							"fontStyle": "italic",
+							"fontStretch": "normal",
+							"src": [ "file:./assets/fonts/Chivo-BoldItalic.woff2" ]
+						}
+					]
 				}
 			],
 			"fontSizes": [

livro/functions.php

@@ -51,100 +51,16 @@ if ( ! function_exists( 'livro_styles' ) ) :
 			wp_get_theme()->get( 'Version' )
 		);
 
-		// Add styles inline.
-		wp_add_inline_style( 'livro-style', livro_get_font_face_styles() );
-
 		// Enqueue theme stylesheet.
 		wp_enqueue_style( 'livro-style' );
-
 	}
 
 endif;
 
 add_action( 'wp_enqueue_scripts', 'livro_styles' );
 
-if ( ! function_exists( 'livro_editor_styles' ) ) :
-
-	/**
-	 * Enqueue editor styles.
-	 *
-	 * @since Livro 1.0
-	 *
-	 * @return void
-	 */
-	function livro_editor_styles() {
-
-		// Add styles inline.
-		wp_add_inline_style( 'wp-block-library', livro_get_font_face_styles() );
-
-	}
-
-endif;
 
 add_action( 'admin_init', 'livro_editor_styles' );
 
-
-if ( ! function_exists( 'livro_get_font_face_styles' ) ) :
-
-	/**
-	 * Get font face styles.
-	 * Called by functions livro_styles() and livro_editor_styles() above.
-	 *
-	 * @since Livro 1.0
-	 *
-	 * @return string
-	 */
-	function livro_get_font_face_styles() {
-
-		return "
-		@font-face{
-			font-family: 'Newsreader';
-			font-weight: 200 800;
-			font-style: normal;
-			font-stretch: normal;
-			font-display: swap;
-			src: url('" . get_theme_file_uri( 'assets/fonts/Newsreader.woff2' ) . "') format('woff2');
-		}
-
-		@font-face{
-			font-family: 'Newsreader';
-			font-weight: 200 800;
-			font-style: italic;
-			font-stretch: normal;
-			font-display: swap;
-			src: url('" . get_theme_file_uri( 'assets/fonts/Newsreader-italic.woff2' ) . "') format('woff2');
-		}
-		";
-
-	}
-
-endif;
-
-if ( ! function_exists( 'livro_preload_webfonts' ) ) :
-
-	/**
-	 * Preloads the main web font to improve performance.
-	 *
-	 * Only the main web font (font-style: normal) is preloaded here since that font is always relevant (it is used
-	 * on every heading, for example). The other font is only needed if there is any applicable content in italic style,
-	 * and therefore preloading it would in most cases regress performance when that font would otherwise not be loaded
-	 * at all.
-	 *
-	 * @since Livro 1.0
-	 *
-	 * @return void
-	 */
-	function livro_preload_webfonts() {
-		?>
-		<link rel="preload" href="<?php echo esc_url( get_theme_file_uri( 'assets/fonts/Newsreader.woff2' ) ); ?>" as="font" type="font/woff2" crossorigin>
-		<link rel="preload" href="<?php echo esc_url( get_theme_file_uri( 'assets/fonts/Newsreader-italic.woff2' ) ); ?>" as="font" type="font/woff2" crossorigin>
-		<?php
-	}
-
-endif;
-
-add_action( 'wp_head', 'livro_preload_webfonts' );
-
 // Add block patterns
 require get_template_directory() . '/inc/block-patterns.php';
-

livro/theme.json

@@ -80,7 +80,25 @@
 				{
 					"fontFamily": "\"Newsreader\", serif",
 					"name": "Newsreader",
-					"slug": "Newsreader"
+					"slug": "Newsreader",
+					"fontFace": [
+						{
+							"fontFamily": "Newsreader",
+							"fontDisplay": "block",
+							"fontWeight": "200 800",
+							"fontStyle": "normal",
+							"fontStretch": "normal",
+							"src": [ "file:./assets/fonts/Newsreader.woff2" ]
+						},
+						{
+							"fontFamily": "Newsreader",
+							"fontDisplay": "block",
+							"fontWeight": "200 800",
+							"fontStyle": "italic",
+							"fontStretch": "normal",
+							"src": [ "file:./assets/fonts/Newsreader-italic.woff2" ]
+						}
+					]
 				}
 			],
 			"fontSizes": [

remote/functions.php

@@ -51,9 +51,6 @@ if ( ! function_exists( 'remote_styles' ) ) :
 			wp_get_theme()->get( 'Version' )
 		);
 
-		// Add styles inline.
-		wp_add_inline_style( 'remote-style', remote_get_font_face_styles() );
-
 		// Enqueue theme stylesheet.
 		wp_enqueue_style( 'remote-style' );
 
@@ -63,102 +60,6 @@ endif;
 
 add_action( 'wp_enqueue_scripts', 'remote_styles' );
 
-if ( ! function_exists( 'remote_editor_styles' ) ) :
-
-	/**
-	 * Enqueue editor styles.
-	 *
-	 * @since Remote 1.0
-	 *
-	 * @return void
-	 */
-	function remote_editor_styles() {
-
-		// Add styles inline.
-		wp_add_inline_style( 'wp-block-library', remote_get_font_face_styles() );
-
-	}
-
-endif;
-
-add_action( 'admin_init', 'remote_editor_styles' );
-
-
-if ( ! function_exists( 'remote_get_font_face_styles' ) ) :
-
-	/**
-	 * Get font face styles.
-	 * Called by functions remote_styles() and remote_editor_styles() above.
-	 *
-	 * @since Remote 1.0
-	 *
-	 * @return string
-	 */
-	function remote_get_font_face_styles() {
-
-		return "
-		@font-face{
-			font-family: 'DM Sans';
-			font-weight: 400;
-			font-style: normal;
-			font-stretch: normal;
-			font-display: swap;
-			src: url('" . get_theme_file_uri( 'assets/fonts/DMSans-Regular.woff2' ) . "') format('woff2');
-		}
-		@font-face{
-			font-family: 'DM Sans';
-			font-weight: 700;
-			font-style: normal;
-			font-stretch: normal;
-			font-display: swap;
-			src: url('" . get_theme_file_uri( 'assets/fonts/DMSans-Bold.woff2' ) . "') format('woff2');
-		}
-		@font-face{
-			font-family: 'DM Sans';
-			font-weight: 400;
-			font-style: italic;
-			font-stretch: normal;
-			font-display: swap;
-			src: url('" . get_theme_file_uri( 'assets/fonts/DMSans-Italic.woff2' ) . "') format('woff2');
-		}
-		@font-face{
-			font-family: 'DM Sans';
-			font-weight: 700;
-			font-style: italic;
-			font-stretch: normal;
-			font-display: swap;
-			src: url('" . get_theme_file_uri( 'assets/fonts/DMSans-BoldItalic.woff2' ) . "') format('woff2');
-		}
-		";
-
-	}
-
-endif;
-
-if ( ! function_exists( 'remote_preload_webfonts' ) ) :
-
-	/**
-	 * Preloads the main web font to improve performance.
-	 *
-	 * Only the main web font (font-weight: 100,400, font-style: normal) is preloaded here since that font is always relevant.
-	 * The other fonts are only needed if the user changed style or weight of the fonts,
-	 * and therefore preloading it would in most cases regress performance when that font would otherwise not be loaded
-	 * at all.
-	 *
-	 * @since Remote 1.0
-	 *
-	 * @return void
-	 */
-	function remote_preload_webfonts() {
-		?>
-		<link rel="preload" href="<?php echo esc_url( get_theme_file_uri( 'assets/fonts/DMSans-Regular.woff2' ) ); ?>" as="font" type="font/woff2" crossorigin>
-		<?php
-	}
-
-endif;
-
-add_action( 'wp_head', 'remote_preload_webfonts' );
-
 /**
  * Block Patterns.
  */

remote/theme.json

@@ -54,7 +54,41 @@
 				{
 					"fontFamily": "\"DM Sans\", sans-serif",
 					"slug": "dm-sans",
-					"name": "Body (DM Sans)"
+					"name": "Body (DM Sans)",
+					"fontFace": [
+						{
+							"fontFamily": "DM Sans",
+							"fontDisplay": "block",
+							"fontWeight": "400",
+							"fontStyle": "normal",
+							"fontStretch": "normal",
+							"src": [ "file:./assets/fonts/DMSans-Regular.woff2" ]
+						},
+						{
+							"fontFamily": "DM Sans",
+							"fontDisplay": "block",
+							"fontWeight": "700",
+							"fontStyle": "normal",
+							"fontStretch": "normal",
+							"src": [ "file:./assets/fonts/DMSans-Bold.woff2" ]
+						},
+						{
+							"fontFamily": "DM Sans",
+							"fontDisplay": "block",
+							"fontWeight": "400",
+							"fontStyle": "italic",
+							"fontStretch": "normal",
+							"src": [ "file:./assets/fonts/DMSans-Italic.woff2" ]
+						},
+						{
+							"fontFamily": "DM Sans",
+							"fontDisplay": "block",
+							"fontWeight": "700",
+							"fontStyle": "italic",
+							"fontStretch": "normal",
+							"src": [ "file:./assets/fonts/DMSans-BoldItalic.woff2" ]
+						}
+					]
 				}
 			],
 			"fontSizes": [

stewart/functions.php

@@ -7,14 +7,6 @@ function stewart_support() {
 
 	// Add support for block styles.
 	add_theme_support( 'wp-block-styles' );
-
-	// Enqueue editor styles.
-	add_editor_style( 
-		array(
-			stewart_fonts_url(),
-			'style.css',
-		)
-	);
 }
 add_action( 'after_setup_theme', 'stewart_support' );
 
@@ -34,42 +26,8 @@ function stewart_styles() {
 
 	// Enqueue theme stylesheet.
 	wp_enqueue_style( 'stewart-style' );
-
-	// Enqueue Google fonts
-	wp_enqueue_style( 'seedlet-fonts', stewart_fonts_url(), array(), null );
 }
 add_action( 'wp_enqueue_scripts', 'stewart_styles' );
 
-
-/**
- * Add Google webfonts, if necessary
- *
- * - See: http://themeshaper.com/2014/08/13/how-to-add-google-fonts-to-wordpress-themes/
- */
-function stewart_fonts_url() {
-
-	$fonts_url = '';
-
-	/* Translators: If there are characters in your language that are not
-	* supported by Work Sans, translate this to 'off'. Do not translate
-	* into your own language.
-	*/
-	$work_sans = esc_html_x( 'on', 'Work Sans: on or off', 'stewart' );
-
-	if ( 'off' !== $work_sans ) {
-		$font_families = 'Work+Sans:ital,wght@0,400;0,700;1,400;1,700';
-
-		$query_args = array(
-			'family' => $font_families,
-			'subset' => 'latin,latin-ext',
-		);
-
-		$fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
-	}
-
-	return esc_url_raw( $fonts_url );
-}
-
 // Add block patterns
 require get_template_directory() . '/inc/block-patterns.php';
-

stewart/theme.json

@@ -119,7 +119,41 @@
 				{
 					"fontFamily": "'Work Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Helvetica', sans-serif",
 					"slug": "work-sans",
-					"name": "Work Sans"
+					"name": "Work Sans",
+					"fontFace": [
+						{
+							"fontFamily": "Work Sans",
+							"fontDisplay": "block",
+							"fontWeight": "400",
+							"fontStyle": "normal",
+							"fontStretch": "normal",
+							"src": [ "file:./assets/fonts/WorkSans-VariableFont_wght.ttf" ]
+						},
+						{
+							"fontFamily": "Work Sans",
+							"fontDisplay": "block",
+							"fontWeight": "700",
+							"fontStyle": "normal",
+							"fontStretch": "normal",
+							"src": [ "file:./assets/fonts/WorkSans-VariableFont_wght.ttf" ]
+						},
+						{
+							"fontFamily": "Work Sans",
+							"fontDisplay": "block",
+							"fontWeight": "400",
+							"fontStyle": "italic",
+							"fontStretch": "normal",
+							"src": [ "file:./assets/fonts/WorkSans-Italic-VariableFont_wght.ttf" ]
+						},
+						{
+							"fontFamily": "Work Sans",
+							"fontDisplay": "block",
+							"fontWeight": "700",
+							"fontStyle": "italic",
+							"fontStretch": "normal",
+							"src": [ "file:./assets/fonts/WorkSans-Italic-VariableFont_wght.ttf" ]
+						}
+					]
 				}
 			],
 			"fontSizes": [
@@ -351,4 +385,4 @@
 			"fontSize": "var(--wp--preset--font-size--normal)"
 		}
 	}
-}
+}