From 53b58acd820b6905dde0d66b1c87f3e1626ad929 Mon Sep 17 00:00:00 2001 From: Parker Lougheed Date: Thu, 18 Jun 2026 14:51:33 +0200 Subject: [PATCH] [docs] Consolidate to flex versions of Google Sans fonts --- .../lib/_sass/components/_site-switcher.scss | 2 +- .../lib/_sass/components/_summary-card.scss | 2 +- .../site_shared/lib/src/layouts/dash_layout.dart | 12 ++++++------ sites/docs/lib/_sass/base/_root.scss | 7 ++++--- sites/docs/lib/_sass/components/_content.scss | 2 +- sites/docs/lib/_sass/components/_sidebar.scss | 2 +- .../lib/_sass/pages/_learning-resources-index.scss | 2 +- 7 files changed, 15 insertions(+), 14 deletions(-) diff --git a/packages/site_shared/lib/_sass/components/_site-switcher.scss b/packages/site_shared/lib/_sass/components/_site-switcher.scss index 07b6fad5300..ac4f4cc9f0b 100644 --- a/packages/site_shared/lib/_sass/components/_site-switcher.scss +++ b/packages/site_shared/lib/_sass/components/_site-switcher.scss @@ -31,7 +31,7 @@ font-size: 1.75rem; line-height: 1.25em; letter-spacing: 0.015em; - font-family: 'Google Sans', sans-serif; + font-family: var(--site-ui-fontFamily); user-select: none; >img { diff --git a/packages/site_shared/lib/_sass/components/_summary-card.scss b/packages/site_shared/lib/_sass/components/_summary-card.scss index a49bf5b13d0..17773ccc6b6 100644 --- a/packages/site_shared/lib/_sass/components/_summary-card.scss +++ b/packages/site_shared/lib/_sass/components/_summary-card.scss @@ -17,7 +17,7 @@ h3 { margin: 0; font-size: 1.25rem; - font-weight: 700; + font-weight: 600; color: var(--site-base-fgColor); } diff --git a/packages/site_shared/lib/src/layouts/dash_layout.dart b/packages/site_shared/lib/src/layouts/dash_layout.dart index 3cb1085b11a..715381107a5 100644 --- a/packages/site_shared/lib/src/layouts/dash_layout.dart +++ b/packages/site_shared/lib/src/layouts/dash_layout.dart @@ -44,12 +44,12 @@ abstract class DashLayout implements PageLayout { ({Set prerender, Set prefetch}) speculationUrls(Page page) => const (prerender: {}, prefetch: {}); - List get fonts => [ - 'https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap', - 'https://fonts.googleapis.com/css2?family=Google+Sans+Mono:wght@400;500;700&display=swap', - 'https://fonts.googleapis.com/css2?family=Google+Sans+Text:wght@400;500;700&display=swap', + /// Font stylesheet URLs to load in the document head before site styles. + /// + /// Override this to add, remove, or replace site-level font resources. + List get fontUrls => const [ + 'https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..72,400..700&family=Google+Sans+Code:ital,wght@0,400..700;1,400..700&display=swap', 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0..1,0', - 'https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap', ]; String get stylesHash; @@ -142,7 +142,7 @@ abstract class DashLayout implements PageLayout { href: 'https://fonts.gstatic.com', attributes: {'crossorigin': ''}, ), - for (final font in fonts) link(rel: 'stylesheet', href: font), + for (final font in fontUrls) link(rel: 'stylesheet', href: font), // Set site styles. link( diff --git a/sites/docs/lib/_sass/base/_root.scss b/sites/docs/lib/_sass/base/_root.scss index 14dff029b21..4e302a796c3 100644 --- a/sites/docs/lib/_sass/base/_root.scss +++ b/sites/docs/lib/_sass/base/_root.scss @@ -5,10 +5,11 @@ $base_primary_color: #0468D7; // Root variables shared by both light and dark mode. body { // Site typography. - --site-ui-fontFamily: 'Google Sans', 'Roboto', ui-sans, sans-serif; - --site-body-fontFamily: 'Google Sans Text', 'Roboto', ui-sans, sans-serif; - --site-code-fontFamily: 'Google Sans Mono', 'Roboto Mono', ui-monospace, monospace; + --site-ui-fontFamily: 'Google Sans Flex', 'Roboto', ui-sans, sans-serif; + --site-body-fontFamily: 'Google Sans Flex', 'Roboto', ui-sans, sans-serif; + --site-code-fontFamily: 'Google Sans Code', 'Roboto Mono', ui-monospace, monospace; --site-icon-fontFamily: 'Material Symbols Outlined', 'Material Symbols', 'Material Icons'; + font-optical-sizing: auto; // Site layout sizes. --site-header-height: 4rem; diff --git a/sites/docs/lib/_sass/components/_content.scss b/sites/docs/lib/_sass/components/_content.scss index 0800aeb3e30..94200729256 100644 --- a/sites/docs/lib/_sass/components/_content.scss +++ b/sites/docs/lib/_sass/components/_content.scss @@ -106,7 +106,7 @@ main { b, strong { - font-weight: bolder; + font-weight: 600; } h1, diff --git a/sites/docs/lib/_sass/components/_sidebar.scss b/sites/docs/lib/_sass/components/_sidebar.scss index ffa324a545c..0b0168427e8 100644 --- a/sites/docs/lib/_sass/components/_sidebar.scss +++ b/sites/docs/lib/_sass/components/_sidebar.scss @@ -46,7 +46,7 @@ } .nav-header { - font-weight: bolder; + font-weight: 650; font-size: 1rem; padding: 0.25rem 0.4rem 0; color: var(--site-base-fgColor-lighter); diff --git a/sites/docs/lib/_sass/pages/_learning-resources-index.scss b/sites/docs/lib/_sass/pages/_learning-resources-index.scss index 3527fa4ca80..0e6581adbd5 100644 --- a/sites/docs/lib/_sass/pages/_learning-resources-index.scss +++ b/sites/docs/lib/_sass/pages/_learning-resources-index.scss @@ -130,7 +130,7 @@ color: var(--site-base-fgColor-alt); background-color: var(--site-raised-bgColor); font-family: var(--site-ui-fontFamily); - font-weight: 700; + font-weight: 600; font-size: .925rem; padding: .5rem; border-bottom: 1px solid var(--site-inset-borderColor);