feat: noto sans eu (#3647)

* feat: reduce fonts by including only EU characters

* feat: reduce fonts by including only EU characters

* Update packages/foundations/assets/fonts/README.md

Co-authored-by: Maximilian Franzke <[email protected]>

* Update packages/foundations/assets/fonts/README.md

Co-authored-by: Maximilian Franzke <[email protected]>

* Update packages/foundations/assets/fonts/README.md

Co-authored-by: Maximilian Franzke <[email protected]>

* Update packages/foundations/assets/fonts/generate-eu-fonts.ts

Co-authored-by: Maximilian Franzke <[email protected]>

* chore: update snapshots

* Update unicode-eu.txt

* chore: revert snapshots

* chore: update unicodes

* chore: update unicodes

* chore: revert changes

* chore: update snapshots

---------

Co-authored-by: Maximilian Franzke <[email protected]>

.xo-config.cjs

@@ -1,6 +1,10 @@
 module.exports = {
 	prettier: true,
-	ignores: ['./showcases/nuxt-showcase/**', './packages/migration/**'],
+	ignores: [
+		'./showcases/nuxt-showcase/**',
+		'./packages/migration/**',
+		'./packages/foundations/assets/**'
+	],
 	overrides: [
 		{
 			files: ['./showcases/angular-showcase/**'],

packages/foundations/assets/fonts/README.md

@@ -0,0 +1,23 @@
+# Generate fonts
+
+To generate optimal fonts we use [fonttools](https://github.com/fonttools/fonttools). To use the tools you need python installed:
+
+1. Install [python](https://docs.python-guide.org/starting/installation/#installation) and [ensure that you can run Python from the command line](https://packaging.python.org/en/latest/tutorials/installing-packages/#ensure-you-can-run-python-from-the-command-line)
+2. Install fonttools: `pip3 install fonttools`
+3. Install brotli: `pip3 install brotli`
+
+Afterward, you can generate a font by running the following command:
+
+```shell
+pyftsubset NotoSans-Regular.ttf --layout-features=* --flavor=woff2 --unicodes-file=unicode-eu.txt --output-file=NotoSans-Regular-EU.woff2
+```
+
+## Local development
+
+You can use `packages/foundations/assets/fonts/generate-eu-fonts.ts` to generate all fonts inside this directory. To do so, run the following command:
+
+```shell
+node packages/foundations/assets/fonts/generate-eu-fonts.ts
+```
+
+To check if everything works fine you can check all glyphs with an [opentype.js.org glyph inspector tool](https://opentype.js.org/glyph-inspector.html).

packages/foundations/assets/fonts/generate-eu-fonts.ts

@@ -0,0 +1,40 @@
+import { exec } from 'node:child_process';
+import { promisify } from 'node:util';
+import { glob } from 'glob';
+
+const execAsync = promisify(exec);
+
+const generateFonts = async () => {
+	console.log('Generating EU fonts...');
+	try {
+		await execAsync('pyftsubset --help');
+	} catch (e) {
+		console.warn(
+			'You need to install pyftsubset. Check packages/foundations/assets/fonts/README.md for more information.'
+		);
+	}
+
+	try {
+		const files = await glob('**/*.ttf');
+		const commands = files.map((file) =>
+			[
+				'pyftsubset',
+				file,
+				'--layout-features=*',
+				'--flavor=woff2',
+				'--unicodes-file=unicode-eu.txt',
+				`--output-file=${file.replace('.ttf', '-EU.woff2')}`
+			].join(' ')
+		);
+
+		for (const command of commands) {
+			const { stdout, stderr } = await execAsync(command);
+			if (stdout) console.log(`stdout: ${stdout}`);
+			if (stderr) console.error(`stderr: ${stderr}`);
+		}
+	} catch (error) {
+		console.error(`Error: ${error.message}`);
+	}
+};
+
+void generateFonts();

packages/foundations/assets/fonts/unicode-eu.txt

@@ -0,0 +1,14 @@
+# compare to https://symbl.cc/de/unicode-table/
+U+0000-024F # Latin (all)
+U+0020,U+0009,U+000A,U+000D # white space characters
+U+00E4,U+00F6,U+00FC,U+00DF # German characters
+U+00E9, U+00E8, U+00EA, U+00E0, U+00E7, U+0153 # French characters
+U+00E0, U+00E8, U+00E9, U+00F2, U+00F9, U+00EC, U+00C0, U+00C8, U+00C9, U+00D2, U+00D9, U+00CC # Italian characters
+U+FB00, U+FB01, U+FB02, U+FB03, U+FB04, U+FB05, U+FB06 # ligatures
+U+00E1, U+00E9, U+00ED, U+00F3, U+00FA, U+00F1, U+00BF, U+00A1 # Spanish characters
+U+00E5, U+00F8, U+00E6, U+00C5, U+00D8, U+00C6 # Scandinavian characters
+U+0104, U+0105, U+0106, U+0107, U+0118, U+0119, U+0141, U+0142, U+0143, U+0144, U+015A, U+015B, U+0179, U+017A, U+017B, U+017C # Polish characters
+U+010C, U+010D, U+010E, U+010F, U+011A, U+011B, U+0147, U+0148, U+0158, U+0159, U+0160, U+0161, U+0164, U+0165, U+016E, U+016F, U+017D, U+017E # Czech characters
+U+00E9, U+00E8, U+00EB, U+00E4, U+00FC, U+00F6, U+00EF, U+00C9, U+00C8, U+00CB, U+00C4, U+00DC, U+00D6, U+00CF # Netherlands characters
+U+0391-03A9, U+03B1-03C9 # Greek characters
+U+0410-042F, U+0430-044F # Cyrillic characters

packages/foundations/package.json

@@ -48,6 +48,7 @@
     "cpr": "3.0.1",
     "cssnano": "^7.0.6",
     "dotenv": "^16.4.7",
+    "glob": "11.0.0",
     "nodemon": "3.1.9",
     "sass": "1.77.4",
     "tsx": "^4.19.2",

packages/foundations/scss/fonts/include.scss

@@ -4,49 +4,54 @@
 	font-family: NotoSans;
 	font-style: normal;
 	font-weight: 300;
-	src: url("#{assets-paths.$fonts-path}NotoSans-Thin.woff2") format("woff2");
+	src: url("#{assets-paths.$fonts-path}NotoSans-Thin-EU.woff2")
+		format("woff2");
 }
 
 @font-face {
 	font-family: NotoSans;
 	font-style: normal;
 	font-weight: 400;
-	src: url("#{assets-paths.$fonts-path}NotoSans-Regular.woff2")
+	src: url("#{assets-paths.$fonts-path}NotoSans-Regular-EU.woff2")
 		format("woff2");
 }
 
 @font-face {
 	font-family: NotoSans;
 	font-style: normal;
 	font-weight: 500;
-	src: url("#{assets-paths.$fonts-path}NotoSans-Medium.woff2") format("woff2");
+	src: url("#{assets-paths.$fonts-path}NotoSans-Medium-EU.woff2")
+		format("woff2");
 }
 
 @font-face {
 	font-family: NotoSans;
 	font-style: normal;
 	font-weight: 600;
-	src: url("#{assets-paths.$fonts-path}NotoSans-SemiBold.woff2")
+	src: url("#{assets-paths.$fonts-path}NotoSans-SemiBold-EU.woff2")
 		format("woff2");
 }
 
 @font-face {
 	font-family: NotoSans;
 	font-style: normal;
 	font-weight: 700;
-	src: url("#{assets-paths.$fonts-path}NotoSans-Bold.woff2") format("woff2");
+	src: url("#{assets-paths.$fonts-path}NotoSans-Bold-EU.woff2")
+		format("woff2");
 }
 
 @font-face {
 	font-family: "NotoSans Head";
 	font-style: normal;
 	font-weight: 300;
-	src: url("#{assets-paths.$fonts-path}NotoSans-Light.woff2") format("woff2");
+	src: url("#{assets-paths.$fonts-path}NotoSans-Light-EU.woff2")
+		format("woff2");
 }
 
 @font-face {
 	font-family: "NotoSans Head";
 	font-style: normal;
 	font-weight: 900;
-	src: url("#{assets-paths.$fonts-path}NotoSans-Black.woff2") format("woff2");
+	src: url("#{assets-paths.$fonts-path}NotoSans-Black-EU.woff2")
+		format("woff2");
 }