How can i change the font of text in the toast??

[Hamza]

[Salief Lewis]

I personally had issues where the Toast component I dropped into the RootLayout of my app was not adhering to the tailwind classes I was supplying to it. Went ahead and created my own component and rendered it with toast.custom()

export function Toast({ children }: ToastProps) {
  return (
    <Flex className="bg-background border-[0.5px] px-4 py-2">
      <Typography className="font-mono">{children}</Typography>
    </Flex>
  )
}

[Emil Kowalski]

This has been updated and should be much easier now, see https://sonner.emilkowal.ski/styling.