[Browser Rendering] Custom font usage example

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

@@ -4,8 +4,9 @@ title: Supported fonts
 sidebar:
   order: 3
 ---
+import { Tabs, TabItem } from "~/components";
 
-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. 
+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, reach out to us on [Cloudflare Discord](https://discord.cloudflare.com/).
 
@@ -21,41 +22,138 @@ The following generic CSS font families are supported:
 
 ## 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  
+- 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  
+- 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) 
+- 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)
+
+## Using custom fonts
+
+Should you need to use an unsupported custom font, make sure it is loaded on your website, if you own it, or add the font using `addStyleTag`.
+
+<Tabs> <TabItem label="JavaScript" icon="seti:javascript">
+With a CDN source:
+
+```js
+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;
+    }
+  `
+});
+```
+
+</TabItem> <TabItem label="TypeScript" icon="seti:typescript">
+With a CDN source:
+
+```ts
+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;
+    }
+  `
+});
+```
+
+</TabItem> </Tabs>
+
+
+<Tabs> <TabItem label="JavaScript" icon="seti:javascript">
+With a Base64 encoded data source:
+
+```js
+const browser = await puppeteer.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;
+    }
+  `
+});
+```
+
+</TabItem> <TabItem label="TypeScript" icon="seti:typescript">
+With a Base64 encoded data source:
+
+```ts
+const browser = await puppeteer.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;
+    }
+  `
+});
+```
+
+</TabItem> </Tabs>