diff --git a/src/content/docs/browser-rendering/reference/supported-fonts.mdx b/src/content/docs/browser-rendering/reference/supported-fonts.mdx index 2253aba4a31316a..0f9ca6de8515ae1 100644 --- a/src/content/docs/browser-rendering/reference/supported-fonts.mdx +++ b/src/content/docs/browser-rendering/reference/supported-fonts.mdx @@ -69,6 +69,8 @@ Browser Rendering includes additional font packages for non-Latin scripts and em 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](/browser-rendering/platform/puppeteer/) and a CDN source: @@ -161,3 +163,43 @@ await page.addStyleTag({ ``` + +### REST API + +When using the [REST API](/browser-rendering/rest-api/), you can load custom fonts by including the `addStyleTag` parameter in your request body. This works with both the [screenshot](/browser-rendering/rest-api/screenshot-endpoint/) and [PDF](/browser-rendering/rest-api/pdf-endpoint/) endpoints. + +Example with a CDN-hosted font: + +```bash +curl -X POST 'https://api.cloudflare.com/client/v4/accounts//browser-rendering/screenshot' \ + -H 'Authorization: Bearer ' \ + -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: + +```bash +curl -X POST 'https://api.cloudflare.com/client/v4/accounts//browser-rendering/screenshot' \ + -H 'Authorization: Bearer ' \ + -H 'Content-Type: application/json' \ + -d '{ + "url": "https://example.com/", + "addStyleTag": [ + { + "content": "@font-face { font-family: '\''CustomFont'\''; src: url('\''data:font/woff2;base64,'\'') 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](/browser-rendering/rest-api/screenshot-endpoint/#customize-css-and-embed-custom-javascript).