feat(woff): pyftsubset subset script (#7)

.github/workflows/release.yml

@@ -16,7 +16,7 @@ jobs:
       - uses: actions/checkout@v3
       - name: Install packages
         run: |
-          brew install imagemagick jq
+          brew install imagemagick jq fonttools
       - uses: actions/setup-node@v3
         with:
           cache: 'yarn'

Makefile

@@ -3,6 +3,7 @@ DIST = dist
 
 RESIZE = 512x512
 QUALITY = 80
+FONTCHARS = ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789,;.:-_<>$$£!+\"*ç%&/~[]{}()=?\`^\'#€öÖäÄüܧ°
 
 #
 # Build TARGETS
@@ -66,7 +67,7 @@ $(DIST)/%.js: $(SRC)/%.b64
 	cat $< | jq -c > $@
 
 %.woff.compressed: %.woff
-	cp $< $@
+	node ./bin/subset.js $< "$(FONTCHARS)" $@
 
 %.glb.compressed: %.glb
 	npx gltf-transform optimize $< $*.tmp.glb

README.md

@@ -59,7 +59,7 @@ Keep [bundler limitations](https://github.com/rollup/plugins/tree/master/package
 
 ### Import (with care ⚠️)
 
-You can of course also directly import the assets, but *do it only in modules that already are split from the main bundle*! It is not recommended for your entry points as it would considerally impede time-to-load.
+You can of course also directly import the assets, but _do it only in modules that already are split from the main bundle_! It is not recommended for your entry points as it would considerally impede time-to-load.
 
 ```jsx
 import city from '@pmndrs/assets/hdri/city.exr'
@@ -71,7 +71,7 @@ new THREE.EXRLoader().load(city, (texture) => {
 
 # Fonts
 
-The [Inter](https://rsms.me/inter/) font family converted to *.json using [facetype.js](https://gero3.github.io/facetype.js), and *.woff using [fontmin](https://github.com/ecomfe/fontmin) with a subset of `ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789,;.:-_<>$£!+"*ç%&/~[]{}()=?``^'#€öÖäÄüܧ°`. Each json is ~30-40kb, each woff ~100-200kb.
+The [Inter](https://rsms.me/inter/) font family converted to _.json using [facetype.js](https://gero3.github.io/facetype.js), and _.woff using [fontmin](https://github.com/ecomfe/fontmin) with a subset of ` ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789,;.:-_<>$£!+"*ç%&/~[]{}()=?``^'#€öÖäÄüܧ° `. Each json is ~30-40kb, each woff ~100-200kb.
 
 ```js
 import interJson from '@pmndrs/assets/fonts/inter_regular.json'
@@ -130,6 +130,7 @@ Pre-requisites:
 - Nodejs
 - ImageMagick 7+
 - jq
+- fonttools
 - openssl
 
 ```sh

bin/subset.js

@@ -0,0 +1,43 @@
+#!/usr/bin/env node
+
+//
+// $ node ./bin/subset.js myfont.woff ABCDEFG mysubsetfont.woff
+//
+
+import { exec } from 'child_process'
+
+// Function to convert a string to Unicode
+function toUnicode(theString) {
+  let unicodeString = ''
+  for (let i = 0; i < theString.length; i++) {
+    let theUnicode = theString.charCodeAt(i).toString(16).toUpperCase()
+    while (theUnicode.length < 4) {
+      theUnicode = '0' + theUnicode
+    }
+    unicodeString += 'U+' + theUnicode
+    if (i < theString.length - 1) {
+      unicodeString += ','
+    }
+  }
+  return unicodeString
+}
+
+// Function to call pyftsubset
+function subsetFont(fontName, unicodeString, outputName) {
+  const cmd = `pyftsubset ${fontName} --unicodes=${unicodeString} --flavor=woff --output-file=${outputName}`
+
+  exec(cmd, (error, stdout, stderr) => {
+    if (error) throw error
+    process.stdout.write(stdout)
+  })
+}
+
+// Get command line arguments
+const args = process.argv.slice(2)
+if (args.length !== 3) {
+  console.error('Usage: node subset.js <font name> <characters> <output file name>')
+  process.exit(1)
+}
+
+// Convert to Unicode and call pyftsubset
+subsetFont(args[0], toUnicode(args[1]), args[2])