CYS - Core: fix font load when user opts out of tracking

plugins/woocommerce-admin/client/customize-store/assembler-hub/preload-fonts.tsx

@@ -46,6 +46,13 @@ export const PreloadFonts = () => {
 		} ) => void
 	] = useGlobalSetting( 'typography.fontFamilies' );
 
+	// theme.json file font families
+	const [ baseFontFamilies ] = useGlobalSetting(
+		'typography.fontFamilies',
+		undefined,
+		'base'
+	);
+
 	const { context } = useContext( CustomizeStoreContext );
 
 	const { globalStylesId, installedFontFamilies } = useSelect( ( select ) => {
@@ -176,7 +183,10 @@ export const PreloadFonts = () => {
 				) ) }
 			{ isNoAIFlow( context.flowType ) && (
 				<FontFamiliesLoader
-					fontFamilies={ enabledFontFamilies.custom }
+					fontFamilies={ [
+						...( enabledFontFamilies.custom ?? [] ),
+						...baseFontFamilies.theme,
+					] }
 					iframeInstance={ iframeInstance }
 				/>
 			) }

plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/constants.ts

@@ -474,7 +474,8 @@ export const FONT_PAIRINGS_WHEN_USER_DID_NOT_ALLOW_TRACKING = [
 					theme: [
 						{
 							fontFamily: 'Cardo',
-							slug: 'cardo',
+							// Use the theme-defined variable: https://github.com/WordPress/twentytwentyfour/blob/trunk/theme.json#L240
+							slug: 'heading',
 						},
 						{
 							fontFamily: 'System Sans-serif',
@@ -488,7 +489,7 @@ export const FONT_PAIRINGS_WHEN_USER_DID_NOT_ALLOW_TRACKING = [
 			elements: {
 				heading: {
 					typography: {
-						fontFamily: 'var(--wp--preset--font-family--cardo)',
+						fontFamily: 'var(--wp--preset--font-family--heading)',
 						fontStyle: 'normal',
 						fontWeight: '300',
 					},
@@ -499,41 +500,6 @@ export const FONT_PAIRINGS_WHEN_USER_DID_NOT_ALLOW_TRACKING = [
 			},
 		},
 	},
-	{
-		title: 'Jost + Instrument Sans',
-		version: 2,
-		lookAndFeel: [] as Look[],
-		settings: {
-			typography: {
-				fontFamilies: {
-					theme: [
-						{
-							fontFamily: 'Jost',
-							slug: 'jost',
-						},
-						{
-							fontFamily: 'Instrument Sans',
-							slug: 'instrument-sans',
-						},
-					],
-				},
-			},
-		},
-		styles: {
-			elements: {
-				heading: {
-					typography: {
-						fontFamily: 'var(--wp--preset--font-family--jost)',
-						fontStyle: 'normal',
-						fontWeight: '100 900',
-					},
-				},
-			},
-			typography: {
-				fontFamily: 'var(--wp--preset--font-family--instrument-sans)',
-			},
-		},
-	},
 	{
 		title: 'Inter + Cardo Font',
 		version: 2,
@@ -544,11 +510,13 @@ export const FONT_PAIRINGS_WHEN_USER_DID_NOT_ALLOW_TRACKING = [
 					theme: [
 						{
 							fontFamily: 'Inter',
-							slug: 'inter',
+							// Use the theme-defined variable: https://github.com/WordPress/twentytwentyfour/blob/trunk/theme.json#L215
+							slug: 'body',
 						},
 						{
 							fontFamily: 'Cardo',
-							slug: 'cardo',
+							// Use the theme-defined variable: https://github.com/WordPress/twentytwentyfour/blob/trunk/theme.json#L240
+							slug: 'heading',
 						},
 					],
 				},
@@ -558,14 +526,14 @@ export const FONT_PAIRINGS_WHEN_USER_DID_NOT_ALLOW_TRACKING = [
 			elements: {
 				heading: {
 					typography: {
-						fontFamily: 'var(--wp--preset--font-family--inter)',
+						fontFamily: 'var(--wp--preset--font-family--body)',
 						fontStyle: 'normal',
 						fontWeight: '300',
 					},
 				},
 			},
 			typography: {
-				fontFamily: 'var(--wp--preset--font-family--cardo)',
+				fontFamily: 'var(--wp--preset--font-family--heading)',
 			},
 		},
 	},

plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/font-families-loader.tsx

@@ -55,19 +55,19 @@ export const FontFamiliesLoader = ( {
 		};
 	} );
 
-	const themeUrl =
-		site?.url + '/wp-content/themes/' + currentTheme?.stylesheet;
-
 	useEffect( () => {
-		if ( ! Array.isArray( fontFamilies ) ) {
+		if ( ! Array.isArray( fontFamilies ) || ! site ) {
 			return;
 		}
+
+		const themeUrl =
+			site?.url + '/wp-content/themes/' + currentTheme?.stylesheet;
 		fontFamilies.forEach( async ( fontFamily ) => {
 			fontFamily.fontFace?.forEach( async ( fontFace ) => {
-				const srcFont = getDisplaySrcFromFontFace(
-					fontFace.src,
-					themeUrl
-				);
+				const src = Array.isArray( fontFace.src )
+					? fontFace.src[ 0 ]
+					: fontFace.src;
+				const srcFont = getDisplaySrcFromFontFace( src, themeUrl );
 				const dataSource = `url(${ srcFont })`;
 				const newFont = new FontFace( fontFace.fontFamily, dataSource, {
 					style: fontFace.fontStyle,
@@ -85,7 +85,13 @@ export const FontFamiliesLoader = ( {
 				}
 			} );
 		} );
-	}, [ fontFamilies, iframeInstance, onLoad, themeUrl ] );
+	}, [
+		currentTheme?.stylesheet,
+		fontFamilies,
+		iframeInstance,
+		onLoad,
+		site,
+	] );
 
 	return <></>;
 };

plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/index.tsx

@@ -51,6 +51,17 @@ export const FontPairing = () => {
 		Array< FontFamily >
 	];
 
+	// theme.json file font families
+	const [ baseFontFamilies ] = useGlobalSetting(
+		'typography.fontFamilies',
+		undefined,
+		'base'
+	) as [
+		{
+			theme: Array< FontFamily >;
+		}
+	];
+
 	const { context } = useContext( CustomizeStoreContext );
 	const aiOnline = context.flowType === FlowType.AIOnline;
 	const isFontLibraryAvailable = context.isFontLibraryAvailable;
@@ -71,7 +82,30 @@ export const FontPairing = () => {
 		}
 
 		if ( ! trackingAllowed || ! isFontLibraryAvailable ) {
-			return FONT_PAIRINGS_WHEN_USER_DID_NOT_ALLOW_TRACKING;
+			return FONT_PAIRINGS_WHEN_USER_DID_NOT_ALLOW_TRACKING.map(
+				( pair ) => {
+					const fontFamilies = pair.settings.typography.fontFamilies;
+
+					const fonts = baseFontFamilies.theme.filter(
+						( baseFontFamily ) =>
+							fontFamilies.theme.some(
+								( themeFont ) =>
+									themeFont.fontFamily === baseFontFamily.name
+							)
+					);
+
+					return {
+						...pair,
+						settings: {
+							typography: {
+								fontFamilies: {
+									theme: fonts,
+								},
+							},
+						},
+					};
+				}
+			);
 		}
 
 		return FONT_PAIRINGS_WHEN_AI_IS_OFFLINE.map( ( pair ) => {
@@ -96,6 +130,7 @@ export const FontPairing = () => {
 	}, [
 		aiOnline,
 		aiSuggestions?.lookAndFeel,
+		baseFontFamilies,
 		context.flowType,
 		custom,
 		isFontLibraryAvailable,

plugins/woocommerce-admin/client/customize-store/design-without-ai/fonts.ts

@@ -187,7 +187,9 @@ export const installFontFace = async (
 	index: number
 ) => {
 	const { fontFamilyId, ...font } = data;
-	const fontFaceAssets = await downloadFontFaceAssets( font.src );
+	const fontFaceAssets = await downloadFontFaceAssets(
+		Array.isArray( font.src ) ? font.src[ 0 ] : font.src
+	);
 	const formData = new FormData();
 
 	const fontFile = await makeFontFacesFormData(

plugins/woocommerce-admin/client/customize-store/design-without-ai/services.ts

@@ -5,6 +5,7 @@ import { Sender } from 'xstate';
 import { recordEvent } from '@woocommerce/tracks';
 import apiFetch from '@wordpress/api-fetch';
 import { resolveSelect, dispatch } from '@wordpress/data';
+import { OPTIONS_STORE_NAME } from '@woocommerce/data';
 // @ts-expect-error -- No types for this exist yet.
 // eslint-disable-next-line @woocommerce/dependency-group
 import { mergeBaseAndUserConfigs } from '@wordpress/edit-site/build-module/components/global-styles/global-styles-provider';
@@ -27,7 +28,11 @@ import {
 	getFontFamiliesAndFontFaceToInstall,
 } from './fonts';
 import { COLOR_PALETTES } from '../assembler-hub/sidebar/global-styles/color-palette-variations/constants';
-import { FONT_PAIRINGS_WHEN_AI_IS_OFFLINE } from '../assembler-hub/sidebar/global-styles/font-pairing-variations/constants';
+import {
+	FONT_PAIRINGS_WHEN_AI_IS_OFFLINE,
+	FONT_PAIRINGS_WHEN_USER_DID_NOT_ALLOW_TRACKING,
+} from '../assembler-hub/sidebar/global-styles/font-pairing-variations/constants';
+import { DesignWithoutAIStateMachineContext } from './types';
 
 const assembleSite = async () => {
 	await updateTemplate( {
@@ -150,10 +155,21 @@ const createProducts = async () => {
 	}
 };
 
-const updateGlobalStylesWithDefaultValues = async () => {
+const updateGlobalStylesWithDefaultValues = async (
+	context: DesignWithoutAIStateMachineContext
+) => {
 	// We are using the first color palette and font pairing that are displayed on the color/font picker on the sidebar.
 	const colorPalette = COLOR_PALETTES[ 0 ];
-	const fontPairing = FONT_PAIRINGS_WHEN_AI_IS_OFFLINE[ 0 ];
+
+	const allowTracking =
+		( await resolveSelect( OPTIONS_STORE_NAME ).getOption(
+			'woocommerce_allow_tracking'
+		) ) === 'yes';
+
+	const fontPairing =
+		context.isFontLibraryAvailable && allowTracking
+			? FONT_PAIRINGS_WHEN_AI_IS_OFFLINE[ 0 ]
+			: FONT_PAIRINGS_WHEN_USER_DID_NOT_ALLOW_TRACKING[ 0 ];
 
 	// @ts-expect-error No types for this exist yet.
 	const { invalidateResolutionForStoreSelector } = dispatch( coreStore );

plugins/woocommerce-admin/client/customize-store/types/font.ts

@@ -19,5 +19,5 @@ export type FontFace = {
 	fontStretch?: string;
 	fontStyle: string;
 	fontWeight: string;
-	src: string;
+	src: Array< string > | string;
 };

plugins/woocommerce/changelog/45185-45138-cys-core-font-preview-and-site-preview-fail-to-load-fonts-when-user-opts-out-of-tracking

@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+CYS - Core: fix font load when user opts out of tracking.