From a6869d17fc8462864ad8120cc2a64f26cfbd8af4 Mon Sep 17 00:00:00 2001 From: Rishi Raj Jain Date: Tue, 16 Jan 2024 10:59:42 +0530 Subject: [PATCH] feat: astro-font - optimize fonts & prevent CLS --- package-lock.json | 24 ++++++++ package.json | 4 ++ src/components/BaseHead.astro | 100 +++++++++++++++++++++++++++++----- src/styles/fonts.css | 36 ------------ src/styles/global.css | 2 - 5 files changed, 114 insertions(+), 52 deletions(-) delete mode 100644 src/styles/fonts.css diff --git a/package-lock.json b/package-lock.json index 3f63faa..06b3ae7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,10 +11,14 @@ "@astrojs/mdx": "^2.0.0", "@astrojs/svelte": "^5.0.0", "astro": "^4.0.1", + "astro-font": "^0.0.72", "reading-time": "^1.5.0", "rehype-external-links": "^3.0.0", "remark-gfm": "^4.0.0", "remark-smartypants": "^2.0.0" + }, + "devDependencies": { + "@types/node": "^20.11.3" } }, "node_modules/@ampproject/remapping": { @@ -1502,6 +1506,15 @@ "@types/unist": "^2" } }, + "node_modules/@types/node": { + "version": "20.11.3", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.3.tgz", + "integrity": "sha512-nrlmbvGPNGaj84IJZXMPhQuCMEVTT/hXZMJJG/aIqVL9fKxqk814sGGtJA4GI6hpJSLQjpi6cn0Qx9eOf9SDVg==", + "devOptional": true, + "dependencies": { + "undici-types": "~5.26.4" + } + }, "node_modules/@types/unist": { "version": "2.0.8", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.8.tgz", @@ -1719,6 +1732,11 @@ "sharp": "^0.32.5" } }, + "node_modules/astro-font": { + "version": "0.0.72", + "resolved": "https://registry.npmjs.org/astro-font/-/astro-font-0.0.72.tgz", + "integrity": "sha512-FUjIerovSg2lsfJfvvqY23hgvc++gHi69ikFkxm0mqO3MPFykK5ppeUuROUjhNbE6vwdD8MpiJOy1CR5S0g/lQ==" + }, "node_modules/astro/node_modules/@types/unist": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz", @@ -7304,6 +7322,12 @@ "node": ">=14.17" } }, + "node_modules/undici-types": { + "version": "5.26.5", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", + "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", + "devOptional": true + }, "node_modules/unherit": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/unherit/-/unherit-3.0.1.tgz", diff --git a/package.json b/package.json index 933e5ba..5a5f190 100644 --- a/package.json +++ b/package.json @@ -13,9 +13,13 @@ "@astrojs/mdx": "^2.0.0", "@astrojs/svelte": "^5.0.0", "astro": "^4.0.1", + "astro-font": "^0.0.72", "reading-time": "^1.5.0", "rehype-external-links": "^3.0.0", "remark-gfm": "^4.0.0", "remark-smartypants": "^2.0.0" + }, + "devDependencies": { + "@types/node": "^20.11.3" } } diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro index 6e48d84..8b24e77 100644 --- a/src/components/BaseHead.astro +++ b/src/components/BaseHead.astro @@ -1,16 +1,17 @@ --- -import { ViewTransitions } from 'astro:transitions' -import '../styles/fonts.css' -import '../styles/global.css' +import "../styles/global.css"; +import { join } from "node:path"; +import { AstroFont } from "astro-font"; +import { ViewTransitions } from "astro:transitions"; export interface Props { - title: string - description: string - permalink: string + title: string; + description: string; + permalink: string; } -const { title, description, permalink } = Astro.props -const socialUrl = Astro.site.href + 'assets/social.png' +const { title, description, permalink } = Astro.props; +const socialUrl = Astro.site.href + "assets/social.png"; --- @@ -37,18 +38,89 @@ const socialUrl = Astro.site.href + 'assets/social.png' + + diff --git a/src/styles/fonts.css b/src/styles/fonts.css deleted file mode 100644 index c6f0efb..0000000 --- a/src/styles/fonts.css +++ /dev/null @@ -1,36 +0,0 @@ -/* latin */ -@font-face { - font-family: 'Fira Sans'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url(/assets/fonts/va9B4kDNxMZdWfMOD5VnLK3eRhf6Xl7Glw.woff2) - format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, - U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, - U+FEFF, U+FFFD; -} - -@font-face { - font-family: 'Merriweather'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url(/assets/fonts/u-440qyriQwlOrhSvowK_l5-fCZMdeX3rg.woff2) - format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, - U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, - U+FEFF, U+FFFD; -} - -@font-face { - font-family: 'Merriweather'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url(/assets/fonts/u-4n0qyriQwlOrhSvowK_l52xwNZWMf6hPvhPQ.woff2) - format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, - U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, - U+FEFF, U+FFFD; -} diff --git a/src/styles/global.css b/src/styles/global.css index 8638ab2..580f0c6 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -3,8 +3,6 @@ --text-main: #36393b; --text-secondary: #6b6f72; --primary-color: #548e9b; - --font-family-serif: Merriweather, serif; - --font-family-sans: 'Fira Sans', sans-serif; } :root.theme-dark {