From 6ccf04bedb00824fbad36bbf97e3d4cc4b4190f6 Mon Sep 17 00:00:00 2001 From: Rishi Raj Jain Date: Fri, 26 Jan 2024 16:52:08 +0530 Subject: [PATCH 1/4] feat: astro-font - optimize fonts & prevent CLS --- assets/scss/astro-ecommerce/_variables.scss | 4 +-- .../astro-ecommerce/bootstrap/_variables.scss | 2 +- package-lock.json | 6 ++++ package.json | 1 + src/layouts/Layout.astro | 35 +++++++++++++++++-- 5 files changed, 42 insertions(+), 6 deletions(-) diff --git a/assets/scss/astro-ecommerce/_variables.scss b/assets/scss/astro-ecommerce/_variables.scss index 067706c4..b5497995 100644 --- a/assets/scss/astro-ecommerce/_variables.scss +++ b/assets/scss/astro-ecommerce/_variables.scss @@ -592,8 +592,8 @@ $aspect-ratios: ( // Font, line-height, and color for body text, headings, and more. // stylelint-disable value-keyword-case -$font-family-sans-serif: 'Noto Sans', 'Open Sans' !default; -$font-family-pt-mono: 'PT Mono' !default; +$font-family-sans-serif: var(--font-noto-sans), var(--font-open-sans) !default; +$font-family-pt-mono: var(--font-pt-mono) !default; $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; // stylelint-enable value-keyword-case $font-family-base: var(--bs-font-sans-serif) !default; diff --git a/assets/scss/astro-ecommerce/bootstrap/_variables.scss b/assets/scss/astro-ecommerce/bootstrap/_variables.scss index 0288898d..1eb9086d 100644 --- a/assets/scss/astro-ecommerce/bootstrap/_variables.scss +++ b/assets/scss/astro-ecommerce/bootstrap/_variables.scss @@ -603,7 +603,7 @@ $aspect-ratios: ( // scss-docs-start font-variables // stylelint-disable value-keyword-case -$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; +$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", var(--font-noto-sans), "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; // stylelint-enable value-keyword-case $font-family-base: var(--#{$prefix}font-sans-serif) !default; diff --git a/package-lock.json b/package-lock.json index 76851164..89c98c06 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@types/react": "^18.0.21", "@types/react-dom": "^18.0.6", "astro": "^2.0.1", + "astro-font": "^0.0.77", "forward-ref": "^1.0.0", "json-server": "^0.17.0", "react": "^18.2.0", @@ -1578,6 +1579,11 @@ } } }, + "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/node_modules/lru-cache": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", diff --git a/package.json b/package.json index 42b92499..79c9386e 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@types/react": "^18.0.21", "@types/react-dom": "^18.0.6", "astro": "^2.0.1", + "astro-font": "^0.0.77", "forward-ref": "^1.0.0", "json-server": "^0.17.0", "react": "^18.2.0", diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 5a676c28..804662bd 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,4 +1,6 @@ --- +import { AstroFont } from 'astro-font'; + export interface Props { title: string; } @@ -12,9 +14,36 @@ const { title } = Astro.props; - {title} From 9b4c51a4191da8d254f80ef7ee22af0b8feee378 Mon Sep 17 00:00:00 2001 From: Rishi Raj Jain Date: Thu, 15 May 2025 20:01:25 +0530 Subject: [PATCH 2/4] Update _variables.scss --- assets/scss/astro-ecommerce/_variables.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/scss/astro-ecommerce/_variables.scss b/assets/scss/astro-ecommerce/_variables.scss index b5497995..067706c4 100644 --- a/assets/scss/astro-ecommerce/_variables.scss +++ b/assets/scss/astro-ecommerce/_variables.scss @@ -592,8 +592,8 @@ $aspect-ratios: ( // Font, line-height, and color for body text, headings, and more. // stylelint-disable value-keyword-case -$font-family-sans-serif: var(--font-noto-sans), var(--font-open-sans) !default; -$font-family-pt-mono: var(--font-pt-mono) !default; +$font-family-sans-serif: 'Noto Sans', 'Open Sans' !default; +$font-family-pt-mono: 'PT Mono' !default; $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; // stylelint-enable value-keyword-case $font-family-base: var(--bs-font-sans-serif) !default; From 51319c8d1e1c442b2df5b1b1bf1b03bb8b162d71 Mon Sep 17 00:00:00 2001 From: Rishi Raj Jain Date: Thu, 15 May 2025 20:02:00 +0530 Subject: [PATCH 3/4] Update _variables.scss --- assets/scss/astro-ecommerce/_variables.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/scss/astro-ecommerce/_variables.scss b/assets/scss/astro-ecommerce/_variables.scss index 067706c4..b5497995 100644 --- a/assets/scss/astro-ecommerce/_variables.scss +++ b/assets/scss/astro-ecommerce/_variables.scss @@ -592,8 +592,8 @@ $aspect-ratios: ( // Font, line-height, and color for body text, headings, and more. // stylelint-disable value-keyword-case -$font-family-sans-serif: 'Noto Sans', 'Open Sans' !default; -$font-family-pt-mono: 'PT Mono' !default; +$font-family-sans-serif: var(--font-noto-sans), var(--font-open-sans) !default; +$font-family-pt-mono: var(--font-pt-mono) !default; $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; // stylelint-enable value-keyword-case $font-family-base: var(--bs-font-sans-serif) !default; From 12016f29f3e927fb2b3d611128d035c9f4fdae40 Mon Sep 17 00:00:00 2001 From: Rishi Raj Jain Date: Thu, 15 May 2025 20:02:35 +0530 Subject: [PATCH 4/4] Update _variables.scss --- assets/scss/astro-ecommerce/bootstrap/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/scss/astro-ecommerce/bootstrap/_variables.scss b/assets/scss/astro-ecommerce/bootstrap/_variables.scss index 1eb9086d..0288898d 100644 --- a/assets/scss/astro-ecommerce/bootstrap/_variables.scss +++ b/assets/scss/astro-ecommerce/bootstrap/_variables.scss @@ -603,7 +603,7 @@ $aspect-ratios: ( // scss-docs-start font-variables // stylelint-disable value-keyword-case -$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", var(--font-noto-sans), "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; +$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; // stylelint-enable value-keyword-case $font-family-base: var(--#{$prefix}font-sans-serif) !default;