diff --git a/docs/guide/extending-default-theme.md b/docs/guide/extending-default-theme.md
index b1b66388..b5e70177 100644
--- a/docs/guide/extending-default-theme.md
+++ b/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
diff --git a/docs/reference/site-config.md b/docs/reference/site-config.md
index e04101dd..2b091a3e 100644
--- a/docs/reference/site-config.md
+++ b/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
diff --git a/package.json b/package.json
index 0ebc02a3..1f87da92 100644
--- a/package.json
+++ b/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": {
diff --git a/src/client/theme-default/index.ts b/src/client/theme-default/index.ts
index 5bb3bb6c..5eedce8e 100644
--- a/src/client/theme-default/index.ts
+++ b/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
diff --git a/src/client/theme-default/without-fonts.ts b/src/client/theme-default/without-fonts.ts
new file mode 100644
index 00000000..5951f9d8
--- /dev/null
+++ b/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