vuejs / vitepress

Describe the bug

After updating to the latest version of vitepress, I found that my custom font was overridden. I have specified the font as LXGW WenKai, but it is overridden by the higher-level selector :root:lang(zh)

Reproduction

@import url("https://cdn.jsdelivr.net/gh/CMBill/lxgw-wenkai-web/style.css");

:root {
  --vp-font-family-base: "LXGW WenKai";
  --vp-font-family-mono: "LXGW WenKai Mono", monospace;
}

The above is the code of my font.css.

import DefaultTheme from "vitepress/theme-without-fonts";
import "./fonts.css";
import "./custom.css";

export default {
  extends: DefaultTheme,
}

This is how I use it

Expected behavior

Display the correct font and modify the document to provide the latest practices.

System Info

System:
    OS: macOS 14.1
    CPU: (8) arm64 Apple M1
    Memory: 207.77 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.7.3 - /opt/homebrew/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.5.0 - /opt/homebrew/bin/npm
    pnpm: 9.0.6 - ~/Library/pnpm/pnpm
    bun: 1.0.18 - ~/.bun/bin/bun
    Watchman: 2024.04.15.00 - /opt/homebrew/bin/watchman
  Browsers:
    Safari: 17.1
  npmPackages:
    vitepress: latest => 1.1.4

Additional context

No response

Validations

Check if you're on the latest VitePress version.
Follow our Code of Conduct
Read the docs.
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

I guess the problem comes from this piece of code

vitepress/src/client/theme-default/styles/vars.css

Lines 271 to 276 in 0cbb469

    
           :root:lang(zh) { 
        
             --vp-font-family-base: 'Punctuation SC', 'Inter', ui-sans-serif, system-ui, 
        
               'PingFang SC', 'Noto Sans CJK SC', 'Noto Sans SC', 'Heiti SC', 'DengXian', 
        
               'Microsoft YaHei', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 
        
               'Segoe UI Symbol', 'Noto Color Emoji'; 
        
           }

I added the following code to increase the priority of my CSS selector, and it seems to have solved it.

:root[lang] {
  --vp-font-family-base: "LXGW WenKai";
  --vp-font-family-mono: "LXGW WenKai Mono", monospace;
}

	:root:lang(zh) {
	--vp-font-family-base: 'Punctuation SC', 'Inter', ui-sans-serif, system-ui,
	'PingFang SC', 'Noto Sans CJK SC', 'Noto Sans SC', 'Heiti SC', 'DengXian',
	'Microsoft YaHei', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
	'Segoe UI Symbol', 'Noto Color Emoji';
	}