Skip to content

Commit 1dbd426

Browse files
authored
Add REST API custom fonts documentation to supported fonts page (#26297)
1 parent 8e9dd7c commit 1dbd426

File tree

1 file changed

+42
-0
lines changed

1 file changed

+42
-0
lines changed

src/content/docs/browser-rendering/reference/supported-fonts.mdx

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,8 @@ Browser Rendering includes additional font packages for non-Latin scripts and em
6969

7070
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.
7171

72+
### Workers binding
73+
7274
<Tabs> <TabItem label="JavaScript" icon="seti:javascript">
7375
Example with [Puppeteer](/browser-rendering/platform/puppeteer/) and a CDN source:
7476

@@ -161,3 +163,43 @@ await page.addStyleTag({
161163
```
162164

163165
</TabItem> </Tabs>
166+
167+
### REST API
168+
169+
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.
170+
171+
Example with a CDN-hosted font:
172+
173+
```bash
174+
curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/screenshot' \
175+
-H 'Authorization: Bearer <apiToken>' \
176+
-H 'Content-Type: application/json' \
177+
-d '{
178+
"url": "https://example.com/",
179+
"addStyleTag": [
180+
{
181+
"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; }"
182+
}
183+
]
184+
}' \
185+
--output "screenshot.png"
186+
```
187+
188+
Example with a Base64-encoded font:
189+
190+
```bash
191+
curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/screenshot' \
192+
-H 'Authorization: Bearer <apiToken>' \
193+
-H 'Content-Type: application/json' \
194+
-d '{
195+
"url": "https://example.com/",
196+
"addStyleTag": [
197+
{
198+
"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; }"
199+
}
200+
]
201+
}' \
202+
--output "screenshot.png"
203+
```
204+
205+
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).

0 commit comments

Comments
 (0)