INTEGRITY Документация

← Browser Run / browser-run / features

Пользовательские шрифты

Browser Run использует управляемую среду Chromium, которая включает стандартный набор предустановленных шрифтов. При создании скриншота или PDF текст отображается с использованием шрифтов, доступных в этой среде. Если на странице указан шрифт, который не установлен заранее, Chromium автоматически переключится на похожий поддерживаемый шрифт.

Если вам нужен определенный шрифт, который не установлен по умолчанию, вы можете внедрить его на страницу во время рендеринга. Шрифты можно загружать по внешнему URL или встраивать напрямую в виде строки Base64.

Способ добавления пользовательского шрифта зависит от того, как вы используете Browser Run:

Сессии браузера

Используйте addStyleTag чтобы внедрить @font-face правило на страницу перед созданием скриншота или PDF. Вы можете загрузить файл шрифта с CDN URL или встроить его в виде строки, закодированной в Base64.

В примерах ниже используется Puppeteer с Workers Bindings. Если вы подключаетесь через CDP, разница только в способе подключения к браузеру. После подключения page.addStyleTag() работает так же. Подробнее см. Пример подключения через CDP для получения подробностей.

Из URL CDN

Пример с 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();

Быстрые действия

При использовании Быстрые действия, вы можете загрузить пользовательские шрифты, добавив addStyleTag параметр в теле запроса. Это работает как с снимок экрана и PDF конечные точки.

Из URL CDN

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"

Подробнее об использовании addStyleTag с Quick Actions см. Настройка CSS и встраивание пользовательского JavaScript.