configure font file and family on css

Uniswap · Oct 30, 2024 · d96f6bc · d96f6bc
1 parent ae5091a
commit d96f6bc
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 31 deletions.
diff --git a/assets/types.css b/assets/types.css
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -36,11 +36,6 @@ const config: Config = {
       lg: `${SCREEN_SIZE.XL_DESKTOP.min}px`,
     },
     extend: {
-      fontFamily: {
-        'basel-grotesk': ['var(--font-basel-grotesk)'],
-        riegraf: ['var(--font-riegraf)'],
-        'fragment-mono': ['var(--font-fragment-mono)'],
-      },
       borderRadius: {
         large: rem(20),
         medium: rem(16),

diff --git a/templates/document_head.hbs b/templates/document_head.hbs
@@ -21,7 +21,12 @@
 }
 </script>
 <style>
-/* Define Riegraf font */
+:root {
+  --font-riegraf: 'Riegraf', serif;
+  --font-basel-grotesk: 'Basel Grotesk', sans-serif;
+  --font-fragment-mono: 'Fragment Mono', monospace;
+}
+
 @font-face {
   font-family: 'Riegraf';
   src: url("{{asset 'Riegraf-Regular.woff2'}}") format('woff2'),
@@ -111,11 +116,9 @@
   font-style: normal;
 }
 
-/* Define Fragment Mono font */
 @font-face {
   font-family: 'Fragment Mono';
-  src: url('{{asset "fragment-mono-regular.woff2"}}') format('woff2'),
-       url('{{asset "fragment-mono-regular.woff"}}') format('woff');
+  src: url('https://fonts.googleapis.com/css2?family=Fragment+Mono:ital@0;1&display=swap');
   font-weight: 400;
   font-style: normal;
 }