diff --git a/astro.config.mjs b/astro.config.mjs
index 6282386..8bbc7cf 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -18,8 +18,35 @@ export default defineConfig({
vite: {
plugins: [tailwindcss()],
},
- integrations: [react(), sitemap(), mdx({
- optimize: true,
- syntaxHighlight: 'shiki',
- })],
-});
\ No newline at end of file
+ integrations: [
+ react(),
+ sitemap(),
+ mdx({
+ optimize: true,
+ syntaxHighlight: 'shiki',
+ }),
+ ],
+ experimental: {
+ fonts: [
+ {
+ name: 'Inter',
+ cssVariable: '--font-inter',
+ provider: 'local',
+ variants: [
+ { src: ['./src/assets/fonts/Inter-Regular.woff2'], weight: 400 },
+ { src: ['./src/assets/fonts/Inter-Medium.woff2'], weight: 500 },
+ { src: ['./src/assets/fonts/Inter-SemiBold.woff2'], weight: 600 },
+ { src: ['./src/assets/fonts/Inter-Bold.woff2'], weight: 700 },
+ { src: ['./src/assets/fonts/Inter-ExtraBold.woff2'], weight: 800 },
+ { src: ['./src/assets/fonts/InterVariable.woff2'] },
+ ],
+ },
+ {
+ name: 'InterVariable',
+ cssVariable: '--font-inter-variable',
+ provider: 'local',
+ variants: [{ src: ['./src/assets/fonts/InterVariable.woff2'] }],
+ },
+ ],
+ },
+});
diff --git a/src/components/partials/Head.astro b/src/components/partials/Head.astro
index 4dac924..c965bfc 100644
--- a/src/components/partials/Head.astro
+++ b/src/components/partials/Head.astro
@@ -1,5 +1,5 @@
---
-import { getImage } from 'astro:assets';
+import { getImage, Font } from 'astro:assets';
import type { Seo } from '@/lib/constants'
import { DEFAULT_CONFIGURATION } from '@/lib/constants';
import { generateAbsoluteUrl } from '@/lib/utils';
@@ -18,6 +18,8 @@ const seoImage = generateAbsoluteUrl(image.src);
+
+
{ seo?.canonicalUrl && }
{seo?.title || defaultSeo.title}
diff --git a/src/styles/global.css b/src/styles/global.css
index 246fa84..7aff087 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,7 +1,12 @@
-:root { font-family: "Inter", sans-serif; }
+:root {
+ font-family: var(--font-inter), sans-serif;
+}
@supports (font-variation-settings: normal) {
- :root { font-family: "InterVariable", sans-serif; font-optical-sizing: auto; }
+ :root {
+ font-family: var(--font-inter-variable), sans-serif;
+ font-optical-sizing: auto;
+ }
}
@import 'tailwindcss';
@@ -12,32 +17,32 @@
:root {
--palette-base: #fff;
- --palette-50: oklch(0.98 0.005 95.9); /* #fafafa */
- --palette-100: oklch(0.97 0.003 107.8); /* #f5f5f5 */
- --palette-200: oklch(0.93 0.003 107.8); /* #e5e5e5 */
- --palette-300: oklch(0.89 0.003 107.8); /* #d4d4d4 */
- --palette-400: oklch(0.74 0.003 107.8); /* #a3a3a3 */
- --palette-500: oklch(0.6 0.003 107.8); /* #737373 */
- --palette-600: oklch(0.5 0.003 107.8); /* #525252 */
- --palette-700: oklch(0.45 0.003 107.8); /* #404040 */
- --palette-800: oklch(0.35 0.003 107.8); /* #262626 */
- --palette-900: oklch(0.3 0.003 107.8); /* #171717 */
- --palette-950: oklch(0.25 0.003 107.8); /* #0a0a0a */
+ --palette-50: oklch(0.98 0.005 95.9); /* #fafafa */
+ --palette-100: oklch(0.97 0.003 107.8); /* #f5f5f5 */
+ --palette-200: oklch(0.93 0.003 107.8); /* #e5e5e5 */
+ --palette-300: oklch(0.89 0.003 107.8); /* #d4d4d4 */
+ --palette-400: oklch(0.74 0.003 107.8); /* #a3a3a3 */
+ --palette-500: oklch(0.6 0.003 107.8); /* #737373 */
+ --palette-600: oklch(0.5 0.003 107.8); /* #525252 */
+ --palette-700: oklch(0.45 0.003 107.8); /* #404040 */
+ --palette-800: oklch(0.35 0.003 107.8); /* #262626 */
+ --palette-900: oklch(0.3 0.003 107.8); /* #171717 */
+ --palette-950: oklch(0.25 0.003 107.8); /* #0a0a0a */
}
.dark {
--palette-base: #000;
- --palette-50: oklch(0.25 0.003 107.8); /* #0a0a0a */
- --palette-100: oklch(0.3 0.003 107.8); /* #171717 */
- --palette-200: oklch(0.35 0.003 107.8); /* #262626 */
- --palette-300: oklch(0.4 0.003 107.8); /* #373737 */
- --palette-400: oklch(0.5 0.003 107.8); /* #525252 */
- --palette-500: oklch(0.67 0.003 107.8); /* #8a8a8a */
- --palette-600: oklch(0.74 0.003 107.8); /* #a3a3a3 */
- --palette-700: oklch(0.89 0.003 107.8); /* #d4d4d4 */
- --palette-800: oklch(0.93 0.003 107.8); /* #e5e5e5 */
- --palette-900: oklch(0.97 0.003 107.8); /* #f5f5f5 */
- --palette-950: oklch(0.98 0.005 95.9); /* #fafafa */
+ --palette-50: oklch(0.25 0.003 107.8); /* #0a0a0a */
+ --palette-100: oklch(0.3 0.003 107.8); /* #171717 */
+ --palette-200: oklch(0.35 0.003 107.8); /* #262626 */
+ --palette-300: oklch(0.4 0.003 107.8); /* #373737 */
+ --palette-400: oklch(0.5 0.003 107.8); /* #525252 */
+ --palette-500: oklch(0.67 0.003 107.8); /* #8a8a8a */
+ --palette-600: oklch(0.74 0.003 107.8); /* #a3a3a3 */
+ --palette-700: oklch(0.89 0.003 107.8); /* #d4d4d4 */
+ --palette-800: oklch(0.93 0.003 107.8); /* #e5e5e5 */
+ --palette-900: oklch(0.97 0.003 107.8); /* #f5f5f5 */
+ --palette-950: oklch(0.98 0.005 95.9); /* #fafafa */
}
@theme inline {
@@ -50,5 +55,12 @@
--color-headings: var(--palette-800);
--color-border: var(--palette-300);
- --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ --font-sans: var(--font-inter),
+ ui-sans-serif,
+ system-ui,
+ sans-serif,
+ 'Apple Color Emoji',
+ 'Segoe UI Emoji',
+ 'Segoe UI Symbol',
+ 'Noto Color Emoji';
}
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 82cd96d..1a75cff 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -5,6 +5,7 @@ module.exports = {
typography: () => ({
DEFAULT: {
css: {
+ fontFamily: `var(--font-inter-variable), var(--font-inter), 'ui-sans-serif', 'system-ui', 'sans-serif', '"Apple Color Emoji"','"Segoe UI Emoji"', 'Segoe UI Symbol','"Noto Color Emoji"'`,
'--tw-prose-body': 'var(--color-foreground)',
'--tw-prose-headings': 'var(--color-headings)',
// '--tw-prose-lead': 'var(--color-pink-700)',
@@ -42,4 +43,4 @@ module.exports = {
}),
},
},
-}
\ No newline at end of file
+};