feat(theme): support extending default theme without importing fonts

Author: yyx990803

docs/guide/extending-default-theme.md

@@ -36,6 +36,52 @@ export default DefaultTheme
 
 See [default theme CSS variables](https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css) that can be overridden.
 
+## Using Different Fonts
+
+VitePress uses [Inter](https://rsms.me/inter/) as the default font, and will include the fonts in the build output. The font is also auto preloaded in production. However, this may not be desirable if you want to use a different main font.
+
+To avoid including Inter in the build output, import the theme from `vitepress/theme-without-fonts` instead:
+
+```js
+// .vitepress/theme/index.js
+import DefaultTheme from 'vitepress/theme-without-fonts'
+import './my-fonts.css'
+
+export default DefaultTheme
+```
+
+```css
+/* .vitepress/theme/custom.css */
+:root {
+  --vp-font-family-base: /* normal text font */
+  --vp-font-family-mono: /* code font */
+}
+```
+
+If your font is a local file referenced via `@font-face`, it will be processed as an asset and included under `.vitepress/dist/assets` with hashed filename. To preload this file, use the [transformHead](/reference/site-config#transformhead) build hook:
+
+```js
+// .vitepress/config.js
+export default {
+  transformHead({ assets }) {
+    // adjust the regex accordingly to match your font
+    const myFontFile = assets.find(file => /font-name\.\w+\.woff2/)
+    if (myFontFile) {
+      return [
+        'link',
+        {
+          rel: 'preload',
+          href: myFontFile,
+          as: 'font',
+          type: 'font/woff2',
+          crossorigin: ''
+        }
+      ]
+    }
+  }
+}
+```
+
 ## Registering Global Components
 
 ```js

docs/reference/site-config.md

@@ -477,6 +477,8 @@ export default {
 
 ```ts
 interface TransformContext {
+  page: string // e.g. index.md (relative to srcDir)
+  assets: string[] // all non-js/css assets as fully resolved public URL
   siteConfig: SiteConfig
   siteData: SiteData
   pageData: PageData

package.json

@@ -21,6 +21,10 @@
     "./theme": {
       "types": "./theme.d.ts",
       "default": "./dist/client/theme-default/index.js"
+    },
+    "./theme-without-fonts": {
+      "types": "./theme.d.ts",
+      "default": "./dist/client/theme-default/without-fonts.js"
     }
   },
   "bin": {

src/client/theme-default/index.ts

@@ -1,34 +1,4 @@
 import './styles/fonts.css'
-import './styles/vars.css'
-import './styles/base.css'
-import './styles/utils.css'
-import './styles/components/custom-block.css'
-import './styles/components/vp-code.css'
-import './styles/components/vp-code-group.css'
-import './styles/components/vp-doc.css'
-import './styles/components/vp-sponsor.css'
-
-import type { Theme } from 'vitepress'
-import VPBadge from './components/VPBadge.vue'
-import Layout from './Layout.vue'
-
-// Note: if we add more optional components here, i.e. components that are not
-// used in the theme by default unless the user imports them, make sure to update
-// the `lazyDefaultThemeComponentsRE` regex in src/node/build/bundle.ts.
-export { default as VPHomeHero } from './components/VPHomeHero.vue'
-export { default as VPHomeFeatures } from './components/VPHomeFeatures.vue'
-export { default as VPHomeSponsors } from './components/VPHomeSponsors.vue'
-export { default as VPDocAsideSponsors } from './components/VPDocAsideSponsors.vue'
-export { default as VPTeamPage } from './components/VPTeamPage.vue'
-export { default as VPTeamPageTitle } from './components/VPTeamPageTitle.vue'
-export { default as VPTeamPageSection } from './components/VPTeamPageSection.vue'
-export { default as VPTeamMembers } from './components/VPTeamMembers.vue'
-
-const theme: Theme = {
-  Layout,
-  enhanceApp: ({ app }) => {
-    app.component('Badge', VPBadge)
-  }
-}
 
+import theme from './without-fonts.js'
 export default theme

src/client/theme-default/without-fonts.ts

@@ -0,0 +1,33 @@
+import './styles/vars.css'
+import './styles/base.css'
+import './styles/utils.css'
+import './styles/components/custom-block.css'
+import './styles/components/vp-code.css'
+import './styles/components/vp-code-group.css'
+import './styles/components/vp-doc.css'
+import './styles/components/vp-sponsor.css'
+
+import type { Theme } from 'vitepress'
+import VPBadge from './components/VPBadge.vue'
+import Layout from './Layout.vue'
+
+// Note: if we add more optional components here, i.e. components that are not
+// used in the theme by default unless the user imports them, make sure to update
+// the `lazyDefaultThemeComponentsRE` regex in src/node/build/bundle.ts.
+export { default as VPHomeHero } from './components/VPHomeHero.vue'
+export { default as VPHomeFeatures } from './components/VPHomeFeatures.vue'
+export { default as VPHomeSponsors } from './components/VPHomeSponsors.vue'
+export { default as VPDocAsideSponsors } from './components/VPDocAsideSponsors.vue'
+export { default as VPTeamPage } from './components/VPTeamPage.vue'
+export { default as VPTeamPageTitle } from './components/VPTeamPageTitle.vue'
+export { default as VPTeamPageSection } from './components/VPTeamPageSection.vue'
+export { default as VPTeamMembers } from './components/VPTeamMembers.vue'
+
+const theme: Theme = {
+  Layout,
+  enhanceApp: ({ app }) => {
+    app.component('Badge', VPBadge)
+  }
+}
+
+export default theme