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.
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, simply specify its name and weight in your template definition. OGify acts as a proxy to fetch the font file automatically.
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 }) => {
return `<div style="font-family: 'Inter', sans-serif;">${params.title}</div>`;
},
});
Custom Fonts
Load a font from any public URLimport { defineTemplate } from '@ogify/core';
const template = defineTemplate({
fonts: [
{
name: 'MyCustomFont',
url: 'https://example.com/fonts/my-font.woff',
weight: 600
}
],
renderer: ({ params }) => {
return `<div style="font-family: 'MyCustomFont', sans-serif;">${params.title}</div>`;
},
});
Use a font file loaded as a buffer (e.g., from filesystem)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 }) => {
return `<div style="font-family: 'MyLocalFont', sans-serif;">${params.title}</div>`;
},
});
Rendering with Fonts
Once defined, apply the font in your CSS using the font-family property (or rely on the default if it’s the first one).
renderer: ({ params }) => `
<div style="font-family: 'Inter', sans-serif;">
Hello World
</div>
`;
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.
