diff --git a/frontend/src/assets/fonts/Inter/Inter-italic.var.woff2 b/frontend/src/assets/fonts/Inter/Inter-italic.var.woff2
new file mode 100644
index 00000000..b826d5af
Binary files /dev/null and b/frontend/src/assets/fonts/Inter/Inter-italic.var.woff2 differ
diff --git a/frontend/src/assets/fonts/Inter/Inter-roman.var.woff2 b/frontend/src/assets/fonts/Inter/Inter-roman.var.woff2
new file mode 100644
index 00000000..6a256a06
Binary files /dev/null and b/frontend/src/assets/fonts/Inter/Inter-roman.var.woff2 differ
diff --git a/frontend/src/assets/fonts/Inter/inter.css b/frontend/src/assets/fonts/Inter/inter.css
new file mode 100644
index 00000000..d0099e91
--- /dev/null
+++ b/frontend/src/assets/fonts/Inter/inter.css
@@ -0,0 +1,16 @@
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: 'Regular';
+  src: url("Inter-roman.var.woff2?v=3.19") format("woff2");
+}
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: 'Italic';
+  src: url("Inter-italic.var.woff2?v=3.19") format("woff2");
+}
\ No newline at end of file
diff --git a/frontend/src/assets/fonts/Recursive/Recursive_VF.woff2 b/frontend/src/assets/fonts/Recursive/Recursive_VF.woff2
new file mode 100644
index 00000000..0f4358fe
Binary files /dev/null and b/frontend/src/assets/fonts/Recursive/Recursive_VF.woff2 differ
diff --git a/frontend/src/assets/fonts/Recursive/recursive.css b/frontend/src/assets/fonts/Recursive/recursive.css
new file mode 100644
index 00000000..f9f55993
--- /dev/null
+++ b/frontend/src/assets/fonts/Recursive/recursive.css
@@ -0,0 +1,8 @@
+@font-face {
+  font-family: 'Recursive var';
+  font-weight: 400;
+  font-display: swap;
+  font-style: normal;
+  font-variation-settings: 'MONO' 1, 'CASL' 0, 'slnt' 0, 'CRSV' 0;
+  src: url("./Recursive_VF.woff2?v=1.085") format("woff2");
+}
\ No newline at end of file
diff --git a/frontend/src/components/account-settings.ts b/frontend/src/components/account-settings.ts
index 6edef120..feb76733 100644
--- a/frontend/src/components/account-settings.ts
+++ b/frontend/src/components/account-settings.ts
@@ -233,7 +233,7 @@ export class AccountSettings extends LiteElement {
     }
 
     return html`<div class="grid gap-4">
-      <h1 class="text-xl font-bold">${msg("Account settings")}</h1>
+      <h1 class="text-xl font-semibold">${msg("Account settings")}</h1>
 
       ${successMessage}
 
@@ -277,7 +277,7 @@ export class AccountSettings extends LiteElement {
     }
 
     return html` <div class="max-w-sm">
-      <h3 class="font-bold mb-3">${msg("Change password")}</h3>
+      <h3 class="font-semibold mb-3">${msg("Change password")}</h3>
       <sl-form @sl-submit="${this.onSubmit}" aria-describedby="formError">
         <div class="mb-5">
           <sl-input
diff --git a/frontend/src/components/not-found.ts b/frontend/src/components/not-found.ts
index 466786c3..85d3dcef 100644
--- a/frontend/src/components/not-found.ts
+++ b/frontend/src/components/not-found.ts
@@ -8,7 +8,7 @@ export class NotFound extends LitElement {
   }
   render() {
     return html`
-      <div class="text-2xl text-gray-400">${msg("Page not found")}</div>
+      <div class="text-xl text-gray-400">${msg("Page not found")}</div>
     `;
   }
 }
diff --git a/frontend/src/components/profile-browser.ts b/frontend/src/components/profile-browser.ts
index a16e7cdb..8a49d14c 100644
--- a/frontend/src/components/profile-browser.ts
+++ b/frontend/src/components/profile-browser.ts
@@ -150,7 +150,7 @@ export class ProfileBrowser extends LiteElement {
     if (this.browserId && !this.isIframeLoaded) {
       return html`
         <div
-          class="w-full h-full flex items-center justify-center text-4xl"
+          class="w-full h-full flex items-center justify-center text-3xl"
           style="padding-right: ${ProfileBrowser.SIDE_BAR_WIDTH}px;"
         >
           <sl-spinner></sl-spinner>
diff --git a/frontend/src/index.ejs b/frontend/src/index.ejs
index 234c1535..583e99e8 100644
--- a/frontend/src/index.ejs
+++ b/frontend/src/index.ejs
@@ -14,7 +14,7 @@
       crossorigin="anonymous"
     ></script>
   </head>
-  <body>
+  <body class="text-base">
     <browsertrix-app></browsertrix-app>
 
     <script>
diff --git a/frontend/src/index.ts b/frontend/src/index.ts
index 39b079c5..9b4ed5f8 100644
--- a/frontend/src/index.ts
+++ b/frontend/src/index.ts
@@ -20,6 +20,8 @@ import { ROUTES, DASHBOARD_ROUTE } from "./routes";
 import "./shoelace";
 import "./components";
 import "./pages";
+import "./assets/fonts/Inter/inter.css";
+import "./assets/fonts/Recursive/recursive.css";
 
 type DialogContent = {
   label?: TemplateResult | string;
@@ -509,7 +511,7 @@ export class App extends LiteElement {
 
   renderSpinner() {
     return html`
-      <div class="w-full flex items-center justify-center text-4xl">
+      <div class="w-full flex items-center justify-center text-3xl">
         <sl-spinner></sl-spinner>
       </div>
     `;
@@ -684,7 +686,7 @@ export class App extends LiteElement {
       noHeader: true,
       body: html`
         <div class="grid gap-4 text-center">
-          <p class="mt-8 text-2xl font-medium">
+          <p class="mt-8 text-xl font-medium">
             ${msg("Welcome to Browsertrix Cloud!")}
           </p>
 
diff --git a/frontend/src/pages/archive/browser-profiles-detail.ts b/frontend/src/pages/archive/browser-profiles-detail.ts
index 23d0299d..f78c5d42 100644
--- a/frontend/src/pages/archive/browser-profiles-detail.ts
+++ b/frontend/src/pages/archive/browser-profiles-detail.ts
@@ -81,7 +81,7 @@ export class BrowserProfilesDetail extends LiteElement {
       </div>
 
       <header class="md:flex items-center justify-between mb-3">
-        <h2 class="text-xl md:text-3xl font-bold md:h-9 mb-1">
+        <h2 class="text-xl md:text-2xl font-semibold md:h-9 mb-1">
           ${this.profile?.name
             ? html`${this.profile?.name}
                 <sl-button
@@ -267,9 +267,7 @@ export class BrowserProfilesDetail extends LiteElement {
   private renderMenu() {
     return html`
       <sl-dropdown placement="bottom-end" distance="4">
-        <sl-button slot="trigger" size="small" caret
-          >${msg("Actions")}</sl-button
-        >
+        <sl-button slot="trigger" caret>${msg("Actions")}</sl-button>
 
         <ul class="text-left text-sm text-0-800 whitespace-nowrap" role="menu">
           <li
diff --git a/frontend/src/pages/archive/browser-profiles-list.ts b/frontend/src/pages/archive/browser-profiles-list.ts
index 79eb8e60..8bc7b9f6 100644
--- a/frontend/src/pages/archive/browser-profiles-list.ts
+++ b/frontend/src/pages/archive/browser-profiles-list.ts
@@ -47,20 +47,14 @@ export class BrowserProfilesList extends LiteElement {
 
   render() {
     return html`<header class="mb-3 text-right">
-        <a
+        <sl-button
           href=${`/archives/${this.archiveId}/browser-profiles/new`}
-          class="inline-block bg-indigo-500 hover:bg-indigo-400 text-white text-center font-medium leading-none rounded px-3 py-2 transition-colors"
-          role="button"
+          type="primary"
           @click=${this.navLink}
         >
-          <sl-icon
-            class="inline-block align-middle mr-2"
-            name="plus-lg"
-          ></sl-icon
-          ><span class="inline-block align-middle mr-2 text-sm"
-            >${msg("New Browser Profile")}</span
-          >
-        </a>
+          <sl-icon slot="prefix" name="plus-lg"></sl-icon>
+          ${msg("New Browser Profile")}
+        </sl-button>
       </header>
 
       ${this.renderTable()}
diff --git a/frontend/src/pages/archive/crawl-detail.ts b/frontend/src/pages/archive/crawl-detail.ts
index c198d6af..414910dc 100644
--- a/frontend/src/pages/archive/crawl-detail.ts
+++ b/frontend/src/pages/archive/crawl-detail.ts
@@ -243,7 +243,7 @@ export class CrawlDetail extends LiteElement {
   private renderHeader() {
     return html`
       <header class="md:flex justify-between">
-        <h2 class="text-2xl font-medium mb-3 md:h-8">
+        <h2 class="text-xl font-medium mb-3 md:h-8">
           ${msg(
             html`<span class="font-normal">Crawl of</span> ${this.crawl
                 ? this.crawl.configName
@@ -308,7 +308,7 @@ export class CrawlDetail extends LiteElement {
 
     return html`
       <sl-dropdown placement="bottom-end" distance="4">
-        <sl-button slot="trigger" size="small" caret
+        <sl-button slot="trigger" caret
           >${this.isActive
             ? html`<sl-icon name="three-dots"></sl-icon>`
             : msg("Actions")}</sl-button
diff --git a/frontend/src/pages/archive/crawl-templates-detail.ts b/frontend/src/pages/archive/crawl-templates-detail.ts
index feaa091d..6620afa6 100644
--- a/frontend/src/pages/archive/crawl-templates-detail.ts
+++ b/frontend/src/pages/archive/crawl-templates-detail.ts
@@ -107,7 +107,9 @@ export class CrawlTemplatesDetail extends LiteElement {
 
         <header class="md:px-4 pt-4 md:flex justify-between">
           <div>
-            <h2 class="text-xl md:text-3xl font-bold md:h-9 leading-tight mb-1">
+            <h2
+              class="text-xl md:text-2xl font-semibold md:h-9 leading-tight mb-1"
+            >
               ${this.crawlTemplate?.name
                 ? html`
                     <span>${this.crawlTemplate.name}</span>
@@ -380,9 +382,7 @@ export class CrawlTemplatesDetail extends LiteElement {
 
     return html`
       <sl-dropdown placement="bottom-end" distance="4">
-        <sl-button slot="trigger" type="primary" size="small" caret
-          >${msg("Actions")}</sl-button
-        >
+        <sl-button slot="trigger" caret>${msg("Actions")}</sl-button>
 
         <ul class="text-left text-sm text-0-800 whitespace-nowrap" role="menu">
           ${menuItems.map((item: HTMLTemplateResult) => item)}
@@ -543,10 +543,7 @@ export class CrawlTemplatesDetail extends LiteElement {
                   role="row"
                   title=${typeof seed === "string" ? seed : seed.url}
                 >
-                  <div
-                    class="col-span-3 break-all leading-tight text-sm md:text-base"
-                    role="cell"
-                  >
+                  <div class="col-span-3 break-all leading-tight" role="cell">
                     ${typeof seed === "string" ? seed : seed.url}
                   </div>
                   <span
diff --git a/frontend/src/pages/archive/crawl-templates-list.ts b/frontend/src/pages/archive/crawl-templates-list.ts
index 448ff1b0..ff2a2a55 100644
--- a/frontend/src/pages/archive/crawl-templates-list.ts
+++ b/frontend/src/pages/archive/crawl-templates-list.ts
@@ -111,7 +111,7 @@ export class CrawlTemplatesList extends LiteElement {
               </div>
             `
         : html`<div
-            class="w-full flex items-center justify-center my-24 text-4xl"
+            class="w-full flex items-center justify-center my-24 text-3xl"
           >
             <sl-spinner></sl-spinner>
           </div>`}
@@ -146,7 +146,6 @@ export class CrawlTemplatesList extends LiteElement {
             class="w-full"
             slot="trigger"
             placeholder=${msg("Search by name")}
-            style="--sl-input-height-medium: 2.25rem;"
             clearable
             ?disabled=${!this.crawlTemplates?.length}
             @sl-input=${this.onSearchInput}
@@ -156,20 +155,14 @@ export class CrawlTemplatesList extends LiteElement {
         </div>
 
         <div class="grow-0 mb-4">
-          <a
+          <sl-button
             href=${`/archives/${this.archiveId}/crawl-templates/new`}
-            class="block bg-indigo-500 hover:bg-indigo-400 text-white text-center font-medium leading-none rounded px-3 py-2 transition-colors"
-            role="button"
+            type="primary"
             @click=${this.navLink}
           >
-            <sl-icon
-              class="inline-block align-middle mr-2"
-              name="plus-lg"
-            ></sl-icon
-            ><span class="inline-block align-middle mr-2 text-sm"
-              >${msg("New Crawl Template")}</span
-            >
-          </a>
+            <sl-icon slot="prefix" name="plus-lg"></sl-icon>
+            ${msg("New Crawl Template")}
+          </sl-button>
         </div>
       </div>
 
diff --git a/frontend/src/pages/archive/crawls-list.ts b/frontend/src/pages/archive/crawls-list.ts
index df78896f..6fc921f7 100644
--- a/frontend/src/pages/archive/crawls-list.ts
+++ b/frontend/src/pages/archive/crawls-list.ts
@@ -123,7 +123,7 @@ export class CrawlsList extends LiteElement {
   render() {
     if (!this.crawls) {
       return html`<div
-        class="w-full flex items-center justify-center my-24 text-4xl"
+        class="w-full flex items-center justify-center my-24 text-3xl"
       >
         <sl-spinner></sl-spinner>
       </div>`;
@@ -142,7 +142,7 @@ export class CrawlsList extends LiteElement {
               `}
         </section>
         <footer class="mt-2">
-          <span class="text-0-400 text-sm">
+          <span class="text-0-400 text-xs">
             ${this.lastFetched
               ? msg(html`Last updated:
                   <sl-format-date
@@ -166,7 +166,6 @@ export class CrawlsList extends LiteElement {
       <div class="grid grid-cols-2 gap-3 items-center">
         <div class="col-span-2 md:col-span-1">
           <sl-input
-            size="small"
             class="w-full"
             slot="trigger"
             placeholder=${msg("Search by Crawl Template name or ID")}
@@ -178,9 +177,7 @@ export class CrawlsList extends LiteElement {
           </sl-input>
         </div>
         <div class="col-span-12 md:col-span-1 flex items-center justify-end">
-          <div class="whitespace-nowrap text-sm text-0-500 mr-2">
-            ${msg("Sort By")}
-          </div>
+          <div class="whitespace-nowrap text-0-500 mr-2">${msg("Sort By")}</div>
           <sl-dropdown
             placement="bottom-end"
             distance="4"
@@ -240,7 +237,7 @@ export class CrawlsList extends LiteElement {
         : map((crawl) => ({ item: crawl }));
 
     return html`
-      <ul class="border rounded text-sm md:text-base">
+      <ul class="border rounded">
         ${flow(
           filterResults,
           this.sortCrawls.bind(this),
diff --git a/frontend/src/pages/archives.ts b/frontend/src/pages/archives.ts
index 2853f99a..14a2d729 100644
--- a/frontend/src/pages/archives.ts
+++ b/frontend/src/pages/archives.ts
@@ -29,7 +29,7 @@ export class Archives extends LiteElement {
         <header
           class="w-full max-w-screen-lg mx-auto px-3 py-4 box-border md:py-8"
         >
-          <h1 class="text-2xl font-medium">${msg("Archives")}</h1>
+          <h1 class="text-xl font-medium">${msg("Archives")}</h1>
         </header>
         <hr />
       </div>
@@ -37,7 +37,7 @@ export class Archives extends LiteElement {
         ${this.archiveList
           ? this.renderArchives()
           : html`
-              <div class="flex items-center justify-center my-24 text-4xl">
+              <div class="flex items-center justify-center my-24 text-3xl">
                 <sl-spinner></sl-spinner>
               </div>
             `}
diff --git a/frontend/src/pages/home.ts b/frontend/src/pages/home.ts
index a6ca69d5..3639c060 100644
--- a/frontend/src/pages/home.ts
+++ b/frontend/src/pages/home.ts
@@ -35,7 +35,7 @@ export class Home extends LiteElement {
   render() {
     if (!this.userInfo || !this.archiveList) {
       return html`
-        <div class="flex items-center justify-center my-24 text-4xl">
+        <div class="flex items-center justify-center my-24 text-3xl">
           <sl-spinner></sl-spinner>
         </div>
       `;
@@ -59,7 +59,7 @@ export class Home extends LiteElement {
         <header
           class="w-full max-w-screen-lg mx-auto px-3 py-4 box-border md:py-8"
         >
-          <h1 class="text-2xl font-medium">${title}</h1>
+          <h1 class="text-xl font-medium">${title}</h1>
         </header>
         <hr />
       </div>
diff --git a/frontend/src/pages/join.ts b/frontend/src/pages/join.ts
index b346e5c7..82087b48 100644
--- a/frontend/src/pages/join.ts
+++ b/frontend/src/pages/join.ts
@@ -60,7 +60,7 @@ export class Join extends LiteElement {
             this.inviteInfo.inviterEmail ||
             placeholder}
           </div>
-          <p class="text-xl md:text-3xl font-semibold mb-5">
+          <p class="text-xl md:text-2xl font-semibold mb-5">
             ${msg(
               html`You've been invited to join
                 <span class="text-primary break-words"
diff --git a/frontend/src/pages/sign-up.ts b/frontend/src/pages/sign-up.ts
index 897932d8..3735d684 100644
--- a/frontend/src/pages/sign-up.ts
+++ b/frontend/src/pages/sign-up.ts
@@ -20,7 +20,7 @@ export class SignUp extends LiteElement {
           ${this.isSignedUpWithoutAuth
             ? html`
                 <div
-                  class="text-2xl font-semibold mb-5 text-primary"
+                  class="text-xl font-semibold mb-5 text-primary"
                   role="alert"
                 >
                   ${msg("Successfully signed up")}
@@ -32,7 +32,7 @@ export class SignUp extends LiteElement {
                 </p>
               `
             : html`
-                <h1 class="text-3xl font-semibold mb-5">${msg("Sign up")}</h1>
+                <h1 class="text-2xl font-semibold mb-5">${msg("Sign up")}</h1>
 
                 <btrix-sign-up-form
                   @submit=${this.onSubmit}
diff --git a/frontend/src/pages/users-invite.ts b/frontend/src/pages/users-invite.ts
index b8827cfb..2b052b91 100644
--- a/frontend/src/pages/users-invite.ts
+++ b/frontend/src/pages/users-invite.ts
@@ -27,7 +27,7 @@ export class UsersInvite extends LiteElement {
       `;
     }
     return html`<div class="grid gap-4">
-      <header class="text-xl font-bold">
+      <header class="text-xl font-semibold">
         <h1 class="inline-block mr-2">${msg("Users")}</h1>
         <sl-tag class="uppercase" type="primary" size="small"
           >${msg("admin")}</sl-tag
diff --git a/frontend/src/pages/verify.ts b/frontend/src/pages/verify.ts
index 8be57559..24c70712 100644
--- a/frontend/src/pages/verify.ts
+++ b/frontend/src/pages/verify.ts
@@ -25,7 +25,7 @@ export class Verify extends LiteElement {
     if (this.serverError) {
       return html`<btrix-alert type="danger">${this.serverError}</btrix-alert>`;
     }
-    return html` <div class="text-4xl"><sl-spinner></sl-spinner></div> `;
+    return html` <div class="text-3xl"><sl-spinner></sl-spinner></div> `;
   }
 
   private async verify(): Promise<void> {
diff --git a/frontend/src/theme.ts b/frontend/src/theme.ts
index 35ec015d..8be0c90d 100644
--- a/frontend/src/theme.ts
+++ b/frontend/src/theme.ts
@@ -1,6 +1,6 @@
 /**
  * Shoelace CSS theming variables
- * https://github.com/shoelace-style/shoelace/blob/current/src/themes/light.styles.ts
+ * https://github.com/shoelace-style/shoelace/blob/next/src/themes/light.css
  *
  * To make new variables available to Tailwind, update
  * `theme` in tailwind.cofnig.js
@@ -36,14 +36,38 @@ const theme = css`
     --sl-color-primary-900: ${unsafeCSS(primaryColor.darken(0.3))};
     --sl-color-primary-950: ${unsafeCSS(primaryColor.darken(0.4))};
 
+    /*
+     * Typography
+     */
+
+    /* Fonts */
+    --sl-font-mono: "Recursive var", SFMono-Regular, Consolas, "Liberation Mono",
+      Menlo, monospace;
+    --sl-font-sans: "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI",
+      Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
+      "Segoe UI Emoji", "Segoe UI Symbol";
+
+    /* Font sizes */
+    --sl-font-size-medium: 0.875rem; /* 14px */
+    --sl-font-size-2x-large: 2rem; /* 32px */
+
+    /* Font weights */
+    --sl-font-weight-medium: 500;
+    --sl-font-weight-semibold: 600;
+
     /*
      * Forms
      */
 
     /* Buttons */
-    --sl-button-font-size-small: var(--sl-font-size-small);
-    --sl-button-font-size-medium: var(--sl-font-size-medium);
-    --sl-button-font-size-large: var(--sl-font-size-large);
+    --sl-button-font-size-small: var(--sl-font-size-x-small);
+    --sl-button-font-size-medium: var(--sl-font-size-small);
+    --sl-button-font-size-large: var(--sl-font-size-medium);
+
+    /* Inputs */
+    --sl-input-font-size-small: var(--sl-font-size-x-small);
+    --sl-input-font-size-medium: var(--sl-font-size-small);
+    --sl-input-font-size-large: var(--sl-font-size-medium);
 
     /* Labels */
     --sl-input-label-font-size-small: var(--sl-font-size-x-small);
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index f1915f3d..cf3e1466 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -21,6 +21,7 @@ function makeTheme() {
     }));
 
   return {
+    // https://github.com/tailwindlabs/tailwindcss/blob/52ab3154392ba3d7a05cae643694384e72dc24b2/stubs/defaultConfig.stub.js
     colors: {
       current: "currentColor",
       ...colors.map(makeColorPalette),
@@ -32,6 +33,24 @@ function makeTheme() {
     fontFamily: {
       sans: `var(--sl-font-sans)`,
       serif: `var(--sl-font-serif)`,
+      mono: `var(--sl-font-mono)`,
+    },
+    fontSize: {
+      xs: ["var(--sl-font-size-x-small)", { lineHeight: "1.33" }],
+      sm: ["var(--sl-font-size-small)", { lineHeight: "1.25rem" }],
+      base: ["var(--sl-font-size-medium)", { lineHeight: "1.5" }],
+      lg: ["var(--sl-font-size-large)", { lineHeight: "1.6" }],
+      xl: ["var(--sl-font-size-x-large)", { lineHeight: "1.5" }],
+      "2xl": ["var(--sl-font-size-2x-large)", { lineHeight: "1.5" }],
+      "3xl": ["var(--sl-font-size-3x-large)", { lineHeight: "1" }],
+      "4xl": ["var(--sl-font-size-4x-large)", { lineHeight: "1" }],
+    },
+    fontWeight: {
+      light: "var(--sl-font-weight-light)",
+      normal: "var(--sl-font-weight-normal)",
+      medium: "var(--sl-font-weight-medium)",
+      semibold: "var(--sl-font-weight-semibold)",
+      bold: "var(--sl-font-weight-bold)",
     },
     borderRadius: {
       sm: `var(--sl-border-radius-small)`,
@@ -58,7 +77,7 @@ module.exports = {
     extend: makeTheme(),
   },
 
-  content: ["./**/*.html", "./src/**/*.{ts,js}"],
+  content: ["./**/*.html", "./src/**/*.{ts,js,ejs}"],
 
   extract: {
     include: ["./src/**/*.{ts,js}"],
diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js
index 8d18bd84..cddbc8b1 100644
--- a/frontend/webpack.config.js
+++ b/frontend/webpack.config.js
@@ -79,6 +79,10 @@ module.exports = {
         test: /\.html$/,
         loader: "html-loader",
       },
+      {
+        test: /\.(woff(2)?|ttf)(\?v=\d+\.\d+\.\d+)?$/,
+        type: "asset/resource",
+      },
     ],
   },