fix: Use @import for font-families

kiosion · Nov 8, 2023 · 0b3e7b9 · 0b3e7b9
1 parent fb887cd
commit 0b3e7b9
Show file tree

Hide file tree

Showing 8 changed files with 8 additions and 39 deletions.
diff --git a/svelte-app/src/app.html b/svelte-app/src/app.html
@@ -11,12 +11,6 @@
     <link rel="android-chrome" href="%sveltekit.assets%/android-chrome-512x512.png" sizes="512x512" />
     <meta name="og:icon" content="%sveltekit.assets%/android-chrome-512x512.png" />
     %sveltekit.head%
-    <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=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;1,100;1,200;1,300;1,400&display=swap"
-      rel="stylesheet"
-    />
   </head>
   <body>
     <div style="display: contents">

diff --git a/svelte-app/src/components/document/content/footer.svelte b/svelte-app/src/components/document/content/footer.svelte
@@ -15,7 +15,7 @@
 
 {#if data._type === 'project' && data.github}
   <div>
-    <h1 class="my-4 font-display text-2xl font-bold">{$t('Links')}</h1>
+    <h1 class="my-4 text-2xl font-bold">{$t('Links')}</h1>
     <span class="flex items-center justify-start gap-2 text-base">
       <Icon icon="GitCommit" class="mb-0.5" inline />
       <Link href={data.github}>

diff --git a/svelte-app/src/components/document/content/header.svelte b/svelte-app/src/components/document/content/header.svelte
@@ -103,7 +103,7 @@
   @import '@styles/mixins';
 
   h1 {
-    @apply mb-4 mt-10 h-fit max-w-full font-display text-4xl font-bold text-black transition-[color];
+    @apply mb-4 mt-10 h-fit max-w-full text-4xl font-bold text-black transition-[color];
 
     overflow-wrap: break-word;
     word-break: break-word;

diff --git a/svelte-app/src/components/lists/list-item.svelte b/svelte-app/src/components/lists/list-item.svelte
@@ -48,7 +48,7 @@
     </div>
 
     <h1
-      class="min-w-fit font-display font-medium decoration-accent-light decoration-[3px] underline-offset-4 transition-colors dark:decoration-accent-dark {small
+      class="min-w-fit font-medium decoration-accent-light decoration-[3px] underline-offset-4 transition-colors dark:decoration-accent-dark {small
         ? 'text-lg decoration-2 underline-offset-2'
         : 'text-xl decoration-[3px] underline-offset-4'}"
       class:underline={hovered}

diff --git a/svelte-app/src/components/portable-text/portable-text.svelte b/svelte-app/src/components/portable-text/portable-text.svelte
@@ -133,7 +133,7 @@
       />
       {#if footnotes?.length}
         <div class="footnotes mt-8 transition-[color]">
-          <h3 class="mb-6 block font-display text-2xl font-bold">
+          <h3 class="mb-6 block text-2xl font-bold">
             {$t('Footnotes')}
           </h3>
           <ol class="ml-6 list-decimal leading-8">

diff --git a/svelte-app/src/components/portable-text/serializers/custom-heading.svelte b/svelte-app/src/components/portable-text/serializers/custom-heading.svelte
@@ -45,7 +45,7 @@
     h4,
     h5,
     h6 {
-      @apply inline font-display font-bold text-black transition-[color];
+      @apply inline font-bold text-black transition-[color];
     }
 
     &.h1 {

diff --git a/svelte-app/src/styles/_fonts.scss b/svelte-app/src/styles/_fonts.scss
@@ -1,9 +1 @@
-.comicSans {
-  .font-display,
-  .font-code,
-  .font-sans,
-  .font-mono {
-    font-family: 'Comic Neue', sans-serif !important;
-    font-weight: 700;
-  }
-}
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Ubuntu+Mono:wght@400;700&family=Work+Sans&display=swap');
diff --git a/svelte-app/tailwind.config.cjs b/svelte-app/tailwind.config.cjs
@@ -19,34 +19,17 @@ module.exports = {
       fontFamily: {
         sans: ['Roboto', ...defaultTheme.fontFamily.sans],
         mono: ['Work Sans', ...defaultTheme.fontFamily.mono],
-        code: ['Ubuntu Mono', ...defaultTheme.fontFamily.mono],
-        display: ['Roboto', ...defaultTheme.fontFamily.sans]
+        code: ['Ubuntu Mono', ...defaultTheme.fontFamily.mono]
       },
       fontSize: {
         'xs': ['0.75rem', '1'],
         '4xl': ['2.25rem', '1.15'],
         '5xl': ['2.25rem', '1.15'],
-        '6xl': ['3rem', '1.15'],
-        '7xl': ['3.5rem', '1.15'],
-        '8xl': ['4.5rem', '1.15']
+        '6xl': ['3rem', '1.15']
       },
       borderRadius: {
         sm: '0.2rem'
       },
-      keyframes: {
-        wave: {
-          to: {
-            'margin-left': '-51%'
-          }
-        }
-      },
-      background: {
-        'radial-light': 'radial-gradient(#e2e8f0, transparent 25%)',
-        'radial-dark': 'radial-gradient(#0f172a, transparent 25%)'
-      },
-      animation: {
-        wave: 'wave 1.5s linear infinite'
-      },
       screens: {
         '3xl': '1824px'
       }
-Original file line number
+Diff line change
@@ Expand Up / @@ -45,7 +45,7 @@ @@
         h4,
         h5,
         h6 {
-          @apply inline font-display font-bold text-black transition-[color];
+          @apply inline font-bold text-black transition-[color];
         }
         &.h1 {
@@ Expand Down @@