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

11 messages · Page 1 of 1 (latest)

pure sinew
#

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',
})

rugged helmBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

olive parcel
pure sinew
#

@olive parcel can you please share a working demo, I can't seem to get it to work

#

doesn't seem to be that straight forward

olive parcel
pure sinew
#

@olive parcel the given example is using a local font, is there a way to achieve this using Fetch API as shown here?
#1216869452180885544 message

#

Thank you for the follow up though 🙂

olive parcel
#

Essentially you just fetch the link to the file and get the arraybuffer of the font file binary

pure sinew
#

Nailed it, thanks a lot @olive parcel