diff --git a/index.html b/index.html
index 1c9c52c..ad43fc4 100644
--- a/index.html
+++ b/index.html
@@ -12,7 +12,7 @@
     <meta property="og:description" content="Digital Signature added for OCBO (Office of the City Building Official)" />
     <meta property="og:type" content="website" />
     <link rel="icon" type="image/svg+xml" href="/favicon.png" />
-    <link rel="preconnect" href="https://cdn.jsdelivr.net" />
+    <!-- <link rel="preconnect" href="https://cdn.jsdelivr.net" /> -->
     <title>OCBO e-Sign</title>
   </head>
 
diff --git a/package.json b/package.json
index 41c894b..ce30c8b 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fontsource-variable/roboto": "^5.2.8",
     "@kobalte/core": "^0.13.11",
     "@solidjs-use/integrations": "^2.3.0",
     "@solidjs/router": "^0.15.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 50c3ce6..f65f878 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@fontsource-variable/roboto':
+        specifier: ^5.2.8
+        version: 5.2.8
       '@kobalte/core':
         specifier: ^0.13.11
         version: 0.13.11(solid-js@1.9.9)
@@ -354,6 +357,9 @@ packages:
   '@floating-ui/utils@0.2.10':
     resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
 
+  '@fontsource-variable/roboto@5.2.8':
+    resolution: {integrity: sha512-UBhCzUXpkZZqBhTnkIhkM3USlSuu2Da6k4mjiRaEnZtvMOMWcQVOV6oV2cY00plUuJZrsnTRtt3ZRRJF09gV5w==}
+
   '@img/colour@1.0.0':
     resolution: {integrity: sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==}
     engines: {node: '>=18'}
@@ -2038,6 +2044,8 @@ snapshots:
 
   '@floating-ui/utils@0.2.10': {}
 
+  '@fontsource-variable/roboto@5.2.8': {}
+
   '@img/colour@1.0.0': {}
 
   '@img/sharp-darwin-arm64@0.34.4':
diff --git a/src/styles/fonts.sass b/src/styles/fonts.sass
index 4fa1b67..2b5cc0a 100644
--- a/src/styles/fonts.sass
+++ b/src/styles/fonts.sass
@@ -4,12 +4,20 @@ $Montserrat: Montserrat, sans-serif
 $OpenSans: 'Open Sans', sans-serif
 $PublicSans: 'Public Sans', sans-serif
 
+// @font-face
+//   font-family: 'Roboto'
+//   font-style: normal
+//   font-display: swap
+//   font-weight: 100 900
+//   src: url(https://cdn.jsdelivr.net/fontsource/fonts/roboto:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
+//   unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
+
 @font-face
   font-family: 'Roboto'
   font-style: normal
   font-display: swap
   font-weight: 100 900
-  src: url(https://cdn.jsdelivr.net/fontsource/fonts/roboto:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
+  src: url(@fontsource-variable/roboto/files/roboto-latin-wght-normal.woff2) format('woff2-variations')
   unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
 
 @font-face