Add custom font example for WXT 0.20.7+

examples/custom-fonts/README.md

@@ -0,0 +1,31 @@
+---
+name: Custom Fonts
+description: Show how to use custom fonts throughout your extension.
+---
+
+> [!IMPORTANT]
+> This example only works for WXT v0.20.7 and above. For older versions, see [React Content Script UI Custom Font](https://github.com/wxt-dev/examples/tree/main/examples/react-content-ui-custom-font) example
+
+In this example, we'll add custom fonts from [Google Fonts](https://fonts.google.com/) to the popup and a ShadowRoot content script UI.
+
+```sh
+pnpm i
+pnpm dev
+```
+
+Important steps:
+
+1. Export the fonts you want to use from Google Fonts using <https://gwfh.mranftl.com/fonts>
+   - Set the folder prefix to `wxt-extension://__MSG_@@extension_id__/fonts/` and copy the CSS into `assets/fonts.css`
+      https://github.com/wxt-dev/examples/blob/84eb502bda5a1544f58919b69769af0bd3e617a0/examples/custom-fonts/assets/fonts.css#L1-L21
+   - Move the downloaded font files into the [`public/fonts` directory](public/fonts)
+2. Create `assets/style.css`. This file will contain the extension's base styles that all entrypoints will use. Make sure to import the `fonts.css` file:
+   https://github.com/wxt-dev/examples/blob/84eb502bda5a1544f58919b69769af0bd3e617a0/examples/custom-fonts/assets/style.css#L1
+3. In your HTML files, just link to the `style.css` file like normal:
+   https://github.com/wxt-dev/examples/blob/84eb502bda5a1544f58919b69769af0bd3e617a0/examples/custom-fonts/entrypoints/popup.html#L7
+4. In your content script entrypoint, import the `style.css`. If you're using `createShadowRootUi`, remember to set `cssInjectionMode: "ui"`, just like the [normal setup](https://wxt.dev/guide/essentials/content-scripts.html#shadow-root). There's nothing special here.
+   https://github.com/wxt-dev/examples/blob/84eb502bda5a1544f58919b69769af0bd3e617a0/examples/custom-fonts/entrypoints/content.ts#L2
+   https://github.com/wxt-dev/examples/blob/84eb502bda5a1544f58919b69769af0bd3e617a0/examples/custom-fonts/entrypoints/content.ts#L6
+   https://github.com/wxt-dev/examples/blob/84eb502bda5a1544f58919b69769af0bd3e617a0/examples/custom-fonts/entrypoints/content.ts#L9-L10
+
+And that's it! You can now use custom fonts in your extension, wherever you want.

examples/custom-fonts/assets/fonts.css

@@ -0,0 +1,21 @@
+/* Generated with https://gwfh.mranftl.com/fonts */
+
+/* overpass-regular - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "Overpass";
+  font-style: normal;
+  font-weight: 400;
+  src: url("wxt-extension://__MSG_@@extension_id__/fonts/overpass-v18-latin-regular.woff2")
+    format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* poppins-regular - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "Poppins";
+  font-style: normal;
+  font-weight: 400;
+  src: url("wxt-extension://__MSG_@@extension_id__/fonts/poppins-v23-latin-regular.woff2")
+    format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}

examples/custom-fonts/assets/style.css

@@ -0,0 +1,9 @@
+@import url("./fonts.css");
+
+.font-poppins {
+  font-family: "Poppins", sans-serif;
+}
+
+.font-overpass {
+  font-family: "Overpass", sans-serif;
+}

examples/custom-fonts/entrypoints/content.ts

@@ -0,0 +1,39 @@
+import { ContentScriptContext } from "#imports";
+import "~/assets/style.css";
+
+export default defineContentScript({
+  matches: ["*://*/*"],
+  cssInjectionMode: "ui",
+
+  async main(ctx) {
+    const ui = await createUi(ctx);
+    ui.autoMount();
+  },
+});
+
+function createUi(ctx: ContentScriptContext) {
+  return createShadowRootUi(ctx, {
+    name: "custom-font-example",
+    position: "overlay",
+    anchor: "body",
+    append: "first",
+    onMount(container) {
+      // Make UI more visible, not necessary for fonts to work
+      container.style.backgroundColor = "white";
+      container.style.position = "relative";
+      container.style.zIndex = "9999";
+
+      // Create 3 paragraphs with different fonts
+      container.appendChild(createP("Default"));
+      container.appendChild(createP("Poppins", "font-poppins"));
+      container.appendChild(createP("Overpass", "font-overpass"));
+    },
+  });
+}
+
+function createP(text: string, className?: string) {
+  const p = document.createElement("p");
+  p.textContent = text;
+  if (className) p.classList.add(className);
+  return p;
+}

examples/custom-fonts/entrypoints/popup.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Popup</title>
+    <link rel="stylesheet" href="~/assets/style.css" />
+  </head>
+  <body>
+    <p>Default</p>
+    <p class="font-poppins">Poppins</p>
+    <p class="font-overpass">Overpass</p>
+  </body>
+</html>

examples/custom-fonts/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "custom-fonts",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "wxt",
+    "dev:firefox": "wxt -b firefox",
+    "build": "wxt build",
+    "build:firefox": "wxt build -b firefox",
+    "zip": "wxt zip",
+    "zip:firefox": "wxt zip -b firefox",
+    "compile": "tsc --noEmit",
+    "postinstall": "wxt prepare"
+  },
+  "devDependencies": {
+    "typescript": "^5.8.2",
+    "wxt": "^0.20.7"
+  }
+}

examples/custom-fonts/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.wxt/tsconfig.json"
+}

examples/custom-fonts/wxt.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from "wxt";
+
+// See https://wxt.dev/api/config.html
+export default defineConfig({
+  manifest: {
+    web_accessible_resources: [
+      {
+        resources: ["fonts/*"],
+        matches: ["*://*/*"],
+      },
+    ],
+  },
+  webExt: {
+    startUrls: ["https://wxt.dev"],
+  },
+});