自定义字体

Browser Run 使用托管 Chromium 环境，其中包含标准预装字体集。生成屏幕截图或 PDF 时，文本使用此环境中可用的字体渲染。如果页面指定了未预装的字体，Chromium 将自动回退到类似的受支持字体。

如果你需要未预装的特定字体，可以在渲染时将字体注入页面。你可以从外部 URL 加载字体，或直接将字体嵌入为 Base64 字符串。

如何添加自定义字体取决于你使用 Browser Run 的方式：

如果你使用 Puppeteer、Playwright 或 CDP，请参阅浏览器会话部分。
如果你使用 Quick Actions，请参阅 Quick Actions 部分。

浏览器会话

使用 addStyleTag 在捕获屏幕截图或 PDF 之前向页面注入 @font-face 规则。你可以从 CDN URL 加载字体文件，或将其嵌入为 Base64 编码字符串。

以下示例使用 Puppeteer 与 Workers 绑定。如果你通过 CDP 连接，唯一区别是连接浏览器的方式。连接后，page.addStyleTag() 的工作方式相同。详情请参阅 CDP 连接示例。

从 CDN URL 加载

使用 Puppeteer 和 CDN 源的示例：

const browser = await puppeteer.launch(env.MYBROWSER);
const page = await browser.newPage();
await page.addStyleTag({
	content: `
    @font-face {
      font-family: 'CustomFont';
      src: url('https://your-cdn.com/fonts/MyFont.woff2') format('woff2');
      font-weight: normal;
      font-style: normal;
    }

    body {
      font-family: 'CustomFont', sans-serif;
    }
  `,
});

使用 Puppeteer 和 CDN 源的示例：

const browser = await puppeteer.launch(env.MYBROWSER);
const page = await browser.newPage();
await page.addStyleTag({
	content: `
    @font-face {
      font-family: 'CustomFont';
      src: url('https://your-cdn.com/fonts/MyFont.woff2') format('woff2');
      font-weight: normal;
      font-style: normal;
    }

    body {
      font-family: 'CustomFont', sans-serif;
    }
  `,
});

Base64 编码

以下示例使用 Playwright，但此方法与 Puppeteer 的工作方式相同。

使用 Base64 编码数据源的示例：

const browser = await playwright.launch(env.MYBROWSER);
const page = await browser.newPage();
await page.addStyleTag({
	content: `
    @font-face {
      font-family: 'CustomFont';
      src: url('data:font/woff2;base64,<BASE64_STRING>') format('woff2');
      font-weight: normal;
      font-style: normal;
    }

    body {
      font-family: 'CustomFont', sans-serif;
    }
  `,
});

使用 Base64 编码数据源的示例：

const browser = await playwright.launch(env.MYBROWSER);
const page = await browser.newPage();
await page.addStyleTag({
	content: `
    @font-face {
      font-family: 'CustomFont';
      src: url('data:font/woff2;base64,<BASE64_STRING>') format('woff2');
      font-weight: normal;
      font-style: normal;
    }

    body {
      font-family: 'CustomFont', sans-serif;
    }
  `,
});

CDP 连接示例

通过 CDP 连接时，你使用 WebSocket 端点而非 Workers 绑定连接浏览器。连接后，使用 page.addStyleTag() 的方式与上述示例相同。

import puppeteer from "puppeteer-core";

const ACCOUNT_ID = "your-account-id";
const API_TOKEN = "your-api-token";

// Create a browser session via CDP
const response = await fetch(
	`https://api.cloudflare.com/client/v4/accounts/${ACCOUNT_ID}/browser-rendering/devtools/browser`,
	{
		method: "POST",
		headers: { Authorization: `Bearer ${API_TOKEN}` },
	},
);
const { webSocketDebuggerUrl } = await response.json();

// Connect Puppeteer to the session
const browser = await puppeteer.connect({
	browserWSEndpoint: webSocketDebuggerUrl,
	headers: { Authorization: `Bearer ${API_TOKEN}` },
});

const page = await browser.newPage();

// Add a custom font — same as with Workers Bindings
await page.addStyleTag({
	content: `
    @font-face {
      font-family: 'CustomFont';
      src: url('https://your-cdn.com/fonts/MyFont.woff2') format('woff2');
      font-weight: normal;
      font-style: normal;
    }

    body {
      font-family: 'CustomFont', sans-serif;
    }
  `,
});

// Take a screenshot, generate a PDF, etc.
await page.goto("https://example.com");

browser.disconnect();

Quick Actions

使用 Quick Actions 时，可以在请求体中包含 addStyleTag 参数来加载自定义字体。这适用于屏幕截图和 PDF 端点。

从 CDN URL 加载

curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/screenshot' \
  -H 'Authorization: Bearer <apiToken>' \
  -H 'Content-Type: application/json' \
  -d '{
    "url": "https://example.com/",
    "addStyleTag": [
      {
        "content": "@font-face { font-family: '\''CustomFont'\''; src: url('\''https://your-cdn.com/fonts/MyFont.woff2'\'') format('\''woff2'\''); font-weight: normal; font-style: normal; } body { font-family: '\''CustomFont'\'', sans-serif; }"
      }
    ]
  }' \
  --output "screenshot.png"

Base64 编码

curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/screenshot' \
  -H 'Authorization: Bearer <apiToken>' \
  -H 'Content-Type: application/json' \
  -d '{
    "url": "https://example.com/",
    "addStyleTag": [
      {
        "content": "@font-face { font-family: '\''CustomFont'\''; src: url('\''data:font/woff2;base64,<BASE64_STRING>'\'') format('\''woff2'\''); font-weight: normal; font-style: normal; } body { font-family: '\''CustomFont'\'', sans-serif; }"
      }
    ]
  }' \
  --output "screenshot.png"

有关在 Quick Actions 中使用 addStyleTag 的更多详情，请参阅自定义 CSS 并嵌入自定义 JavaScript。