Update to @fontsource v5

onwidget · Jul 27, 2023 · 5a71691 · 5a71691
1 parent 006c332
commit 5a71691
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -21,7 +21,10 @@
     "@astrojs/tailwind": "^4.0.0",
     "@astrolib/analytics": "^0.3.0",
     "@astrolib/seo": "^0.4.0",
-    "@fontsource/inter": "^4.5.15",
+    "@fontsource-variable/inter": "^5.0.5",
+    "@iconify-json/flat-color-icons": "^1.1.6",
+    "@iconify-json/ri": "^1.1.10",
+    "@iconify-json/tabler": "^1.1.85",
     "@tailwindcss/typography": "^0.5.9",
     "@typescript-eslint/eslint-plugin": "^6.2.0",
     "@typescript-eslint/parser": "^6.2.0",
@@ -43,10 +46,5 @@
   },
   "engines": {
     "node": ">=16.12.0"
-  },
-  "dependencies": {
-    "@iconify-json/flat-color-icons": "^1.1.6",
-    "@iconify-json/ri": "^1.1.10",
-    "@iconify-json/tabler": "^1.1.85"
   }
 }
diff --git a/src/components/CustomFonts.astro b/src/components/CustomFonts.astro
@@ -0,0 +1,35 @@
+---
+import '@fontsource-variable/inter';
+
+// 'DM Sans'
+// Nunito
+// Dosis
+// Outfit
+// Roboto
+// Literata
+// 'IBM Plex Sans'
+// Karla
+// Poppins
+// 'Fira Sans'
+// 'Libre Franklin'
+// Inconsolata
+// Raleway
+// Oswald
+// 'Space Grotesk'
+// Urbanist
+---
+
+<style is:inline is:global>
+  :root {
+    --aw-font-sans: 'Inter Variable';
+    --aw-font-serif: var(--aw-font-sans);
+    --aw-font-heading: var(--aw-font-sans);
+
+    --aw-color-primary: rgb(30 64 175);
+    --aw-color-secondary: rgb(30 58 138);
+    --aw-color-accent: rgb(109 40 217);
+    --aw-color-text-page: rgb(17 24 39);
+    --aw-color-text-muted: rgb(75 85 99);
+    --aw-color-bg-page: rgb(255 255 255);
+  }
+</style>
diff --git a/src/components/CustomStyles.astro → src/components/VariablesCss.astro b/src/components/CustomStyles.astro → src/components/VariablesCss.astro
@@ -1,13 +1,9 @@
 ---
-import '@fontsource/inter/variable.css';
-
-// Nunito
-// Dosis
 ---
 
 <style is:inline is:global>
   :root {
-    --aw-font-sans: 'InterVariable';
+    --aw-font-sans: 'Inter Variable';
     --aw-font-serif: var(--aw-font-sans);
     --aw-font-heading: var(--aw-font-sans);
 
@@ -18,4 +14,4 @@ import '@fontsource/inter/variable.css';
     --aw-color-text-muted: rgb(75 85 99);
     --aw-color-bg-page: rgb(255 255 255);
   }
-</style>
+</style>
diff --git a/src/components/common/MetaTags.astro b/src/components/common/MetaTags.astro
@@ -82,8 +82,6 @@ const image =
   }}
 />
 
-<CustomStyles />
-
 <!-- Google Site Verification -->
 {SITE.googleSiteVerificationId && <meta name="google-site-verification" content={SITE.googleSiteVerificationId} />}
 
@@ -92,7 +90,4 @@ const image =
 
 {SITE.splitbeeAnalytics?.enabled && <SplitbeeAnalytics {...SITE.splitbeeAnalytics} />}
 
-<link rel="shortcut icon" href={getAsset('/favicon.ico')} />
-<link rel="icon" type="image/svg+xml" href={getAsset('/favicon.svg')} />
-<link rel="mask-icon" href={getAsset('/favicon.svg')} color="#8D46E7" />
 <link rel="sitemap" href={getAsset('/sitemap-index.xml')} />
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -2,6 +2,9 @@
 import '~/assets/styles/base.css';
 
 import MetaTags from '~/components/common/MetaTags.astro';
+import Favicons from '~/components/Favicons.astro';
+import VariablesCss from "~/components/VariablesCss.astro"
+import CustomFonts from "~/components/CustomFonts.astro"
 import BasicScripts from '~/components/common/BasicScripts.astro';
 
 import { MetaSEO } from '~/types';
@@ -18,6 +21,9 @@ const { language = 'en', textDirection = 'ltr' } = SITE;
 <!DOCTYPE html>
 <html lang={language} dir={textDirection} class="2xl:text-[20px]">
   <head>
+    <Favicons />
+    <VariablesCss />
+    <CustomFonts />
     <MetaTags {...meta} />
   </head>