Skip to content

fix(theme): strip system-ui from font-family-base #4988

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

fix(theme): strip system-ui from font-family-base #4988

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
8b2c6d9
fix(theme): strip system-ui from font-family-base
tats-u Oct 14, 2025
f99f3cf
Exclude ambiguous punctuation from Inter in CJK languages
tats-u Oct 15, 2025
7056a99
Do not apply custom Inter to Korean
tats-u Oct 15, 2025
31d7db2
Fix comment
tats-u Oct 15, 2025
9c5a51e
Enable kana kerning & auto phrase in Japanese hero text
tats-u Oct 16, 2025
256340b
Enable text-autospace and line-break: strict for CJK languages
tats-u Oct 16, 2025
6949d30
Reduce specificity
tats-u Oct 17, 2025
ee9a64a
Defer text-autospace to another PR
tats-u Oct 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/client/theme-default/components/VPHero.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,11 @@ const { heroImageSlotExists } = inject(layoutInfoInjectionKey)!
font-size: 32px;
font-weight: 700;
white-space: pre-wrap;

&:lang(ja) {
font-feature-settings: 'palt';
word-break: auto-phrase;
}
}

.VPHero.has-image .name,
Expand Down
4 changes: 4 additions & 0 deletions src/client/theme-default/styles/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,6 +237,10 @@ p {
overflow-wrap: break-word;
}

:where(:lang(zh), :lang(ja), :lang(ko)) {
line-break: strict;
}

vite-error-overlay {
z-index: 9999;
}
Expand Down
327 changes: 299 additions & 28 deletions src/client/theme-default/styles/fonts.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,48 +148,319 @@
U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
Some code points in Inter are not compatible with CJK languages.

https://www.unicode.org/L2/L2014/14006-sv-western-vs-cjk.pdf
https://www.unicode.org/L2/L2018/18013-svs-proposal.pdf
https://www.unicode.org/L2/L2018/18073-svs-proposal.pdf
https://www.unicode.org/L2/L2023/23212r-quotes-svs-proposal.pdf

https://github.com/w3c/clreq/blob/f837ffe4a5501e72c17bd02961ce1b440916624f/local.css#L4
& U+2015 (similar to U+2014 in Japanese)

All CJK languages: U+00B7, U+2013, U+2014, U+2015, U+2018, U+2019, U+201C, U+201D, U+2026, U+2E3A
zh only: U+007E, U+002F
*/

@font-face {
font-family: Inter4CJK;
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-roman-cyrillic-ext.woff2') format('woff2');
unicode-range:
U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
font-family: Inter4CJK;
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-roman-cyrillic.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
font-family: Inter4CJK;
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-roman-greek-ext.woff2') format('woff2');
unicode-range: U+1F00-1FFF;
}

@font-face {
font-family: Inter4CJK;
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-roman-greek.woff2') format('woff2');
unicode-range:
U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
font-family: Inter4CJK;
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-roman-vietnamese.woff2') format('woff2');
unicode-range:
U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
U+1EA0-1EF9, U+20AB;
}

@font-face {
font-family: Inter4CJK;
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-roman-latin-ext.woff2') format('woff2');
unicode-range:
U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Exclude some ambiguous CJK characters. */
@font-face {
font-family: Inter4CJK;
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-roman-latin.woff2') format('woff2');
unicode-range:
U+0000-00B6, U+00B8-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-2012, U+2016-2017, U+201A-201B,
U+201E-2025, U+2027-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}

@font-face {
font-family: Inter4CJK;
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-italic-cyrillic-ext.woff2') format('woff2');
unicode-range:
U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
font-family: Inter4CJK;
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-italic-cyrillic.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
font-family: Inter4CJK;
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-italic-greek-ext.woff2') format('woff2');
unicode-range: U+1F00-1FFF;
}

@font-face {
font-family: Inter4CJK;
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-italic-greek.woff2') format('woff2');
unicode-range:
U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
font-family: Inter4CJK;
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-italic-vietnamese.woff2') format('woff2');
unicode-range:
U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
U+1EA0-1EF9, U+20AB;
}

@font-face {
font-family: Inter4CJK;
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-italic-latin-ext.woff2') format('woff2');
unicode-range:
U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Exclude some ambiguous CJK characters. */
@font-face {
font-family: Inter4CJK;
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-italic-latin.woff2') format('woff2');
unicode-range:
U+0000-00B6, U+00B8-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-2012, U+2016-2017, U+201A-201B,
U+201E-2025, U+2027-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}

@font-face {
font-family: Inter4zh;
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-roman-cyrillic-ext.woff2') format('woff2');
unicode-range:
U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
font-family: Inter4zh;
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-roman-cyrillic.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
font-family: Inter4zh;
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-roman-greek-ext.woff2') format('woff2');
unicode-range: U+1F00-1FFF;
}

@font-face {
font-family: Inter4zh;
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-roman-greek.woff2') format('woff2');
unicode-range:
U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
font-family: Inter4zh;
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-roman-vietnamese.woff2') format('woff2');
unicode-range:
U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
U+1EA0-1EF9, U+20AB;
}

@font-face {
font-family: Inter4zh;
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-roman-latin-ext.woff2') format('woff2');
unicode-range:
U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Exclude some ambiguous CJK characters. */
@font-face {
font-family: Inter4zh;
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-roman-latin.woff2') format('woff2');
unicode-range:
U+0000-002E, U+0030-00B6, U+00B8-00FF, U+0131, U+0152-0153, U+02BB-02BC,
U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-2012, U+2016-2017,
U+201A-201B, U+201E-2025, U+2027-206F, U+2074, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
font-family: Inter4zh;
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-italic-cyrillic-ext.woff2') format('woff2');
unicode-range:
U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
font-family: Inter4zh;
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-italic-cyrillic.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
font-family: 'Punctuation SC';
font-weight: 400;
src:
local('PingFang SC Regular'), local('Noto Sans CJK SC'),
local('Microsoft YaHei');
font-family: Inter4zh;
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-italic-greek-ext.woff2') format('woff2');
unicode-range: U+1F00-1FFF;
}

@font-face {
font-family: Inter4zh;
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-italic-greek.woff2') format('woff2');
unicode-range:
U+201C, U+201D, U+2018, U+2019, U+2E3A, U+2014, U+2013, U+2026, U+00B7,
U+007E, U+002F;
U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
font-family: 'Punctuation SC';
font-weight: 500;
src:
local('PingFang SC Medium'), local('Noto Sans CJK SC'),
local('Microsoft YaHei');
font-family: Inter4zh;
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-italic-vietnamese.woff2') format('woff2');
unicode-range:
U+201C, U+201D, U+2018, U+2019, U+2E3A, U+2014, U+2013, U+2026, U+00B7,
U+007E, U+002F;
U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
U+1EA0-1EF9, U+20AB;
}

@font-face {
font-family: 'Punctuation SC';
font-weight: 600;
src:
local('PingFang SC Semibold'), local('Noto Sans CJK SC Bold'),
local('Microsoft YaHei Bold');
font-family: Inter4zh;
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-italic-latin-ext.woff2') format('woff2');
unicode-range:
U+201C, U+201D, U+2018, U+2019, U+2E3A, U+2014, U+2013, U+2026, U+00B7,
U+007E, U+002F;
U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Exclude some ambiguous CJK characters. */
@font-face {
font-family: 'Punctuation SC';
font-weight: 700;
src:
local('PingFang SC Semibold'), local('Noto Sans CJK SC Bold'),
local('Microsoft YaHei Bold');
font-family: Inter4zh;
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-italic-latin.woff2') format('woff2');
unicode-range:
U+201C, U+201D, U+2018, U+2019, U+2E3A, U+2014, U+2013, U+2026, U+00B7,
U+007E, U+002F;
U+0000-002E, U+0030-00B6, U+00B8-00FF, U+0131, U+0152-0153, U+02BB-02BC,
U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-2012, U+2016-2017,
U+201A-201B, U+201E-2025, U+2027-206F, U+2074, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Generate the subsetted fonts using: `pyftsubset <file>.woff2 --unicodes="<range>" --output-file="inter-<style>-<subset>.woff2" --flavor=woff2` */
Loading