feat(build): add `useWebFonts` option (#1531)

src/client/theme-default/styles/base.css

@@ -26,7 +26,7 @@ body {
   color: var(--vp-c-text-1);
   background-color: var(--vp-c-bg);
   direction: ltr;
-  font-synthesis: none;
+  font-synthesis: style;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

src/client/theme-default/styles/fonts.css

@@ -1,3 +1,7 @@
+/* webfont-marker-begin */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
+/* webfont-marker-end */
+
 @font-face {
   font-family: 'Inter var';
   font-weight: 100 900;

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

@@ -145,9 +145,9 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-font-family-base: 'Inter var experimental', 'Inter var', ui-sans-serif,
+  --vp-font-family-base: 'Inter var experimental', 'Inter var', 'Inter',
-    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
-    'Helvetica Neue', Helvetica, Arial, 'Noto Sans', sans-serif,
+    Roboto, 'Helvetica Neue', Helvetica, Arial, 'Noto Sans', sans-serif,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --vp-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco,
     Consolas, 'Liberation Mono', 'Courier New', monospace;

src/node/config.ts

@@ -87,6 +87,16 @@ export interface UserConfig<ThemeConfig = any> {
    */
   cleanUrls?: CleanUrlsMode
 
+  /**
+   * Use web fonts instead of emitting font files to dist.
+   * The used theme should import a file named `fonts.(s)css` for this to work.
+   * If you are a theme author, to support this, place your web font import
+   * between `webfont-marker-begin` and `webfont-marker-end` comments.
+   *
+   * @default true in webcontainers, else false
+   */
+  useWebFonts?: boolean
+
   /**
    * Build end hook: called when SSG finish.
    * @param siteConfig The resolved configuration.
@@ -142,6 +152,7 @@ export interface SiteConfig<ThemeConfig = any>
     | 'lastUpdated'
     | 'ignoreDeadLinks'
     | 'cleanUrls'
+    | 'useWebFonts'
     | 'buildEnd'
     | 'transformHead'
     | 'transformHtml'
@@ -230,6 +241,9 @@ export async function resolveConfig(
     mpa: !!userConfig.mpa,
     ignoreDeadLinks: userConfig.ignoreDeadLinks,
     cleanUrls: userConfig.cleanUrls || 'disabled',
+    useWebFonts:
+      userConfig.useWebFonts ??
+      typeof process.versions.webcontainer === 'string',
     buildEnd: userConfig.buildEnd,
     transformHead: userConfig.transformHead,
     transformHtml: userConfig.transformHtml,

src/node/plugin.ts

@@ -13,6 +13,7 @@ import { slash } from './utils/slash'
 import { OutputAsset, OutputChunk } from 'rollup'
 import { staticDataPlugin } from './staticDataPlugin'
 import { PageDataPayload } from './shared'
+import { webFontsPlugin } from './webFontsPlugin'
 
 const hashRE = /\.(\w+)\.js$/
 const staticInjectMarkerRE =
@@ -315,6 +316,7 @@ export async function createVitePressPlugin(
   return [
     vitePressPlugin,
     vuePlugin,
+    webFontsPlugin(siteConfig.useWebFonts),
     ...(userViteConfig?.plugins || []),
     staticDataPlugin
   ]

src/node/webFontsPlugin.ts

@@ -0,0 +1,19 @@
+import { Plugin } from 'vite'
+
+const webfontMarkerRE =
+  /\/(?:\*|\/) *webfont-marker-begin *(?:\*\/|\n|\r|\n\r|\r\n)([^]*?)\/(?:\*|\/) *webfont-marker-end *(?:\*\/|\n|\r|\n\r|\r\n|$)/
+
+export const webFontsPlugin = (enabled = false): Plugin => ({
+  name: 'vitepress:webfonts',
+  enforce: 'pre',
+
+  transform(code, id) {
+    if (/[\\/]fonts\.s?css/.test(id)) {
+      if (enabled) {
+        return code.match(webfontMarkerRE)?.[1]
+      } else {
+        return code.replace(webfontMarkerRE, '')
+      }
+    }
+  }
+})