Custom fonts

Browser Rendering uses a managed Chromium environment that includes a standard set of pre-installed fonts. When you generate a screenshot or PDF, text is rendered using the fonts available in this environment. If your page specifies a font that is not pre-installed, Chromium will automatically fall back to a similar supported font.

If you need a specific font that is not pre-installed, you can inject it into the page at render time. You can load fonts from an external URL or embed them directly as a Base64 string.

How you add a custom font depends on how you are using Browser Rendering:

If you are using Workers Bindings with Puppeteer or Playwright, refer to the Workers Bindings section.
If you are using the REST API, refer to the REST API section.

Workers Bindings

Use addStyleTag to inject a @font-face rule into the page before capturing your screenshot or PDF. You can load the font file from a CDN URL or embed it as a Base64-encoded string.

Example with Puppeteer and a CDN source:

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;
    }
  `
});

Example with Puppeteer and a CDN source:

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-encoded

The following examples use Playwright, but this method works the same way with Puppeteer.

JavaScript
TypeScript

Example with a Base64-encoded data source:

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;
    }
  `
});

Example with a Base64-encoded data source:

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;
    }
  `
});

REST API

When using the REST API, you can load custom fonts by including the addStyleTag parameter in your request body. This works with both the screenshot and PDF endpoints.

From a 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-encoded

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"

For more details on using addStyleTag with the REST API, refer to Customize CSS and embed custom JavaScript.