> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ogify.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Font Loader

> Using Google Fonts or custom fonts in your templates

OGify handles font loading for you, making it easy to use Google Fonts or custom font files.

## Google Fonts (Zero-Config)

To use a Google Font, specify its name and weight in your template definition. OGify fetches the font file automatically.

```tsx theme={null}
import { defineTemplate } from "@ogify/core";

const template = defineTemplate({
  fonts: [
    { name: "Inter", weight: 400 },
    { name: "Inter", weight: 700 },
    { name: "Roboto Mono", weight: 400, style: "italic" },
  ],
  renderer: ({ params }) => (
    <div tw="flex w-full h-full items-center justify-center font-bold text-[48px]">
      {params.title}
    </div>
  ),
});
```

## Custom Fonts

<Tabs>
  <Tab title="From URL">
    Load a font from any public URL

    ```tsx theme={null}
    import { defineTemplate } from "@ogify/core";

    const template = defineTemplate({
      fonts: [
        {
          name: "MyCustomFont",
          url: "https://example.com/fonts/my-font.woff",
          weight: 600,
        },
      ],
      renderer: ({ params }) => (
        <div tw="flex w-full h-full items-center text-[48px] font-bold">
          {params.title}
        </div>
      ),
    });
    ```
  </Tab>

  <Tab title="From Buffer">
    Use a font file loaded as a buffer (e.g., from filesystem)

    ```tsx theme={null}
    import { defineTemplate } from "@ogify/core";
    import { readFileSync } from "fs";

    const fontData = readFileSync("./fonts/MyFont.ttf");

    const template = defineTemplate({
      fonts: [
        {
          name: "MyLocalFont",
          data: fontData,
          weight: 700,
        },
      ],
      renderer: ({ params }) => (
        <div tw="flex w-full h-full items-center text-[48px] font-bold">
          {params.title}
        </div>
      ),
    });
    ```
  </Tab>
</Tabs>

## Applying Fonts in JSX

Reference the font family in your `tw` classes or `style` prop. The first font in the `fonts` array is used as the default:

```tsx theme={null}
renderer: ({ params }) => (
  <div tw="flex flex-col w-full h-full p-16">
    <div tw="text-[64px] font-bold">{params.title}</div>
    <div tw="text-[28px] font-normal opacity-80">{params.subtitle}</div>
  </div>
);
```

<Tip>
  Remote fonts (from Google Fonts or custom URLs) are automatically cached by
  the renderer's cache system to avoid repeated network requests and improve
  performance.
</Tip>