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

vuejs · Mar 14, 2023 · da1691d · da1691d
1 parent 24735db
commit da1691d
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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