# Using a custom font in your OG Image

**Author:** DX Team

---

You can use the following code sample to explore using parameters and different content types with [`next/og`](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image#generate-images-using-code-js-ts-tsx). To learn more about OG Image Generation, see [Open Graph Image Generation](https://vercel.com/docs/og-image-generation).

Create an API route handler:

``import { ImageResponse } from 'next/og'; // App router includes @vercel/og. // No need to install it. async function loadGoogleFont (font: string, text: string) { const url = `https://fonts.googleapis.com/css2?family=${font}&text=${encodeURIComponent(text)}` const css = await (await fetch(url)).text() const resource = css.match(/src: url\((.+)\) format\('(opentype|truetype)'\)/) if (resource) { const response = await fetch(resource[1]) if (response.status == 200) { return await response.arrayBuffer() } } throw new Error('failed to load font data') } export async function GET() { const text = 'Hello world!' return new ImageResponse( ( <div style={{ backgroundColor: 'white', height: '100%', width: '100%', fontSize: 100, fontFamily: 'Geist', paddingTop: '100px', paddingLeft: '50px', }} > {text} </div> ), { width: 1200, height: 630, fonts: [ { name: 'Geist', data: await loadGoogleFont('Geist', text), style: 'normal', }, ], }, ); }`` ``import { ImageResponse } from 'next/og'; // App router includes @vercel/og. // No need to install it. async function loadGoogleFont(font, text) { const url = `https://fonts.googleapis.com/css2?family=${font}&text=${encodeURIComponent(text)}`; const css = await (await fetch(url)).text(); const resource = css.match( /src: url\((.+)\) format\('(opentype|truetype)'\)/, ); if (resource) { const response = await fetch(resource[1]); if (response.status == 200) { return await response.arrayBuffer(); } } throw new Error('failed to load font data'); } export async function GET() { const text = 'Hello world!'; return new ImageResponse( ( <div style={{ backgroundColor: 'white', height: '100%', width: '100%', fontSize: 100, fontFamily: 'Geist', paddingTop: '100px', paddingLeft: '50px', }} > {text} </div> ), { width: 1200, height: 630, fonts: [ { name: 'Geist', data: await loadGoogleFont('Geist', text), style: 'normal', }, ], }, ); }`` > If you're not using a framework, you must either add `"type": "module"` to your `package.json` or change your JavaScript Functions' file extensions from `.js` to `.mjs` Preview the OG route locally by running the following command: `pnpm dev` Then, browse to `http://localhost:3000/api/og`. You will see the following image: ## More resources - [Consume the OG route](/docs/og-image-generation#consume-the-og-route)
  
- [Getting started with OG image](/docs/og-image-generation#usage)

---

[View full KB sitemap](/kb/sitemap.md)