feat: allow changing fonts

Author: aradzie

package-lock.json

@@ -12,8 +12,10 @@ export const preloadLinks: readonly PreloadLink[] = [
   ),
   // Preload fonts.
   ...[
-    "/assets/opensans-400.latin.woff2",
-    "/assets/ubuntu-mono-400.latin.woff2",
+    "/assets/open-sans-400.latin.woff2",
+    "/assets/open-sans-400italic.latin.woff2",
+    "/assets/open-sans-700.latin.woff2",
+    "/assets/open-sans-700italic.latin.woff2",
   ].map(
     (href) =>
       ({

packages/keybr-assets/lib/preload.ts

@@ -0,0 +1,167 @@
+SplineFontDB: 3.2
+FontName: Whitespace
+FullName: Whitespace
+FamilyName: Whitespace
+Weight: Regular
+Copyright: Copyright (c) 2024, keybr.com
+UComments: "Created with FontForge (http://fontforge.org)"
+Version: 1.0
+ItalicAngle: 0
+UnderlinePosition: -409.6
+UnderlineWidth: 204.8
+Ascent: 1638
+Descent: 410
+InvalidEm: 0
+LayerCount: 2
+Layer: 0 0 "Back" 1
+Layer: 1 0 "Fore" 0
+XUID: [1021 148 372288191 4003857]
+FSType: 0
+OS2Version: 0
+OS2_WeightWidthSlopeOnly: 0
+OS2_UseTypoMetrics: 0
+CreationTime: 1712250907
+ModificationTime: 1712315091
+PfmFamily: 17
+TTFWeight: 400
+TTFWidth: 5
+LineGap: 0
+VLineGap: 0
+OS2TypoAscent: 1419
+OS2TypoAOffset: 0
+OS2TypoDescent: -338
+OS2TypoDOffset: 0
+OS2TypoLinegap: 100
+OS2WinAscent: 1700
+OS2WinAOffset: 0
+OS2WinDescent: 348
+OS2WinDOffset: 0
+HheadAscent: 1700
+HheadAOffset: 0
+HheadDescent: -348
+HheadDOffset: 0
+OS2CapHeight: 1419
+OS2XHeight: 1065
+OS2Vendor: 'PfEd'
+MarkAttachClasses: 1
+DEI: 91125
+LangName: 1033
+Encoding: UnicodeBmp
+UnicodeInterp: none
+NameList: AGL For New Fonts
+DisplaySize: -72
+AntiAlias: 1
+FitToEm: 0
+WinInfo: 57330 14 7
+BeginPrivate: 0
+EndPrivate
+Grid
+0 716.799804688 m 25
+ 1024 716.799804688 l 1053
+0 614.400390625 m 25
+ 1024 614.400390625 l 1049
+0 512 m 25
+ 1024 512 l 1049
+0 102.400390625 m 25
+ 1024 102.400390625 l 1049
+0 204.799804688 m 25
+ 1024 204.799804688 l 1049
+0 307.200195312 m 25
+ 1024 307.200195312 l 1049
+0 409.599609375 m 25
+ 1024 409.599609375 l 1049
+0 1638.40039062 m 1
+ 1024 1638.40039062 l 1
+ 1024 0 l 1
+ 0 0 l 1
+ 0 1638.40039062 l 1
+EndSplineSet
+TeXData: 1 0 0 524288 262144 174762 0 1048576 174762 783286 444596 497025 792723 393216 433062 380633 303038 157286 324010 404750 52429 2506097 1059062 262144
+BeginChars: 65536 4
+
+StartChar: uniE000
+Encoding: 57344 57344 0
+Width: 1024
+Flags: HW
+LayerCount: 2
+Fore
+SplineSet
+664 532 m 0
+ 664 491 650 455 623 424 c 128
+ 596 393 559 377 514 377 c 0
+ 467 377 430 393 403 424 c 128
+ 376 455 362 491 362 532 c 0
+ 362 575 376 612 403 643 c 128
+ 430 674 467 690 514 690 c 0
+ 559 690 596 674 623 643 c 128
+ 650 612 664 575 664 532 c 0
+EndSplineSet
+Validated: 1
+EndChar
+
+StartChar: uniE001
+Encoding: 57345 57345 1
+Width: 1024
+Flags: HW
+LayerCount: 2
+Fore
+SplineSet
+164 0 m 1
+ 164 205 l 1
+ 287 205 l 1
+ 287 102 l 1
+ 737 102 l 1
+ 737 205 l 1
+ 860 205 l 1
+ 860 0 l 1
+ 164 0 l 1
+EndSplineSet
+Validated: 1
+EndChar
+
+StartChar: uniE002
+Encoding: 57346 57346 2
+Width: 1024
+Flags: HW
+LayerCount: 2
+Fore
+SplineSet
+102 449 m 1
+ 102 571 l 1
+ 594 571 l 1
+ 594 674 l 1
+ 758 512 l 1
+ 594 346 l 1
+ 594 449 l 1
+ 102 449 l 1
+819 674 m 1
+ 922 674 l 1
+ 922 346 l 1
+ 819 346 l 1
+ 819 674 l 1
+EndSplineSet
+Validated: 1
+EndChar
+
+StartChar: uniE003
+Encoding: 57347 57347 3
+Width: 1024
+Flags: HW
+LayerCount: 2
+Fore
+SplineSet
+819 582 m 1
+ 819 358 l 1
+ 328 358 l 1
+ 328 256 l 1
+ 164 410 l 1
+ 328 563 l 1
+ 328 461 l 1
+ 717 461 l 1
+ 717 582 l 1
+ 819 582 l 1
+EndSplineSet
+Validated: 1
+EndChar
+EndChars
+EndSplineFont

packages/keybr-fonts/Whitespace.sfd packages/keybr-fonts/Whitespace-em1000.sfd

@@ -1,5 +1,7 @@
 #!/bin/env python3
 
+# https://markoskon.com/creating-font-subsets/
+
 from fontTools.ttLib import TTFont
 from fontTools.subset import parse_unicodes, Subsetter
 from fontTools.merge import Merger
@@ -26,16 +28,32 @@ def __init__(self, font_file, font_name, merge_file=None):
 
         self.font_family = font_family
         self.font_subfamily = font_subfamily
-        self.font_weight = (
-            "700"
-            if font_subfamily == "Bold" or font_subfamily == "Bold Italic"
-            else "400"
-        )
-        self.font_style = (
-            "italic"
-            if font_subfamily == "Italic" or font_subfamily == "Bold Italic"
-            else "normal"
-        )
+
+        if font_subfamily == "Light":
+            self.font_weight = 300
+            self.font_style = "normal"
+        if font_subfamily == "Light Italic":
+            self.font_weight = 300
+            self.font_style = "italic"
+        if font_subfamily == "Regular":
+            self.font_weight = 400
+            self.font_style = "normal"
+        if font_subfamily == "Italic":
+            self.font_weight = 400
+            self.font_style = "italic"
+        if font_subfamily == "Medium":
+            self.font_weight = 500
+            self.font_style = "normal"
+        if font_subfamily == "Medium Italic":
+            self.font_weight = 500
+            self.font_style = "italic"
+        if font_subfamily == "Bold":
+            self.font_weight = 700
+            self.font_style = "normal"
+        if font_subfamily == "Bold Italic":
+            self.font_weight = 700
+            self.font_style = "italic"
+
         self.font_name = (
             f"{font_name}-{self.font_weight}italic"
             if self.font_style == "italic"
@@ -93,39 +111,63 @@ def generate(font_file, font_name, merge_file=None):
 def main():
     generate(
         "fonts/OpenSans/static/OpenSans-Regular.ttf",
-        "opensans",
+        "open-sans",
+        merge_file="Whitespace-em2048.ttf",
     )
     generate(
         "fonts/OpenSans/static/OpenSans-Italic.ttf",
-        "opensans",
+        "open-sans",
+        merge_file="Whitespace-em2048.ttf",
     )
     generate(
         "fonts/OpenSans/static/OpenSans-Bold.ttf",
-        "opensans",
+        "open-sans",
+        merge_file="Whitespace-em2048.ttf",
     )
     generate(
         "fonts/OpenSans/static/OpenSans-BoldItalic.ttf",
-        "opensans",
+        "open-sans",
+        merge_file="Whitespace-em2048.ttf",
+    )
+    generate(
+        "fonts/RobotoMono/static/RobotoMono-Regular.ttf",
+        "roboto-mono",
+        merge_file="Whitespace-em2048.ttf",
+    )
+    generate(
+        "fonts/RobotoMono/static/RobotoMono-Italic.ttf",
+        "roboto-mono",
+        merge_file="Whitespace-em2048.ttf",
+    )
+    generate(
+        "fonts/RobotoMono/static/RobotoMono-Bold.ttf",
+        "roboto-mono",
+        merge_file="Whitespace-em2048.ttf",
+    )
+    generate(
+        "fonts/RobotoMono/static/RobotoMono-BoldItalic.ttf",
+        "roboto-mono",
+        merge_file="Whitespace-em2048.ttf",
     )
     generate(
         "fonts/Ubuntu/UbuntuMono-R.ttf",
         "ubuntu-mono",
-        merge_file="Whitespace.ttf",
+        merge_file="Whitespace-em1000.ttf",
     )
     generate(
         "fonts/Ubuntu/UbuntuMono-RI.ttf",
         "ubuntu-mono",
-        merge_file="Whitespace.ttf",
+        merge_file="Whitespace-em1000.ttf",
     )
     generate(
         "fonts/Ubuntu/UbuntuMono-B.ttf",
         "ubuntu-mono",
-        merge_file="Whitespace.ttf",
+        merge_file="Whitespace-em1000.ttf",
     )
     generate(
         "fonts/Ubuntu/UbuntuMono-BI.ttf",
         "ubuntu-mono",
-        merge_file="Whitespace.ttf",
+        merge_file="Whitespace-em1000.ttf",
     )
 
 

packages/keybr-fonts/Whitespace.ttf packages/keybr-fonts/Whitespace-em1000.ttf

@@ -1,7 +1,12 @@
-@import "opensans-400.css";
-@import "opensans-400italic.css";
-@import "opensans-700.css";
-@import "opensans-700italic.css";
+@import "open-sans-400.css";
+@import "open-sans-400italic.css";
+@import "open-sans-700.css";
+@import "open-sans-700italic.css";
+
+@import "roboto-mono-400.css";
+@import "roboto-mono-400italic.css";
+@import "roboto-mono-700.css";
+@import "roboto-mono-700italic.css";
 
 @import "ubuntu-mono-400.css";
 @import "ubuntu-mono-400italic.css";

packages/keybr-fonts/Whitespace-em2048.sfd

@@ -3,38 +3,38 @@
   font-weight: 400;
   font-style: normal;
   font-display: swap;
-  src: url(../assets/opensans-400.cyrillic.woff2) format("woff2");
+  src: url(../assets/open-sans-400.cyrillic.woff2) format("woff2");
   unicode-range: U+0400-04FF;
 }
 @font-face {
   font-family: "Open Sans";
   font-weight: 400;
   font-style: normal;
   font-display: swap;
-  src: url(../assets/opensans-400.greek.woff2) format("woff2");
+  src: url(../assets/open-sans-400.greek.woff2) format("woff2");
   unicode-range: U+0370-03FF;
 }
 @font-face {
   font-family: "Open Sans";
   font-weight: 400;
   font-style: normal;
   font-display: swap;
-  src: url(../assets/opensans-400.hebrew.woff2) format("woff2");
+  src: url(../assets/open-sans-400.hebrew.woff2) format("woff2");
   unicode-range: U+0590-05FF;
 }
 @font-face {
   font-family: "Open Sans";
   font-weight: 400;
   font-style: normal;
   font-display: swap;
-  src: url(../assets/opensans-400.latin.woff2) format("woff2");
+  src: url(../assets/open-sans-400.latin.woff2) format("woff2");
   unicode-range: U+0000-00FF, U+2000-206F, U+2200-22FF, U+E000-E003;
 }
 @font-face {
   font-family: "Open Sans";
   font-weight: 400;
   font-style: normal;
   font-display: swap;
-  src: url(../assets/opensans-400.latin-ext.woff2) format("woff2");
+  src: url(../assets/open-sans-400.latin-ext.woff2) format("woff2");
   unicode-range: U+0100-017F, U+0180-024F, U+0300-036F, U+20A0-20CF;
 }