Skip to content

Commit 88ee887

Browse files
coderdiazcoderdiaz
authored
Merge pull request #7 from coderdiaz/feature/improved-fonts-loading
Improved fonts loading
2 parents 02eac89 + 545bca3 commit 88ee887

File tree

4 files changed

+74
-32
lines changed

4 files changed

+74
-32
lines changed

‎astro.config.mjs‎

Lines changed: 32 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,35 @@ export default defineConfig({
1818
vite: {
1919
plugins: [tailwindcss()],
2020
},
21-
integrations: [react(), sitemap(), mdx({
22-
optimize: true,
23-
syntaxHighlight: 'shiki',
24-
})],
25-
});
21+
integrations: [
22+
react(),
23+
sitemap(),
24+
mdx({
25+
optimize: true,
26+
syntaxHighlight: 'shiki',
27+
}),
28+
],
29+
experimental: {
30+
fonts: [
31+
{
32+
name: 'Inter',
33+
cssVariable: '--font-inter',
34+
provider: 'local',
35+
variants: [
36+
{ src: ['./src/assets/fonts/Inter-Regular.woff2'], weight: 400 },
37+
{ src: ['./src/assets/fonts/Inter-Medium.woff2'], weight: 500 },
38+
{ src: ['./src/assets/fonts/Inter-SemiBold.woff2'], weight: 600 },
39+
{ src: ['./src/assets/fonts/Inter-Bold.woff2'], weight: 700 },
40+
{ src: ['./src/assets/fonts/Inter-ExtraBold.woff2'], weight: 800 },
41+
{ src: ['./src/assets/fonts/InterVariable.woff2'] },
42+
],
43+
},
44+
{
45+
name: 'InterVariable',
46+
cssVariable: '--font-inter-variable',
47+
provider: 'local',
48+
variants: [{ src: ['./src/assets/fonts/InterVariable.woff2'] }],
49+
},
50+
],
51+
},
52+
});

‎src/components/partials/Head.astro‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
import { getImage } from 'astro:assets';
2+
import { getImage, Font } from 'astro:assets';
33
import type { Seo } from '@/lib/constants'
44
import { DEFAULT_CONFIGURATION } from '@/lib/constants';
55
import { generateAbsoluteUrl } from '@/lib/utils';
@@ -18,6 +18,8 @@ const seoImage = generateAbsoluteUrl(image.src);
1818
<meta charset="utf-8" />
1919
<link rel="sitemap" href="/sitemap-index.xml" />
2020
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
21+
<Font cssVariable="--font-inter" preload />
22+
<Font cssVariable="--font-inter-variable" preload />
2123
{ seo?.canonicalUrl && <link rel="canonical" href={seo?.canonicalUrl} />}
2224
<title>{seo?.title || defaultSeo.title}</title>
2325
<meta name="viewport" content="width=device-width, initial-scale=1" />

‎src/styles/global.css‎

Lines changed: 37 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
1-
:root { font-family: "Inter", sans-serif; }
1+
:root {
2+
font-family: var(--font-inter), sans-serif;
3+
}
24

35
@supports (font-variation-settings: normal) {
4-
:root { font-family: "InterVariable", sans-serif; font-optical-sizing: auto; }
6+
:root {
7+
font-family: var(--font-inter-variable), sans-serif;
8+
font-optical-sizing: auto;
9+
}
510
}
611

712
@import 'tailwindcss';
@@ -12,32 +17,32 @@
1217

1318
:root {
1419
--palette-base: #fff;
15-
--palette-50: oklch(0.98 0.005 95.9); /* #fafafa */
16-
--palette-100: oklch(0.97 0.003 107.8); /* #f5f5f5 */
17-
--palette-200: oklch(0.93 0.003 107.8); /* #e5e5e5 */
18-
--palette-300: oklch(0.89 0.003 107.8); /* #d4d4d4 */
19-
--palette-400: oklch(0.74 0.003 107.8); /* #a3a3a3 */
20-
--palette-500: oklch(0.6 0.003 107.8); /* #737373 */
21-
--palette-600: oklch(0.5 0.003 107.8); /* #525252 */
22-
--palette-700: oklch(0.45 0.003 107.8); /* #404040 */
23-
--palette-800: oklch(0.35 0.003 107.8); /* #262626 */
24-
--palette-900: oklch(0.3 0.003 107.8); /* #171717 */
25-
--palette-950: oklch(0.25 0.003 107.8); /* #0a0a0a */
20+
--palette-50: oklch(0.98 0.005 95.9); /* #fafafa */
21+
--palette-100: oklch(0.97 0.003 107.8); /* #f5f5f5 */
22+
--palette-200: oklch(0.93 0.003 107.8); /* #e5e5e5 */
23+
--palette-300: oklch(0.89 0.003 107.8); /* #d4d4d4 */
24+
--palette-400: oklch(0.74 0.003 107.8); /* #a3a3a3 */
25+
--palette-500: oklch(0.6 0.003 107.8); /* #737373 */
26+
--palette-600: oklch(0.5 0.003 107.8); /* #525252 */
27+
--palette-700: oklch(0.45 0.003 107.8); /* #404040 */
28+
--palette-800: oklch(0.35 0.003 107.8); /* #262626 */
29+
--palette-900: oklch(0.3 0.003 107.8); /* #171717 */
30+
--palette-950: oklch(0.25 0.003 107.8); /* #0a0a0a */
2631
}
2732

2833
.dark {
2934
--palette-base: #000;
30-
--palette-50: oklch(0.25 0.003 107.8); /* #0a0a0a */
31-
--palette-100: oklch(0.3 0.003 107.8); /* #171717 */
32-
--palette-200: oklch(0.35 0.003 107.8); /* #262626 */
33-
--palette-300: oklch(0.4 0.003 107.8); /* #373737 */
34-
--palette-400: oklch(0.5 0.003 107.8); /* #525252 */
35-
--palette-500: oklch(0.67 0.003 107.8); /* #8a8a8a */
36-
--palette-600: oklch(0.74 0.003 107.8); /* #a3a3a3 */
37-
--palette-700: oklch(0.89 0.003 107.8); /* #d4d4d4 */
38-
--palette-800: oklch(0.93 0.003 107.8); /* #e5e5e5 */
39-
--palette-900: oklch(0.97 0.003 107.8); /* #f5f5f5 */
40-
--palette-950: oklch(0.98 0.005 95.9); /* #fafafa */
35+
--palette-50: oklch(0.25 0.003 107.8); /* #0a0a0a */
36+
--palette-100: oklch(0.3 0.003 107.8); /* #171717 */
37+
--palette-200: oklch(0.35 0.003 107.8); /* #262626 */
38+
--palette-300: oklch(0.4 0.003 107.8); /* #373737 */
39+
--palette-400: oklch(0.5 0.003 107.8); /* #525252 */
40+
--palette-500: oklch(0.67 0.003 107.8); /* #8a8a8a */
41+
--palette-600: oklch(0.74 0.003 107.8); /* #a3a3a3 */
42+
--palette-700: oklch(0.89 0.003 107.8); /* #d4d4d4 */
43+
--palette-800: oklch(0.93 0.003 107.8); /* #e5e5e5 */
44+
--palette-900: oklch(0.97 0.003 107.8); /* #f5f5f5 */
45+
--palette-950: oklch(0.98 0.005 95.9); /* #fafafa */
4146
}
4247

4348
@theme inline {
@@ -50,5 +55,12 @@
5055
--color-headings: var(--palette-800);
5156
--color-border: var(--palette-300);
5257

53-
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
58+
--font-sans: var(--font-inter),
59+
ui-sans-serif,
60+
system-ui,
61+
sans-serif,
62+
'Apple Color Emoji',
63+
'Segoe UI Emoji',
64+
'Segoe UI Symbol',
65+
'Noto Color Emoji';
5466
}

‎tailwind.config.mjs‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ module.exports = {
55
typography: () => ({
66
DEFAULT: {
77
css: {
8+
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"'`,
89
'--tw-prose-body': 'var(--color-foreground)',
910
'--tw-prose-headings': 'var(--color-headings)',
1011
// '--tw-prose-lead': 'var(--color-pink-700)',
@@ -42,4 +43,4 @@ module.exports = {
4243
}),
4344
},
4445
},
45-
}
46+
};

0 commit comments

Comments
 (0)