カスタムフォント

Browser Run は、標準のプリインストールフォント一式を含むマネージドな Chromium 環境を使います。スクリーンショットや PDF を生成するとき、テキストはこの環境で使えるフォントで描画されます。ページがプリインストールされていないフォントを指定している場合、Chromium は自動的に近い対応フォントへフォールバックします。

プリインストールされていない特定のフォントが必要な場合は、レンダリング時にページへ注入できます。フォントは外部 URL から読み込むか、Base64 文字列として直接埋め込めます。

カスタムフォントの追加方法は、Browser Run の使い方によって異なります。

Puppeteer、Playwright、または CDP を使っている場合は、ブラウザーセッションを参照してください。
Quick Actions を使っている場合は、Quick Actions を参照してください。

ブラウザーセッション

スクリーンショットや PDF を取得する前に、addStyleTag で @font-face ルールをページへ注入します。フォントファイルは CDN の URL から読み込むか、Base64 エンコードした文字列として埋め込めます。

次の例は、Workers Bindings と Puppeteer を使っています。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 経由で接続する場合、Workers Binding ではなく WebSocket エンドポイントでブラウザーに接続します。接続後は、上の例と同じように 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 パラメーターを含めてカスタムフォントを読み込めます。screenshot と 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 の埋め込みを参照してください。