Custom fonts with next/og and next/font/google
Answered
Wuchang bream posted this in #help-forum
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',
})
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
https://nextjs-forum.com/post/1216869452180885544#message-1217666940777267331
Thank you for the follow up though 🙂
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