Fonts: Add Noto Serif SC, KR, and subsetting tool for CJK (#684)

* Fonts: Add Noto Serif CJK, Simplified Chinese version

* Add Noto Serif SC font to preloader script

* Switch to a filter for font settings

* Use the correct region-subsetted font

* Fonts: Add Noto Serif KR

* Try font subsetting for CJK fonts

* Update bin/font-subset-cjk.js

Author: ryelle

bin/font-subset-cjk.js

@@ -0,0 +1,43 @@
+#!/usr/bin/env node
+/* eslint-disable no-console */
+/**
+ * Prerequisite:
+ * 1. `yarn` to make sure you have the current packages.
+ * Usage:
+ * 1. Add {"type": "module"} to package.json.
+ * 2. Add the `.ttf` font to /fonts/.
+ * 3. Update the fontNames value.
+ * 4. Run 'yarn font-subset-cjk'.
+ * 5. Remove {"type": "module"} from package.json or the linter would prompt an error.
+ */
+import { readFileSync, unlinkSync } from 'node:fs';
+import path from 'node:path';
+import { fontSplit } from 'cn-font-split';
+
+const fontNames = [ 'NotoSerifJP', 'NotoSerifKR', 'NotoSerifSC' ];
+
+for ( let i = 0; i < fontNames.length; i++ ) {
+	const fontName = fontNames[ i ];
+	const fontPath = path.resolve( `./fonts/${ fontName }.ttf` );
+	const inputBuffer = new Uint8Array( readFileSync( fontPath ).buffer );
+	const outputDir = `./mu-plugins/global-fonts/NotoSerif/${ fontName }`;
+
+	await fontSplit( {
+		input: inputBuffer,
+		outDir: outputDir,
+		// This seems to be a maximum, not average. Subset files won't exceed this size.
+		chunkSize: 5 * 1024 * 1024, // 5MB
+		reduceMins: false,
+		renameOutputFont: `${ fontName }-[index].[ext]`,
+		testHtml: false,
+		reporter: false,
+		css: {
+			compress: false,
+			fileName: 'style.css',
+		},
+		silent: false,
+	} );
+
+	// Remove unnecessary file.
+	unlinkSync( `${ outputDir }/index.proto` );
+}

fonts/NotoSerifJP.ttf

@@ -359,17 +359,15 @@ function render_global_header( $attributes = array() ) {
 
 	// Preload the menu font.
 	if ( is_callable( 'global_fonts_preload' ) ) {
-		if ( 'ckb' === get_locale() ) {
-			global_fonts_preload( 'Noto Kufi', 'arabic' );
-		} else {
-			/*
-			 * translators: Font subset for your locale. Can be any of cyrillic,
-			 * cyrillic-ext, greek, greek-ext, vietnamese, latin, latin-ext.
-			 * Do not translate into your own language.
-			 */
-			$subsets = _x( 'latin', 'Inter subsets, comma separated', 'wporg' );
-			global_fonts_preload( 'Inter', $subsets );
-		}
+		/*
+		 * translators: Font subset for your locale. Can be any of cyrillic,
+		 * cyrillic-ext, greek, greek-ext, vietnamese, latin, latin-ext.
+		 * Do not translate into your own language. If you don't use Inter
+		 * for body text, you can ignore this.
+		 */
+		$subsets = _x( 'latin', 'Inter subsets, comma separated', 'wporg' );
+		list( $font, $subsets ) = apply_filters( 'wporg_preload_body_font', [ 'Inter', $subsets ] );
+		global_fonts_preload( $font, $subsets );
 	}
 
 	// The mobile Get WordPress button needs to be in both menus.