From 38957a53e5b26fb86257893291c5a4a6eed1870c Mon Sep 17 00:00:00 2001 From: Rishi Raj Jain Date: Wed, 31 Jan 2024 18:59:42 +0530 Subject: [PATCH] feat: astro-font - optimize fonts & prevent CLS --- package-lock.json | 12 ++++++------ package.json | 2 +- src/layouts/Layout.astro | 24 ++++++++++++++++-------- tailwind.config.cjs | 2 +- 4 files changed, 24 insertions(+), 16 deletions(-) diff --git a/package-lock.json b/package-lock.json index b905670..62a75a3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,8 +12,8 @@ "@astrojs/sitemap": "^3.0.3", "@astrojs/starlight": "^0.13.0", "@astrojs/tailwind": "^5.0.2", - "@fontsource/inter": "^5.0.15", "astro": "^3.6.0", + "astro-font": "^0.0.77", "astro-robots-txt": "^1.0.0", "astro-seo": "^0.8.0", "framer-motion": "^10.16.5", @@ -1225,11 +1225,6 @@ "url": "https://opencollective.com/unified" } }, - "node_modules/@fontsource/inter": { - "version": "5.0.15", - "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.0.15.tgz", - "integrity": "sha512-/IoWYEXl8lqJEx50JqNPT+bI4VNwxb/bg2oOfvG8PiEsDsmHRFvWBVHlohBNn1+QdBf+KbAjU/gb4vlGOSsVWw==" - }, "node_modules/@gar/promisify": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz", @@ -2492,6 +2487,11 @@ "astro": "^3.0.0-beta" } }, + "node_modules/astro-font": { + "version": "0.0.77", + "resolved": "https://registry.npmjs.org/astro-font/-/astro-font-0.0.77.tgz", + "integrity": "sha512-dh5TX2uxwqdFq15DF9cbRZgEdE9o8q522MP6xZYs+rnd3dexfDsIJMeEIDNVO7rkRxwJ7sphhCqTmdWvUJaiDg==" + }, "node_modules/astro-robots-txt": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/astro-robots-txt/-/astro-robots-txt-1.0.0.tgz", diff --git a/package.json b/package.json index 7ea15dc..86afa13 100644 --- a/package.json +++ b/package.json @@ -15,8 +15,8 @@ "@astrojs/sitemap": "^3.0.3", "@astrojs/starlight": "^0.13.0", "@astrojs/tailwind": "^5.0.2", - "@fontsource/inter": "^5.0.15", "astro": "^3.6.0", + "astro-font": "^0.0.77", "astro-robots-txt": "^1.0.0", "astro-seo": "^0.8.0", "framer-motion": "^10.16.5", diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index e71f315..dab3409 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,10 +1,5 @@ --- -import '@fontsource/inter' -import '@fontsource/inter/500.css' -import '@fontsource/inter/600.css' -import '@fontsource/inter/700.css' -import '@fontsource/inter/800.css' -import '@fontsource/inter/900.css' +import { AstroFont } from 'astro-font' import { SEO } from 'astro-seo' // import codeGenieLogoLarge from '../assets/images/code-genie-logo-large.webp' import codeGenieIntroVideoPoster from '../assets/videos/code-genie-intro-poster.jpg' @@ -80,8 +75,21 @@ const description = gtag('js', new Date()) gtag('config', 'G-8DF6WBB8HG') - + + + diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 71b2f82..c463e06 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -18,7 +18,7 @@ module.exports = { customDarkBgTransparentLighter: "rgb(48, 49, 54, 0.7)" }, fontFamily: { - Inter: "Inter", + Inter: "var(--font-inter)", }, screens: { xs: "530px",