It should be possible to register font families with external sources

[andrewleap]

If we load fonts from an external source, we should be allowed to add the font families and font faces to theme.json

Currently, declaring a font face with no or empty source will result in an error being printed on the front end. When the source is empty, this is handled gracefully in the site editor.

It should also simply skip the font face declaration on the front end too (it currently does this, but not without printing an error)

Relevant snippets

Gutenberg

/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js

/*
 * Loads the font face from a URL and adds it to the browser.
 * It also adds it to the iframe document.
 */
export async function loadFontFaceInBrowser( fontFace, source, addTo = 'all' ) {
	let dataSource;

	if ( typeof source === 'string' ) {
		dataSource = `url(${ source })`;
		// eslint-disable-next-line no-undef
	} else if ( source instanceof File ) {
		dataSource = await source.arrayBuffer();
	} else {
		return;
	}

	const newFont = new window.FontFace(
		formatFontFaceName( fontFace.fontFamily ),
		dataSource,
		{
			style: fontFace.fontStyle,
			weight: fontFace.fontWeight,
		}
	);

	const loadedFace = await newFont.load();

	if ( addTo === 'document' || addTo === 'all' ) {
		document.fonts.add( loadedFace );
	}

	if ( addTo === 'iframe' || addTo === 'all' ) {
		const iframeDocument = document.querySelector(
			'iframe[name="editor-canvas"]'
		).contentDocument;
		iframeDocument.fonts.add( loadedFace );
	}
}

Core

/wp-includes/fonts/class-wp-font-face.php

if ( empty( $font_face['src'] ) || ( ! is_string( $font_face['src'] ) && ! is_array( $font_face['src'] ) ) ) {
	// @todo replace with `wp_trigger_error()`.
	_doing_it_wrong(
		__METHOD__,
		__( 'Font src must be a non-empty string or an array of strings.' ),
		'6.4.0'
	);
	return false;
}

The following should be possible:

/wp-content/theme/functions.php

// Enqueue Typekit embed link on both front-end and editor
add_action( 'wp_enqueue_scripts', 'afi_enqueue_typekit' );
add_action( 'enqueue_block_editor_assets', 'afi_enqueue_typekit' );
function afi_enqueue_typekit() {
	$project_id = get_option( 'afi_typekit_id' );
	if ( $project_id ) {
		wp_enqueue_style( 'afi-adobe-fonts', "https://use.typekit.net/{$project_id}.css", array(), null );
	}
}

wp-content/theme/theme.json

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"typography": {
			"fontFamilies": [
				{
					"name": "Proxima Nova",
					"slug": "proxima-nova",
					"fontFamily": "Proxima Nova, sans-serif",
					"fontFace": [
						{
							"fontWeight": "200 800",
							"fontStyle": "normal",
							"fontFamily": "Proxima Nova"
						}
					]
				}
			]
		}
	}
}