personal site
feat: fonts
+52
-20
+23
-6
astro.config.mjs
+23
-6
astro.config.mjs
···
1
1
// @ts-check
2
-
import { defineConfig } from 'astro/config';
2
+
import { defineConfig, fontProviders } from "astro/config";
3
3
4
-
import tailwindcss from '@tailwindcss/vite';
4
+
import tailwindcss from "@tailwindcss/vite";
5
5
6
6
// https://astro.build/config
7
7
export default defineConfig({
8
-
vite: {
9
-
plugins: [tailwindcss()]
10
-
}
11
-
});
8
+
vite: {
9
+
plugins: [tailwindcss()]
10
+
},
11
+
fonts: [
12
+
{
13
+
provider: fontProviders.fontsource(),
14
+
name: "Hanken Grotesk",
15
+
cssVariable: "--font-hanken-grotesk"
16
+
},
17
+
{
18
+
provider: fontProviders.fontsource(),
19
+
name: "Amiri",
20
+
cssVariable: "--font-amiri"
21
+
},
22
+
{
23
+
provider: fontProviders.fontsource(),
24
+
name: "Maple Mono",
25
+
cssVariable: "--font-maple-mono"
26
+
}
27
+
]
28
+
});
+24
src/layouts/RootLayout.astro
+24
src/layouts/RootLayout.astro
···
1
+
---
2
+
import { Font } from "astro:assets";
3
+
import "../styles/global.css";
4
+
const { title } = Astro.props;
5
+
---
6
+
7
+
<html lang="en">
8
+
<head>
9
+
<meta charset="utf-8" />
10
+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
11
+
<link rel="icon" href="/favicon.ico" />
12
+
<meta name="viewport" content="width=device-width" />
13
+
<meta name="generator" content={Astro.generator} />
14
+
<Font cssVariable="--font-maple-mono" />
15
+
<Font cssVariable="--font-hanken-grotesk" />
16
+
<Font cssVariable="--font-amiri" />
17
+
<title>{title}</title>
18
+
</head>
19
+
<body
20
+
class="bg-glw-base text-glw-text flex w-screen items-center justify-center"
21
+
>
22
+
<slot />
23
+
</body>
24
+
</html>
+5
-14
src/pages/index.astro
+5
-14
src/pages/index.astro
···
1
1
---
2
-
2
+
import "../styles/global.css";
3
+
import RootLayout from "../layouts/RootLayout.astro";
3
4
---
4
5
5
-
<html lang="en">
6
-
<head>
7
-
<meta charset="utf-8" />
8
-
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
9
-
<link rel="icon" href="/favicon.ico" />
10
-
<meta name="viewport" content="width=device-width" />
11
-
<meta name="generator" content={Astro.generator} />
12
-
<title>Astro</title>
13
-
</head>
14
-
<body>
15
-
<h1>Astro</h1>
16
-
</body>
17
-
</html>
6
+
<RootLayout title="Goldweaver's Abode">
7
+
<h1>Astro</h1>
8
+
</RootLayout>