Configure some css variables

src/components/common/CustomStyles.astro

@@ -0,0 +1,13 @@
+---
+import '@fontsource/inter/variable.css';
+---
+
+<style is:inline is:global>
+  :root {
+    --aw-font-sans: 'InterVariable';
+    --aw-font-serif: var(--ph-font-sans);
+    --aw-font-heading: 'InterVariable';
+
+    --aw-color-primary: '';
+  }
+</style>

src/components/common/Fonts.astro

@@ -1,5 +0,0 @@
----
-import '@fontsource/inter/variable.css';
----
-
-<!-- Or Google Fonts -->

src/components/common/MetaTags.astro

@@ -5,10 +5,10 @@ import { getImage } from '@astrojs/image';
 
 import { SITE } from '~/config.mjs';
 import { MetaSEO } from '~/types';
-import { getCanonical, getAsset  } from '~/utils/permalinks';
+import { getCanonical, getAsset } from '~/utils/permalinks';
 import { getRelativeUrlByFilePath } from '~/utils/directories';
 
-import Fonts from '~/components/common/Fonts.astro';
+import CustomStyles from '~/components/common/CustomStyles.astro';
 import SplitbeeAnalytics from './SplitbeeAnalytics.astro';
 
 export interface Props extends MetaSEO {
@@ -82,7 +82,7 @@ const image =
   }}
 />
 
-<Fonts />
+<CustomStyles />
 
 <!-- Google Site Verification -->
 {SITE.googleSiteVerificationId && <meta name="google-site-verification" content={SITE.googleSiteVerificationId} />}