Next.js Discord

Discord Forum

Custom fonts with next/og and next/font/google

Answered
Wuchang bream posted this in #help-forum
Open in Discord
Wuchang breamOP
Hi, I'm working with next/og, next/font/google and tailwindcss experimental implementation, however font.className is not being applied to the text when imported to the route.ts

Here's the playground for the tailwindcss implementation:
https://og-playground.vercel.app/

Here's my font configuration:

import {Poppins} from 'next/font/google'

export const poppins = Poppins({
subsets: ['latin'],
weight: '400',
variable: '--font-poppins',
})

9 Replies

Wuchang breamOP
@joulev can you please share a working demo, I can't seem to get it to work
doesn't seem to be that straight forward
Wuchang breamOP
@joulev the given example is using a local font, is there a way to achieve this using Fetch API as shown here?
https://nextjs-forum.com/post/1216869452180885544#message-1217666940777267331
Thank you for the follow up though 🙂
Answer
Essentially you just fetch the link to the file and get the arraybuffer of the font file binary
Wuchang breamOP
Nailed it, thanks a lot @joulev