feat: self host font

Rule-34 · Dec 28, 2023 · 595a78d · 595a78d
1 parent 355deac
commit 595a78d
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 102 deletions.
diff --git a/app.vue b/app.vue
@@ -64,18 +64,6 @@
       {
         rel: 'apple-touch-icon',
         href: '/apple-touch-icon-180x180.png'
-      },
-
-      // Font
-      {
-        rel: 'preconnect',
-        href: 'https://rsms.me'
-      },
-
-      {
-        rel: 'stylesheet',
-        type: 'text/css',
-        href: 'https://rsms.me/inter/inter.css'
       }
     ]
   })

diff --git a/assets/css/main.css b/assets/css/main.css
@@ -5,82 +5,99 @@
 /* Improved defaults */
 @layer base {
 
-    html {
-        @apply bg-base-1000 text-base-content;
-
-        /*scroll-behavior: smooth;*/
-    }
-
-    /* https://www.joshwcomeau.com/css/custom-css-reset/#five-font-smoothing-6 */
-    body {
-        @apply font-sans antialiased;
-    }
-
-    /* https://www.joshwcomeau.com/css/custom-css-reset/#nine-root-stacking-context-10 */
-    #__nuxt {
-        /*@apply isolate;*/
-    }
-
-    /* https://www.joshwcomeau.com/css/custom-css-reset/#three-percentage-based-heights-4 */
-    html, body, #__nuxt {
-        @apply h-full;
-    }
-
-    /* Disable arrows on Number input - https://stackoverflow.com/a/74043438 */
-    input[type='number']::-webkit-outer-spin-button,
-    input[type='number']::-webkit-inner-spin-button,
-    input[type='number'] {
-        -webkit-appearance: none;
-        -moz-appearance: textfield !important;
-    }
-
-    /* Fix for elements jumping around with overflow-auto */
-    * {
-        scrollbar-gutter: stable;
-
-        /*min-width: 0;*/
-        /*min-height: 0;*/
-    }
+  /* Self-hosted font */
+  /* Used in tailwind.config.js */
+  @font-face {
+    font-family: InterVariable;
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url('~/assets/fonts/InterVariable.V4.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: InterVariable;
+    font-style: italic;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url('~/assets/fonts/InterVariable-Italic.V4.woff2') format('woff2');
+  }
+
+  html {
+    @apply bg-base-1000 text-base-content;
+
+    /*scroll-behavior: smooth;*/
+  }
+
+  /* https://www.joshwcomeau.com/css/custom-css-reset/#five-font-smoothing-6 */
+  body {
+    @apply font-sans antialiased;
+  }
+
+  /* https://www.joshwcomeau.com/css/custom-css-reset/#nine-root-stacking-context-10 */
+  #__nuxt {
+    /*@apply isolate;*/
+  }
+
+  /* https://www.joshwcomeau.com/css/custom-css-reset/#three-percentage-based-heights-4 */
+  html, body, #__nuxt {
+    @apply h-full;
+  }
+
+  /* Disable arrows on Number input - https://stackoverflow.com/a/74043438 */
+  input[type='number']::-webkit-outer-spin-button,
+  input[type='number']::-webkit-inner-spin-button,
+  input[type='number'] {
+    -webkit-appearance: none;
+    -moz-appearance: textfield !important;
+  }
+
+  /* Fix for elements jumping around with overflow-auto */
+  * {
+    scrollbar-gutter: stable;
+
+    /*min-width: 0;*/
+    /*min-height: 0;*/
+  }
 }
 
 @layer components {
 
 }
 
 @layer utilities {
-    /*
-    * NOT TO BE USED DIRECTLY AS CSS
-    * IN CLASSES IT SHOULD BE USED AS `focus-visible:focus-outline-util`
-    */
-    .focus-outline-util {
-        @apply outline outline-2 outline-offset-2 outline-base-content-highlight;
-    }
-
-    /*
-    * NOT TO BE USED DIRECTLY AS CSS
-    * IN CLASSES IT SHOULD BE USED AS `hover:hover-text-util`
-    */
-    .hover-text-util {
-        @apply text-base-content-hover;
-    }
-
-    /*
-    * NOT TO BE USED DIRECTLY AS CSS
-    * IN CLASSES IT SHOULD BE USED AS `hover:hover-bg-util`
-     */
-    .hover-bg-util {
-        @apply bg-base-0/20;
-    }
-
-    /* https://github.com/reslear/tailwind-scrollbar-hide/blob/main/src/index.js */
-    .scrollbar-hide::-webkit-scrollbar {
-        display: none;
-    }
-
-    .scrollbar-hide {
-        -ms-overflow-style: none;
-        scrollbar-width: none;
-    }
+  /*
+  * NOT TO BE USED DIRECTLY AS CSS
+  * IN CLASSES IT SHOULD BE USED AS `focus-visible:focus-outline-util`
+  */
+  .focus-outline-util {
+    @apply outline outline-2 outline-offset-2 outline-base-content-highlight;
+  }
+
+  /*
+  * NOT TO BE USED DIRECTLY AS CSS
+  * IN CLASSES IT SHOULD BE USED AS `hover:hover-text-util`
+  */
+  .hover-text-util {
+    @apply text-base-content-hover;
+  }
+
+  /*
+  * NOT TO BE USED DIRECTLY AS CSS
+  * IN CLASSES IT SHOULD BE USED AS `hover:hover-bg-util`
+   */
+  .hover-bg-util {
+    @apply bg-base-0/20;
+  }
+
+  /* https://github.com/reslear/tailwind-scrollbar-hide/blob/main/src/index.js */
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
 }
 
 /* ----------------------------------------------
@@ -91,11 +108,11 @@
  * ---------------------------------------------- */
 
 .flip-vertical-fwd {
-    animation: flip-vertical-fwd 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
+  animation: flip-vertical-fwd 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
 }
 
 .slide-in-blurred-top {
-    animation: slide-in-blurred-top 0.8s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
+  animation: slide-in-blurred-top 0.8s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
 }
 
 /**
@@ -105,25 +122,25 @@
  */
 
 @keyframes flip-vertical-fwd {
-    0% {
-        transform: translateZ(0) rotateY(0);
-    }
-    100% {
-        transform: translateZ(160px) rotateY(180deg);
-    }
+  0% {
+    transform: translateZ(0) rotateY(0);
+  }
+  100% {
+    transform: translateZ(160px) rotateY(180deg);
+  }
 }
 
 @keyframes slide-in-blurred-top {
-    0% {
-        transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
-        transform-origin: 50% 0%;
-        filter: blur(40px);
-        opacity: 0;
-    }
-    100% {
-        transform: translateY(0) scaleY(1) scaleX(1);
-        transform-origin: 50% 50%;
-        filter: blur(0);
-        opacity: 1;
-    }
+  0% {
+    transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
+    transform-origin: 50% 0%;
+    filter: blur(40px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0) scaleY(1) scaleX(1);
+    transform-origin: 50% 50%;
+    filter: blur(0);
+    opacity: 1;
+  }
 }
diff --git a/assets/fonts/InterVariable-Italic.V4.woff2 b/assets/fonts/InterVariable-Italic.V4.woff2
diff --git a/assets/fonts/InterVariable.V4.woff2 b/assets/fonts/InterVariable.V4.woff2
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -50,7 +50,7 @@ module.exports = {
       },
 
       fontFamily: {
-        sans: ['Inter var', ...defaultTheme.fontFamily.sans]
+        sans: ['InterVariable', ...defaultTheme.fontFamily.sans]
       }
     }
   },