search

emilkowalski / vaul

A drawer component for React.
https://vaul.emilkowal.ski
MIT License
6.02k stars 203 forks source link

Drawer content not recognizing custom font #275

Closed RahulBirCodes closed 7 months ago

RahulBirCodes commented 7 months ago

The drawer is not able to recognize the local fonts I set up. Within my nextjs project, I setup local fonts using this article from the nextjs documentation. However, the vaul drawer isn't able to recognize the --font-sans and --font-mono css vars and all the text within the drawer is being rendered in Times. Any help is appreciated!

emilkowalski commented 7 months ago

Vaul doesn't set any font related styles, this is likely a bug in your setup.

NightWanderer2004 commented 3 months ago

I have the same issue... it's not a bug in my setup.

I'm using shadcn's Drawer, they wrapped it in custom blocks, so I just added a line with my font into a className:

const DrawerContent = React.forwardRef(...) => (
   <DrawerPortal>
      <DrawerOverlay />
      <DrawerPrimitive.Content
         ref={ref}
         className={cn(
            'font-e-ukraine <-- HERE ...',
            className
         )}
         {...props}
      >
         ...
      </DrawerPrimitive.Content>
   </DrawerPortal>
))