[BpkStylesheets] Add locale-specific font-family overrides for non-Latin languages by xiaogliu · Pull Request #4343 · Skyscanner/backpack

Xiaoguang Liu (xiaogliu) · 2026-04-01T10:17:50Z

Description

Adds CSS [lang] attribute overrides for non-Latin locales so that Noto fonts are only downloaded when the page locale matches (e.g. lang="ja-JP", lang="ar").

Design doc

Fallback Fonts — Backpack Design System

Problem

backpack-foundations PR #485 added all Noto Sans fonts to the global font-family stack. This caused every page (including English) to download large CJK/non-Latin fonts whenever any non-Latin character appeared (e.g. language switcher), leading to:

CloudFront data transfer costs jumping from ~$250/day to ~$650/day
Font transfer volume increasing from ~4.2 TB/day to ~24 TB/day

Solution

Foundations repo: Revert the global font-family change (separate PR)
This PR: Add per-locale font-family CSS variable overrides using [lang] / :lang() selectors, so non-Latin Noto fonts are only loaded on pages with the matching locale

New locale overrides added

Script	Locale	Primary Font	File
Japanese	`ja-JP`	Noto Sans JP / Noto Serif JP	`font.scss`, `larken.scss`
Traditional Chinese	`zh-TW`, `zh-HK`	Noto Sans TC / Noto Serif TC	`font.scss`, `larken.scss`
Simplified Chinese	`zh-CN`	Noto Sans SC / Noto Serif SC	`font.scss`, `larken.scss`
Korean	`ko-KR`	Noto Sans KR / Noto Serif KR	`font.scss`, `larken.scss`
Thai	`th-TH`	Noto Sans Thai / Noto Serif Thai	`font.scss`, `larken.scss`
Hindi (Devanagari)	`hi-IN`	Noto Sans Devanagari / Noto Serif Devanagari	`font.scss`, `larken.scss`
Arabic	`ar`	Noto Sans Arabic	`font.scss`, `larken.scss`
Hebrew	`he`	Noto Sans Hebrew / Noto Serif Hebrew	`font.scss`, `larken.scss`
Greek	`el-GR`	Noto Sans / Noto Serif	`font.scss`, `larken.scss`
Cyrillic	`ru-RU`, `uk-UA`, `bg-BG`	Noto Sans / Noto Serif	`font.scss`, `larken.scss`
Vietnamese	`vi-VN`	Noto Sans / Noto Serif	`font.scss`, `larken.scss`

Also updated Storybook font examples to include lang attributes for all non-Latin language samples.

Screenshots

lang = ja-JP

lang = ko-KR

Checklist

PR title includes component name
Storybook examples updated with lang attributes for all non-Latin samples
All locales from fallback fonts design doc are covered
No new components added (no README needed)
No breaking changes
Verified font loading behavior via Storybook Network tab

Copilot

Pull request overview

Adds locale-aware font-family stack overrides to bpk-stylesheets so script-specific Noto fonts are preferred only when the relevant lang is present, reducing unnecessary downloads triggered by non-Latin glyphs on otherwise Latin pages.

Changes:

Added [lang] / :lang() overrides for additional non-Latin locales to set --bpk-base-font-stack (Skyscanner Relative) and --bpk-larken-font-stack (Larken).
Included new locale coverage for zh-HK, zh-CN, ko-KR, th-TH, hi-IN, ar, and he (plus existing ja-JP, zh-TW).
Updated the font examples to apply lang attributes to non-Latin samples and added a zh-HK sample.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.

File	Description
`packages/bpk-stylesheets/font.scss`	Adds locale-specific overrides for the base font stack via CSS variables and `lang` selectors.
`packages/bpk-stylesheets/larken.scss`	Adds matching locale-specific overrides for the Larken/editorial font stack via CSS variables and `lang` selectors.
`examples/bpk-stylesheets-fonts/examples.tsx`	Updates Storybook/example rendering to include `lang` attributes for non-Latin samples and adds a `zh-HK` sample.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

skyscanner-backpack-bot · 2026-04-01T10:57:19Z

Visit https://backpack.github.io/storybook-prs/4343 to see this build running in a browser.

skyscanner-backpack-bot · 2026-04-02T07:29:25Z

Visit https://backpack.github.io/storybook-prs/4343 to see this build running in a browser.

Xiaoguang Liu (xiaogliu) · 2026-04-02T09:53:32Z

Non-Latin font handling in backpack-foundations

The global font-family revert is handled in a separate PR in the foundations repo:

Revert PR: Update Skyscanner Relative and Larken family backpack-foundations#490

This reverts backpack-foundations #485 which added all Noto Sans/Serif fonts to the global font-family stack, causing non-Latin fonts to be downloaded on every page (even English pages) whenever any non-Latin character appeared (e.g. language switcher).

Two-part fix (CLOV-1508):

Foundations repo (PR Send props to "BpkAccordion" when using "withAccordionItemState" #490): Revert the global font-family to its previous state — Latin-script pages will use system default fonts for non-Latin characters
This PR (backpack [BpkStylesheets] Add locale-specific font-family overrides for non-Latin languages #4343): Add per-locale [lang] CSS overrides so non-Latin Noto fonts are only loaded when the page locale matches (e.g. lang="ja-JP" loads Noto Sans JP)

This approach ensures non-Latin fonts are only downloaded when actually needed, bringing CloudFront costs back down from ~$650/day to ~$250/day.

GC Zhu (gc-skyscanner) · 2026-04-02T10:20:03Z

+    'Helvetica Neue', sans-serif;
+}
+
+[lang='el-GR'],


seems all font setting of 'el-GR' ru-RU vi-VN are same, are they expected? if so, could we merged them?

GC Zhu (gc-skyscanner) · 2026-04-02T10:27:26Z

+    'Noto Serif Devanagari', 'Noto Serif Thai', sans-serif;
+}
+
+[lang='el-GR'],


same here https://github.com/Skyscanner/backpack/pull/4343/changes#r3027184471

skyscanner-backpack-bot · 2026-04-02T11:01:56Z

Visit https://backpack.github.io/storybook-prs/4343 to see this build running in a browser.

…tin languages Add CSS lang-attribute overrides so non-Latin Noto fonts are only loaded when the page locale matches (e.g. lang="ja-JP", lang="ar"), preventing unnecessary font downloads on Latin-language pages that previously caused a ~2.5x increase in CloudFront data transfer costs. New locale overrides added for: zh-HK, zh-CN, ko-KR, th-TH, hi-IN, ar, he. Updated Storybook examples to include lang attributes for all non-Latin language samples to enable proper visual verification. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Type LANGUAGE_SAMPLES and remove `as any` casts for type-safe lang access - Reword font.scss comment to accurately describe selector behavior - Merge duplicate zh-TW/zh-HK selectors in both font.scss and larken.scss Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Add font-family overrides for el-GR (Greek), ru-RU/uk-UA/bg-BG (Cyrillic), and vi-VN (Vietnamese) to match the fallback fonts documentation. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

These locales share the same Noto Sans / Noto Serif font stack, so combine them into a single rule in both font.scss and larken.scss. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

skyscanner-backpack-bot · 2026-04-14T10:33:08Z

Visit https://backpack.github.io/storybook-prs/4343 to see this build running in a browser.

Include the latest foundations release which reverts the global font-family change, so consumers get both fixes in a single upgrade. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

skyscanner-backpack-bot · 2026-04-15T02:41:19Z

Visit https://backpack.github.io/storybook-prs/4343 to see this build running in a browser.

Copilot AI review requested due to automatic review settings April 1, 2026 10:17

Xiaoguang Liu (xiaogliu) added the patch Patch production bug label Apr 1, 2026

Copilot started reviewing on behalf of Xiaoguang Liu (xiaogliu) April 1, 2026 10:18 View session

Copilot AI reviewed Apr 1, 2026

View reviewed changes

Comment thread packages/bpk-stylesheets/src/BpkStylesheetsFonts.stories.tsx

Comment thread packages/bpk-stylesheets/font.scss Outdated

Comment thread packages/bpk-stylesheets/font.scss

Comment thread packages/bpk-stylesheets/larken.scss

GC Zhu (gc-skyscanner) reviewed Apr 2, 2026

View reviewed changes

GC Zhu (gc-skyscanner) previously approved these changes Apr 3, 2026

View reviewed changes

Xiaoguang Liu (xiaogliu) added the DON'T MERGE label Apr 9, 2026

Xiaoguang Liu (xiaogliu) dismissed GC Zhu (gc-skyscanner)’s stale review via 0cbf8f1 April 14, 2026 09:26

Xiaoguang Liu (xiaogliu) force-pushed the xiaogliu/font-locale-override branch from 0cbf8f1 to 799fd55 Compare April 14, 2026 09:34

Xiaoguang Liu (xiaogliu) added minor Non breaking change and removed DON'T MERGE patch Patch production bug labels Apr 14, 2026

Vincent Liu and others added 6 commits April 14, 2026 18:23

Saving uncommitted changes before archiving

4cc9650

Remove debug-storybook.log

1cbe847

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Add missing locale overrides for Greek, Cyrillic, and Vietnamese

fa7a4b6

Add font-family overrides for el-GR (Greek), ru-RU/uk-UA/bg-BG (Cyrillic), and vi-VN (Vietnamese) to match the fallback fonts documentation. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Merge identical el-GR, Cyrillic, and vi-VN font selectors

898922b

These locales share the same Noto Sans / Noto Serif font stack, so combine them into a single rule in both font.scss and larken.scss. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Xiaoguang Liu (xiaogliu) force-pushed the xiaogliu/font-locale-override branch from 799fd55 to 06d30c8 Compare April 14, 2026 10:25

Bump @skyscanner/bpk-foundations-web to 24.4.1

7a58fad

Include the latest foundations release which reverts the global font-family change, so consumers get both fixes in a single upgrade. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Xiaoguang Liu (xiaogliu) force-pushed the xiaogliu/font-locale-override branch from 06d30c8 to 7a58fad Compare April 15, 2026 02:33

IrinaWei approved these changes Apr 15, 2026

View reviewed changes

Xiaoguang Liu (xiaogliu) merged commit 8d3bbe5 into main Apr 15, 2026
15 checks passed

Xiaoguang Liu (xiaogliu) deleted the xiaogliu/font-locale-override branch April 15, 2026 06:41

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[BpkStylesheets] Add locale-specific font-family overrides for non-Latin languages#4343

[BpkStylesheets] Add locale-specific font-family overrides for non-Latin languages#4343
Xiaoguang Liu (xiaogliu) merged 7 commits intomainfrom
xiaogliu/font-locale-override

Xiaoguang Liu (xiaogliu) commented Apr 1, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

skyscanner-backpack-bot bot commented Apr 1, 2026

Uh oh!

skyscanner-backpack-bot bot commented Apr 2, 2026

Uh oh!

Xiaoguang Liu (xiaogliu) commented Apr 2, 2026 •

edited by atlassian bot

Loading

Uh oh!

GC Zhu (gc-skyscanner) Apr 2, 2026

Uh oh!

GC Zhu (gc-skyscanner) Apr 2, 2026

Uh oh!

skyscanner-backpack-bot bot commented Apr 2, 2026

Uh oh!

skyscanner-backpack-bot bot commented Apr 14, 2026

Uh oh!

skyscanner-backpack-bot bot commented Apr 15, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

Xiaoguang Liu (xiaogliu) commented Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Design doc

Problem

Solution

New locale overrides added

Screenshots

lang = ja-JP

lang = ko-KR

Checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

skyscanner-backpack-bot bot commented Apr 1, 2026

Uh oh!

skyscanner-backpack-bot bot commented Apr 2, 2026

Uh oh!

Xiaoguang Liu (xiaogliu) commented Apr 2, 2026 • edited by atlassian bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Non-Latin font handling in backpack-foundations

Two-part fix (CLOV-1508):

Uh oh!

GC Zhu (gc-skyscanner) Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

GC Zhu (gc-skyscanner) Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

skyscanner-backpack-bot bot commented Apr 2, 2026

Uh oh!

skyscanner-backpack-bot bot commented Apr 14, 2026

Uh oh!

skyscanner-backpack-bot bot commented Apr 15, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Xiaoguang Liu (xiaogliu) commented Apr 1, 2026 •

edited

Loading

Xiaoguang Liu (xiaogliu) commented Apr 2, 2026 •

edited by atlassian bot

Loading