INTEGRITY Dokumentace

← Browser Run / browser-run / features

Vlastní písma

Browser Run využívá spravované prostředí Chromium, které obsahuje standardní sada předinstalovaných písem. Při generování snímku obrazovky nebo PDF se text vykresluje pomocí písem dostupných v tomto prostředí. Pokud stránka požaduje písmo, které není předinstalované, Chromium automaticky přepne na podobné podporované písmo.

Pokud potřebujete konkrétní písmo, které není předinstalované, můžete ho do stránky vložit v okamžiku vykreslování. Písma můžete načíst z externí adresy URL nebo je vložit přímo jako řetězec Base64.

Způsob přidání vlastního písma závisí na tom, jak Browser Run používáte:

Relace prohlížeče

Použijte addStyleTag k vložení @font-face pravidlo do stránky před pořízením snímku obrazovky nebo PDF. Soubor s písmem můžete načíst z CDN URL adresy nebo jej vložit jako řetězec zakódovaný v Base64.

Následující příklady používají Puppeteer hodnotou Workers Bindings. Pokud se připojujete přes CDP, jediný rozdíl je ve způsobu připojení k prohlížeči. Po připojení page.addStyleTag() funguje stejným způsobem. Další informace najdete v Příklad připojení CDP s podrobnostmi.

Z CDN URL adresy

Příklad s Puppeteer a zdroj 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;
    }
  `,
});

Příklad s Puppeteer a zdroj 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;
    }
  `,
});

Kódováno v Base64

Následující příklady používají Playwright, ale tato metoda funguje stejně i s Puppeteer.

Příklad se zdrojem dat kódovaným 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;
    }
  `,
});

Příklad se zdrojem dat kódovaným 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;
    }
  `,
});

Příklad připojení CDP

Při připojování přes CDP, se k prohlížeči připojujete pomocí koncového bodu WebSocket namísto Workers Binding. Po připojení použijete page.addStyleTag() stejným způsobem jako v předchozích příkladech.

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();

Rychlé akce

Při použití Rychlé akce, můžete načíst vlastní písma zahrnutím addStyleTag parametr v těle požadavku. Funguje to jak s snímek obrazovky a PDF koncové body.

Z CDN URL adresy

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"

Kódováno v 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"

Podrobnosti o používání addStyleTag s Quick Actions najdete v Přizpůsobte CSS a vložte vlastní JavaScript.