[SDK] Google Fonts

In your handlers, you can use the loadGoogleFontAllVariants or loadGoogleFont functions to load Google Fonts.

The second function allows you to specify the font weights you want to load, instead of loading all available weights.

If you want to pass more than 1 font family to satori simply create an array of all the fonts, like this fonts: [...roboto, ...openSans].

Example (from the Poll Template)

'use server'
import { dimensionsForRatio } from '@/lib/constants'
import { loadGoogleFontAllVariants } from '@/lib/fonts'
import { buildFramePage } from '@/lib/sdk'
import { ImageResponse } from '@vercel/og'
import type { Config, State } from '..'
import VoteView from '../views/Vote'

export default async function initial(config: Config, state: State) {
    const roboto = await loadGoogleFontAllVariants('Roboto') // or `loadGoogleFont('Roboto', 400)`

    return {
        ///
		fonts: roboto
    }
}

Using in Views

		<div
			style={{
				display: 'flex',
				justifyContent: 'center',
				alignItems: 'center',
				padding: '30px',
				borderRadius: '10px',
				background: 'rgba(255, 255, 255, 0.22)',
				color: textColor || 'white',
				textAlign: 'center',
				fontFamily: 'Roboto', // ← Just use the Font as you normally would.
				fontWeight: '900',
				lineHeight: '1.4',
				textWrap: 'balance',
			}}
		>
			{question.toUpperCase()}
        </div>