Skip to content
Cloudflare Docs

Supported fonts

Browser Rendering uses a managed Chromium environment that includes a standard set of fonts. When you generate a screenshot or PDF, text is rendered using the fonts available in this environment.

If your webpage specifies a font that is not supported yet, Chromium will automatically fall back to a similar supported font. If you would like to use a font that is not currently supported, you can add a custom font.

Pre-installed fonts

The following sections list the fonts available in the Browser Rendering environment.

Generic CSS font family support

The following generic CSS font families are supported:

  • serif
  • sans-serif
  • monospace
  • cursive
  • fantasy

Common system fonts

  • Andale Mono
  • Arial
  • Arial Black
  • Comic Sans MS
  • Courier
  • Courier New
  • Georgia
  • Helvetica
  • Impact
  • Lucida Handwriting
  • Times
  • Times New Roman
  • Trebuchet MS
  • Verdana
  • Webdings

Open source and extended fonts

  • Bitstream Vera (Serif, Sans, Mono)
  • Cyberbit
  • DejaVu (Serif, Sans, Mono)
  • FreeFont (FreeSerif, FreeSans, FreeMono)
  • GFS Neohellenic
  • Liberation (Serif, Sans, Mono)
  • Open Sans
  • Roboto

International fonts

Browser Rendering includes additional font packages for non-Latin scripts and emoji:

  • IPAfont Gothic (Japanese)
  • Indic fonts (Devanagari, Bengali, Tamil, and others)
  • KACST fonts (Arabic)
  • Noto CJK (Chinese, Japanese, Korean)
  • Noto Color Emoji
  • TLWG Thai fonts
  • WenQuanYi Zen Hei (Chinese)

Use your own custom font

If a required font is not pre-installed, you can inject it into the page at render time using addStyleTag. This allows you to load fonts from an external URL or embed them directly as a Base64 string.

Workers binding

Example with Puppeteer and a CDN source:

JavaScript
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 Playwright and a Base64 encoded data source:

JavaScript
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.

Example with a CDN-hosted font:

Terminal window
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"

Example with a Base64-encoded font:

Terminal window
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.