diff --git a/src/index.html b/src/index.html
index 77b3f13e..1d25eb77 100644
--- a/src/index.html
+++ b/src/index.html
@@ -8501,7 +8501,6 @@
     <script defer src="libs/polylabel.min.js?v1.105.0"></script>
     <script defer src="libs/lineclip.min.js?v1.105.0"></script>
     <script defer src="libs/simplify.js?v1.105.6"></script>
-    <script defer src="modules/fonts.js?v=1.99.03"></script>
     <script defer src="modules/ui/layers.js?v=1.111.0"></script>
     <script defer src="modules/ui/measurers.js?v=1.99.00"></script>
     <script defer src="modules/ui/style-presets.js?v=1.100.00"></script>
diff --git a/public/modules/fonts.js b/src/modules/fonts.ts
similarity index 72%
rename from public/modules/fonts.js
rename to src/modules/fonts.ts
index c3af3624..f7746c32 100644
--- a/public/modules/fonts.js
+++ b/src/modules/fonts.ts
@@ -1,272 +1,350 @@
-"use strict";
+import { byId } from "../utils";
 
-const fonts = [
-  {family: "Arial"},
-  {family: "Brush Script MT"},
-  {family: "Century Gothic"},
-  {family: "Comic Sans MS"},
-  {family: "Copperplate"},
-  {family: "Courier New"},
-  {family: "Garamond"},
-  {family: "Georgia"},
-  {family: "Herculanum"},
-  {family: "Impact"},
-  {family: "Papyrus"},
-  {family: "Party LET"},
-  {family: "Times New Roman"},
-  {family: "Verdana"},
+declare global {
+  var getUsedFonts: (svg: SVGSVGElement) => FontDefinition[];
+  var loadFontsAsDataURI: (
+    fonts: FontDefinition[],
+  ) => Promise<FontDefinition[]>;
+  var addGoogleFont: (family: string) => Promise<void>;
+  var addLocalFont: (family: string) => void;
+  var addWebFont: (family: string, src: string) => void;
+  var fonts: FontDefinition[];
+}
+
+type FontDefinition = {
+  family: string;
+  src?: string;
+  unicodeRange?: string;
+  variant?: string;
+};
+
+window.fonts = [
+  { family: "Arial" },
+  { family: "Brush Script MT" },
+  { family: "Century Gothic" },
+  { family: "Comic Sans MS" },
+  { family: "Copperplate" },
+  { family: "Courier New" },
+  { family: "Garamond" },
+  { family: "Georgia" },
+  { family: "Herculanum" },
+  { family: "Impact" },
+  { family: "Papyrus" },
+  { family: "Party LET" },
+  { family: "Times New Roman" },
+  { family: "Verdana" },
   {
     family: "Almendra SC",
     src: "url(https://fonts.gstatic.com/s/almendrasc/v13/Iure6Yx284eebowr7hbyTaZOrLQ.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
   },
   {
     family: "Amarante",
     src: "url(https://fonts.gstatic.com/s/amarante/v22/xMQXuF1KTa6EvGx9bp-wAXs.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
   },
   {
     family: "Amatic SC",
     src: "url(https://fonts.gstatic.com/s/amaticsc/v11/TUZ3zwprpvBS1izr_vOMscGKfrUC.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
   },
   {
     family: "Arima Madurai",
     src: "url(https://fonts.gstatic.com/s/arimamadurai/v14/t5tmIRoeKYORG0WNMgnC3seB3T7Prw.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
   },
   {
     family: "Architects Daughter",
     src: "url(https://fonts.gstatic.com/s/architectsdaughter/v8/RXTgOOQ9AAtaVOHxx0IUBM3t7GjCYufj5TXV5VnA2p8.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215",
   },
   {
     family: "Bitter",
     src: "url(https://fonts.gstatic.com/s/bitter/v12/zfs6I-5mjWQ3nxqccMoL2A.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215",
   },
   {
     family: "Caesar Dressing",
     src: "url(https://fonts.gstatic.com/s/caesardressing/v6/yYLx0hLa3vawqtwdswbotmK4vrRHdrz7.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
   },
   {
     family: "Cinzel",
     src: "url(https://fonts.gstatic.com/s/cinzel/v7/zOdksD_UUTk1LJF9z4tURA.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215",
   },
   {
     family: "Dancing Script",
     src: "url(https://fonts.gstatic.com/s/dancingscript/v9/KGBfwabt0ZRLA5W1ywjowUHdOuSHeh0r6jGTOGdAKHA.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215",
   },
   {
     family: "Eagle Lake",
     src: "url(https://fonts.gstatic.com/s/eaglelake/v24/ptRMTiqbbuNJDOiKj9wG1On4KCFtpe4.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215",
   },
   {
     family: "Faster One",
     src: "url(https://fonts.gstatic.com/s/fasterone/v17/H4ciBXCHmdfClFb-vWhf-LyYhw.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
   },
   {
     family: "Forum",
     src: "url(https://fonts.gstatic.com/s/forum/v16/6aey4Ky-Vb8Ew8IROpI.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
   },
   {
     family: "Fredericka the Great",
     src: "url(https://fonts.gstatic.com/s/frederickathegreat/v6/9Bt33CxNwt7aOctW2xjbCstzwVKsIBVV--Sjxbc.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
   },
   {
     family: "Gloria Hallelujah",
     src: "url(https://fonts.gstatic.com/s/gloriahallelujah/v9/CA1k7SlXcY5kvI81M_R28cNDay8z-hHR7F16xrcXsJw.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215",
   },
   {
     family: "Great Vibes",
     src: "url(https://fonts.gstatic.com/s/greatvibes/v5/6q1c0ofG6NKsEhAc2eh-3Y4P5ICox8Kq3LLUNMylGO4.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215",
   },
   {
     family: "Henny Penny",
     src: "url(https://fonts.gstatic.com/s/hennypenny/v17/wXKvE3UZookzsxz_kjGSfPQtvXI.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
   },
   {
     family: "IM Fell English",
     src: "url(https://fonts.gstatic.com/s/imfellenglish/v7/xwIisCqGFi8pff-oa9uSVAkYLEKE0CJQa8tfZYc_plY.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215",
   },
   {
     family: "Kelly Slab",
     src: "url(https://fonts.gstatic.com/s/kellyslab/v15/-W_7XJX0Rz3cxUnJC5t6fkQLfg.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
   },
   {
     family: "Kranky",
     src: "url(https://fonts.gstatic.com/s/kranky/v24/hESw6XVgJzlPsFn8oR2F.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
   },
   {
     family: "Lobster Two",
     src: "url(https://fonts.gstatic.com/s/lobstertwo/v18/BngMUXZGTXPUvIoyV6yN5-fN5qU.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
   },
   {
     family: "Lugrasimo",
     src: "url(https://fonts.gstatic.com/s/lugrasimo/v4/qkBXXvoF_s_eT9c7Y7au455KsgbLMA.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215",
   },
   {
     family: "Kaushan Script",
     src: "url(https://fonts.gstatic.com/s/kaushanscript/v6/qx1LSqts-NtiKcLw4N03IEd0sm1ffa_JvZxsF_BEwQk.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215",
   },
   {
     family: "Macondo",
     src: "url(https://fonts.gstatic.com/s/macondo/v21/RrQQboN9-iB1IXmOe2LE0Q.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
   },
   {
     family: "MedievalSharp",
     src: "url(https://fonts.gstatic.com/s/medievalsharp/v9/EvOJzAlL3oU5AQl2mP5KdgptMqhwMg.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
   },
   {
     family: "Metal Mania",
     src: "url(https://fonts.gstatic.com/s/metalmania/v22/RWmMoKWb4e8kqMfBUdPFJdXFiaQ.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
   },
   {
     family: "Metamorphous",
     src: "url(https://fonts.gstatic.com/s/metamorphous/v7/Wnz8HA03aAXcC39ZEX5y133EOyqs.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
   },
   {
     family: "Montez",
     src: "url(https://fonts.gstatic.com/s/montez/v8/aq8el3-0osHIcFK6bXAPkw.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215",
   },
   {
     family: "Nova Script",
     src: "url(https://fonts.gstatic.com/s/novascript/v10/7Au7p_IpkSWSTWaFWkumvlQKGFw.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
   },
   {
     family: "Orbitron",
     src: "url(https://fonts.gstatic.com/s/orbitron/v9/HmnHiRzvcnQr8CjBje6GQvesZW2xOQ-xsNqO47m55DA.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215",
   },
   {
     family: "Oregano",
     src: "url(https://fonts.gstatic.com/s/oregano/v13/If2IXTPxciS3H4S2oZDVPg.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
   },
   {
     family: "Pirata One",
     src: "url(https://fonts.gstatic.com/s/pirataone/v22/I_urMpiDvgLdLh0fAtofhi-Org.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
   },
   {
     family: "Sail",
     src: "url(https://fonts.gstatic.com/s/sail/v16/DPEjYwiBxwYJJBPJAQ.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
   },
   {
     family: "Satisfy",
     src: "url(https://fonts.gstatic.com/s/satisfy/v8/2OzALGYfHwQjkPYWELy-cw.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215",
   },
   {
     family: "Shadows Into Light",
     src: "url(https://fonts.gstatic.com/s/shadowsintolight/v7/clhLqOv7MXn459PTh0gXYFK2TSYBz0eNcHnp4YqE4Ts.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215",
   },
   {
     family: "Tapestry",
     src: "url(https://fonts.gstatic.com/s/macondo/v21/RrQQboN9-iB1IXmOe2LE0Q.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
   },
   {
     family: "Uncial Antiqua",
     src: "url(https://fonts.gstatic.com/s/uncialantiqua/v5/N0bM2S5WOex4OUbESzoESK-i-MfWQZQ.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
   },
   {
     family: "Underdog",
     src: "url(https://fonts.gstatic.com/s/underdog/v6/CHygV-jCElj7diMroWSlWV8.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
   },
   {
     family: "UnifrakturMaguntia",
     src: "url(https://fonts.gstatic.com/s/unifrakturmaguntia/v16/WWXPlieVYwiGNomYU-ciRLRvEmK7oaVemGZM.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
+      "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
   },
   {
     family: "Yellowtail",
     src: "url(https://fonts.gstatic.com/s/yellowtail/v8/GcIHC9QEwVkrA19LJU1qlPk_vArhqVIZ0nv9q090hN8.woff2)",
     unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
-  }
+      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215",
+  },
 ];
 
 declareDefaultFonts(); // execute once on load
 
-function declareFont(font) {
-  const {family, src, ...rest} = font;
+function declareFont(font: FontDefinition) {
+  const { family, src, ...rest } = font;
   addFontOption(family);
 
   if (!src) return;
-  const fontFace = new FontFace(family, src, {...rest, display: "block"});
+  const fontFace = new FontFace(family, src, { ...rest, display: "block" });
   document.fonts.add(fontFace);
 }
 
 function declareDefaultFonts() {
-  fonts.forEach(font => declareFont(font));
+  fonts.forEach((font) => {
+    declareFont(font);
+  });
 }
 
-function getUsedFonts(svg) {
+function addFontOption(family: string) {
+  const options = document.getElementById("styleSelectFont")!;
+  const option = document.createElement("option");
+  option.value = family;
+  option.innerText = family;
+  option.style.fontFamily = family;
+  options.append(option);
+}
+
+async function fetchGoogleFont(family: string) {
+  const url = `https://fonts.googleapis.com/css2?family=${family.replace(/ /g, "+")}`;
+  try {
+    const resp = await fetch(url);
+    const text = await resp.text();
+
+    const fontFaceRules = text.match(/font-face\s*{[^}]+}/g);
+    const fonts = fontFaceRules!.map((fontFace) => {
+      const srcURL = fontFace.match(/url\(['"]?(.+?)['"]?\)/)?.[1];
+      const src = `url(${srcURL})`;
+      const unicodeRange = fontFace.match(/unicode-range: (.*?);/)?.[1];
+      const variant = fontFace.match(/font-style: (.*?);/)?.[1];
+
+      const font: FontDefinition = { family, src };
+      if (unicodeRange) font.unicodeRange = unicodeRange;
+      if (variant && variant !== "normal") font.variant = variant;
+      return font;
+    });
+
+    return fonts;
+  } catch (err) {
+    ERROR && console.error(err);
+    return null;
+  }
+}
+
+function readBlobAsDataURL(blob: Blob) {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(reader.result as string);
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+}
+
+window.loadFontsAsDataURI = async (fonts: FontDefinition[]) => {
+  const promises = fonts.map(async (font) => {
+    const url = font.src?.match(/url\(['"]?(.+?)['"]?\)/)?.[1];
+    if (!url) return font;
+    const resp = await fetch(url);
+    const blob = await resp.blob();
+    const dataURL = await readBlobAsDataURL(blob);
+
+    return { ...font, src: `url('${dataURL}')` };
+  });
+
+  return await Promise.all(promises);
+};
+
+window.getUsedFonts = (svg: SVGSVGElement) => {
   const usedFontFamilies = new Set();
 
   const labelGroups = svg.querySelectorAll("#labels g");
@@ -282,112 +360,66 @@ function getUsedFonts(svg) {
   const legendFont = legend?.getAttribute("font-family");
   if (legendFont) usedFontFamilies.add(legendFont);
 
-  const usedFonts = fonts.filter(font => usedFontFamilies.has(font.family));
+  const usedFonts = fonts.filter((font) => usedFontFamilies.has(font.family));
   return usedFonts;
-}
+};
 
-function addFontOption(family) {
-  const options = document.getElementById("styleSelectFont");
-  const option = document.createElement("option");
-  option.value = family;
-  option.innerText = family;
-  option.style.fontFamily = family;
-  options.add(option);
-}
-
-async function fetchGoogleFont(family) {
-  const url = `https://fonts.googleapis.com/css2?family=${family.replace(/ /g, "+")}`;
-  try {
-    const resp = await fetch(url);
-    const text = await resp.text();
-
-    const fontFaceRules = text.match(/font-face\s*{[^}]+}/g);
-    const fonts = fontFaceRules.map(fontFace => {
-      const srcURL = fontFace.match(/url\(['"]?(.+?)['"]?\)/)[1];
-      const src = `url(${srcURL})`;
-      const unicodeRange = fontFace.match(/unicode-range: (.*?);/)?.[1];
-      const variant = fontFace.match(/font-style: (.*?);/)?.[1];
-
-      const font = {family, src};
-      if (unicodeRange) font.unicodeRange = unicodeRange;
-      if (variant && variant !== "normal") font.variant = variant;
-      return font;
-    });
-
-    return fonts;
-  } catch (err) {
-    ERROR && console.error(err);
-    return null;
-  }
-}
-
-function readBlobAsDataURL(blob) {
-  return new Promise(function (resolve, reject) {
-    const reader = new FileReader();
-    reader.onloadend = () => resolve(reader.result);
-    reader.onerror = reject;
-    reader.readAsDataURL(blob);
-  });
-}
-
-async function loadFontsAsDataURI(fonts) {
-  const promises = fonts.map(async font => {
-    const url = font.src.match(/url\(['"]?(.+?)['"]?\)/)[1];
-    const resp = await fetch(url);
-    const blob = await resp.blob();
-    const dataURL = await readBlobAsDataURL(blob);
-
-    return {...font, src: `url('${dataURL}')`};
-  });
-
-  return await Promise.all(promises);
-}
-
-async function addGoogleFont(family) {
+window.addGoogleFont = async (family: string) => {
   const fontRanges = await fetchGoogleFont(family);
-  if (!fontRanges) return tip("Cannot fetch Google font for this value", true, "error", 4000);
+  if (!fontRanges)
+    return tip("Cannot fetch Google font for this value", true, "error", 4000);
   tip(`Google font ${family} is loading...`, true, "warn", 4000);
 
-  const promises = fontRanges.map(range => {
-    const {src, unicodeRange, variant} = range;
-    const fontFace = new FontFace(family, src, {unicodeRange, variant, display: "block"});
+  const promises = fontRanges.map((range) => {
+    const { src, unicodeRange } = range;
+    const fontFace = new FontFace(family, src!, {
+      unicodeRange,
+      display: "block",
+    });
     return fontFace.load();
   });
 
   Promise.all(promises)
-    .then(fontFaces => {
-      fontFaces.forEach(fontFace => document.fonts.add(fontFace));
+    .then((fontFaces) => {
+      fontFaces.forEach((fontFace) => {
+        document.fonts.add(fontFace);
+      });
       fonts.push(...fontRanges);
       tip(`Google font ${family} is added to the list`, true, "success", 4000);
       addFontOption(family);
-      document.getElementById("styleSelectFont").value = family;
+      const select = byId<HTMLSelectElement>("styleSelectFont");
+      if (select) select.value = family;
       changeFont();
     })
-    .catch(err => {
+    .catch((err) => {
       tip(`Failed to load Google font ${family}`, true, "error", 4000);
       ERROR && console.error(err);
     });
-}
+};
 
-function addLocalFont(family) {
-  fonts.push({family});
+window.addLocalFont = (family: string) => {
+  fonts.push({ family });
 
-  const fontFace = new FontFace(family, `local(${family})`, {display: "block"});
+  const fontFace = new FontFace(family, `local(${family})`, {
+    display: "block",
+  });
   document.fonts.add(fontFace);
   tip(`Local font ${family} is added to the fonts list`, true, "success", 4000);
   addFontOption(family);
-  document.getElementById("styleSelectFont").value = family;
+  const select = byId<HTMLSelectElement>("styleSelectFont");
+  if (select) select.value = family;
   changeFont();
-}
+};
 
-function addWebFont(family, url) {
+window.addWebFont = (family: string, url: string) => {
   const src = `url('${url}')`;
-  fonts.push({family, src});
+  fonts.push({ family, src });
 
-  const fontFace = new FontFace(family, src, {display: "block"});
+  const fontFace = new FontFace(family, src, { display: "block" });
   document.fonts.add(fontFace);
   tip(`Font ${family} is added to the list`, true, "success", 4000);
   addFontOption(family);
-  document.getElementById("styleSelectFont").value = family;
+  const select = byId<HTMLSelectElement>("styleSelectFont");
+  if (select) select.value = family;
   changeFont();
-}
+};
diff --git a/src/modules/index.ts b/src/modules/index.ts
index 6835f6c2..91ba3df7 100644
--- a/src/modules/index.ts
+++ b/src/modules/index.ts
@@ -15,3 +15,4 @@ import "./religions-generator";
 import "./provinces-generator";
 import "./emblem";
 import "./ice";
+import "./fonts";
diff --git a/src/types/global.ts b/src/types/global.ts
index cd443401..cf78bfbf 100644
--- a/src/types/global.ts
+++ b/src/types/global.ts
@@ -46,6 +46,7 @@ declare global {
   var defs: Selection<SVGDefsElement, unknown, null, undefined>;
   var coastline: Selection<SVGGElement, unknown, null, undefined>;
   var lakes: Selection<SVGGElement, unknown, null, undefined>;
+  var provs: Selection<SVGGElement, unknown, null, undefined>;
   var getColorScheme: (scheme: string | null) => (t: number) => string;
   var getColor: (height: number, scheme: (t: number) => string) => string;
   var svgWidth: number;
@@ -78,10 +79,12 @@ declare global {
   var tip: (
     message: string,
     autoHide?: boolean,
-    type?: "info" | "warning" | "error",
+    type?: "info" | "warn" | "error" | "success",
+    timeout?: number,
   ) => void;
   var locked: (settingId: string) => boolean;
   var unlock: (settingId: string) => void;
   var $: (selector: any) => any;
   var scale: number;
+  var changeFont: () => void;
 }
diff --git a/src/utils/shorthands.ts b/src/utils/shorthands.ts
index 79d0866b..f5a0b25a 100644
--- a/src/utils/shorthands.ts
+++ b/src/utils/shorthands.ts
@@ -1,4 +1,5 @@
-export const byId = document.getElementById.bind(document);
+export const byId = <T extends HTMLElement>(id: string): T | undefined =>
+  document.getElementById(id) as T;
 
 declare global {
   interface Window {