11 files changed, 74 insertions, 6 deletions
diff --git a/fonts/ibm-plex-mono-400.woff2 b/fonts/ibm-plex-mono-400.woff2
new file mode 100644
index 0000000..0804aaf
--- /dev/null
+++ b/fonts/ibm-plex-mono-400.woff2
diff --git a/fonts/ibm-plex-mono-500.woff2 b/fonts/ibm-plex-mono-500.woff2
new file mode 100644
index 0000000..090f82f
--- /dev/null
+++ b/fonts/ibm-plex-mono-500.woff2
diff --git a/fonts/ibm-plex-mono-600.woff2 b/fonts/ibm-plex-mono-600.woff2
new file mode 100644
index 0000000..67aeeb0
--- /dev/null
+++ b/fonts/ibm-plex-mono-600.woff2
diff --git a/fonts/ibm-plex-sans-400.woff2 b/fonts/ibm-plex-sans-400.woff2
new file mode 100644
index 0000000..f0ee65d
--- /dev/null
+++ b/fonts/ibm-plex-sans-400.woff2
diff --git a/fonts/ibm-plex-sans-500.woff2 b/fonts/ibm-plex-sans-500.woff2
new file mode 100644
index 0000000..6d5527e
--- /dev/null
+++ b/fonts/ibm-plex-sans-500.woff2
diff --git a/fonts/ibm-plex-sans-600.woff2 b/fonts/ibm-plex-sans-600.woff2
new file mode 100644
index 0000000..08c0d5a
--- /dev/null
+++ b/fonts/ibm-plex-sans-600.woff2
diff --git a/fonts/space-grotesk-400.woff2 b/fonts/space-grotesk-400.woff2
new file mode 100644
index 0000000..0e63471
--- /dev/null
+++ b/fonts/space-grotesk-400.woff2
diff --git a/fonts/space-grotesk-500.woff2 b/fonts/space-grotesk-500.woff2
new file mode 100644
index 0000000..0db251f
--- /dev/null
+++ b/fonts/space-grotesk-500.woff2
diff --git a/fonts/space-grotesk-600.woff2 b/fonts/space-grotesk-600.woff2
new file mode 100644
index 0000000..a1db41a
--- /dev/null
+++ b/fonts/space-grotesk-600.woff2
diff --git a/fonts/space-grotesk-700.woff2 b/fonts/space-grotesk-700.woff2
new file mode 100644
index 0000000..44604a0
--- /dev/null
+++ b/fonts/space-grotesk-700.woff2
diff --git a/index.html b/index.html
index c7ce1b4..c61ff31 100644
--- a/index.html
+++ b/index.html
@@ -4,10 +4,78 @@
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Fortis Card</title>
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap" rel="stylesheet">
 <style>
+  @font-face{
+    font-family: 'Space Grotesk';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('fonts/space-grotesk-400.woff2') format('woff2');
+  }
+  @font-face{
+    font-family: 'Space Grotesk';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('fonts/space-grotesk-500.woff2') format('woff2');
+  }
+  @font-face{
+    font-family: 'Space Grotesk';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('fonts/space-grotesk-600.woff2') format('woff2');
+  }
+  @font-face{
+    font-family: 'Space Grotesk';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('fonts/space-grotesk-700.woff2') format('woff2');
+  }
+  @font-face{
+    font-family: 'IBM Plex Mono';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('fonts/ibm-plex-mono-400.woff2') format('woff2');
+  }
+  @font-face{
+    font-family: 'IBM Plex Mono';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('fonts/ibm-plex-mono-500.woff2') format('woff2');
+  }
+  @font-face{
+    font-family: 'IBM Plex Mono';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('fonts/ibm-plex-mono-600.woff2') format('woff2');
+  }
+  @font-face{
+    font-family: 'IBM Plex Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('fonts/ibm-plex-sans-400.woff2') format('woff2');
+  }
+  @font-face{
+    font-family: 'IBM Plex Sans';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('fonts/ibm-plex-sans-500.woff2') format('woff2');
+  }
+  @font-face{
+    font-family: 'IBM Plex Sans';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('fonts/ibm-plex-sans-600.woff2') format('woff2');
+  }
+
   :root{
     --bg: #121417;
     --bg-panel: #181b1f;
@@ -327,7 +395,7 @@
       <div class="eyebrow">Bring your own secure element</div>
       <h1>Provision your own cryptocurrency hardware wallet.<br>The vendor doesn't have to be a root of trust.</h1>
       <p class="hero-sub">
-        Fortis Card™ turns a blank, commodity SmartCard you sourced yourself (from us or anywhere else) into a hardware wallet. Our ISO installs the applet and generates your seed on the card itself&mdash;all offline. All of our software is free/libre and open source for verifiable self-custody and end-to-end security.
+        Fortis Card&trade; turns a blank, commodity SmartCard you sourced yourself (from us or anywhere else) into a hardware wallet. Our ISO installs the applet and generates your seed on the card itself&mdash;all offline. All of our software is free/libre and open source for verifiable self-custody and end-to-end security.
       </p>
       <div class="status-strip">
         <span class="pulse" aria-hidden="true"></span>
@@ -355,8 +423,8 @@
           <text class="pad-label" x="90" y="82" text-anchor="middle">C6</text>
         </g>
         <!-- card number-style rows using mono font, purely decorative -->
-        <text x="30" y="140" font-family="IBM Plex Mono" font-size="15" letter-spacing="3" fill="#5b6067">FC01 •••• •••• ••••</text>
-        <text x="30" y="176" font-family="IBM Plex Mono" font-size="9" letter-spacing="1.5" fill="#5b6067">SECURE ELEMENT · SELF-PROVISIONED</text>
+        <text x="30" y="140" font-family="IBM Plex Mono" font-size="15" letter-spacing="3" fill="#5b6067">FC01 &bull;&bull;&bull;&bull; &bull;&bull;&bull;&bull; &bull;&bull;&bull;&bull;</text>
+        <text x="30" y="176" font-family="IBM Plex Mono" font-size="9" letter-spacing="1.5" fill="#5b6067">SECURE ELEMENT &middot; SELF-PROVISIONED</text>
         <text x="30" y="192" font-family="IBM Plex Mono" font-size="9" letter-spacing="1.5" fill="#3a3f47">NO VENDOR ROOT OF TRUST</text>
         <!-- nfc arcs top right -->
         <g stroke="#3a3f47" fill="none" stroke-width="1.4" stroke-linecap="round">