Closed iljapanic closed 1 year ago
Sorry I don't know react
@iljapanic, can you try the following solution?
function MyApp({ Component, pageProps }) {
return (
<>
<style jsx global>{`
:root {
--font-cmu-serif: ${CMUSerif.variable};
--font-hk-grotesk: ${HKGrotesk.variable}
}
`}
</style>
<PlausibleProvider
>
<main className={`${CMUSerif.variable} ${HKGrotesk.variable} font-sans`}>
<Component {...pageProps} />
</main>
</PlausibleProvider>
</>
)
}
Thank you @buraksakalli, this workaround seems to have resolved the issue for me! 🙌
It seems like a clean solution as well, so I'm closing this issue.
@buraksakalli Is this still a valid solution ?
I am using NextJS 13 with src directory and tailwind. But, even after setting up the style for global via :root
, the default font is applied across the whole website except Dialog component
. Any help ?
Yup having the exact same issue
ended up making my own component, you can check it out at:
https://gist.github.com/moinbukhari/cce67d0e0b9ff3dfc3ab1093a0e771bb
That's amazing. But I am worried that it might happen for every other component. I ended up changing the project to App router. Apparently this problem exists only on pages router as the pages are rendered differently.
I still had issues with the proposed solution. What ended up working was to also add the font variable to the <body/>
tag in document.tsx
What was happenning for some elements was that they where outside of <main/>
, where I was adding the variable.
I still had issues with the proposed solution. What ended up working was to also add the font variable to the
<body/>
tag in document.tsxWhat was happenning for some elements was that they where outside of
<main/>
, where I was adding the variable.
hi, Thanks for sharing this. this worked out for me as well. but Didn't get it. I had added the font in the _app.js inside which the whole app is wrapped.
I still had issues with the proposed solution. What ended up working was to also add the font variable to the
<body/>
tag in document.tsxWhat was happenning for some elements was that they where outside of
<main/>
, where I was adding the variable.
Thak you, @Eyon42 , I able to find out the problem through this it
I have applied the font family individually in all popover components.
Here is an example. //sheet.tsx
import { Open_Sans } from 'next/font/google'
const openSans = Open_Sans({
subsets: ['latin'],
variable: '--font-sans'
})
const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Content>, SheetContentProps>(
({ side = 'right', className, children, ...props }, ref) => (
<SheetPortal>
<SheetOverlay />
<SheetPrimitive.Content
ref={ref}
className={cn(sheetVariants({ side }), openSans?.variable, 'font-sans', className)}
{...props}
>
{children}
<SheetPrimitive.Close className="absolute left-4 sm:left-7 top-[20px] sm:top-[39px] rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 disabled:pointer-events-none ">
<div className="hidden sm:block">
<CloseIcon fill="#333333" />
</div>
<div className="block sm:hidden">
<CloseIcon fill="#333333" width={11.35} height={11.35} />
</div>
</SheetPrimitive.Close>
</SheetPrimitive.Content>
</SheetPortal>
)
)
SheetContent.displayName = SheetPrimitive.Content.displayName
Another important caveat is that fonts in _document.tsx are not accounted for the bundle in Next.js. So you will also need to use the fonts in _app or in the pages for it to be bundled at build.
I had multiple fonts so i ended up adding empty spans referencing the fonts i needed at _app.tsx
I still had issues with the proposed solution. What ended up working was to also add the font variable to the
<body/>
tag in document.tsx What was happenning for some elements was that they where outside of<main/>
, where I was adding the variable.Thak you, @Eyon42 , I able to find out the problem through this it
I have applied the font family individually in all popover components.
Here is an example. //sheet.tsx
import { Open_Sans } from 'next/font/google' const openSans = Open_Sans({ subsets: ['latin'], variable: '--font-sans' }) const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Content>, SheetContentProps>( ({ side = 'right', className, children, ...props }, ref) => ( <SheetPortal> <SheetOverlay /> <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), openSans?.variable, 'font-sans', className)} {...props} > {children} <SheetPrimitive.Close className="absolute left-4 sm:left-7 top-[20px] sm:top-[39px] rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 disabled:pointer-events-none "> <div className="hidden sm:block"> <CloseIcon fill="#333333" /> </div> <div className="block sm:hidden"> <CloseIcon fill="#333333" width={11.35} height={11.35} /> </div> </SheetPrimitive.Close> </SheetPrimitive.Content> </SheetPortal> ) ) SheetContent.displayName = SheetPrimitive.Content.displayName
Thanks @sunilkalikayi and @Eyon42 , I was using Dialog component in Next.js pages dir, and it was not applying fonts to the dialog component but this solution worked for me.
I am using the
Popover.tsx
component, and while the behavior and Tailwind styling are functioning correctly, I am experiencing difficulties applying local fonts to the component. Despite adding thefont-sans
class to all classNames within the Popover component and its child components, the utility class does not seem to affect any content insidePopoverContent
.PopoverTrigger
applies the custom font-family without any issues.Please find the relevant code snippets below.
Popover.tsx
Component usage (redacted for clarity):
Here is the rendered result:
Here is my
_app.js
where the local fonts are loaded (redacted for clarity):Any help or tips are appreciated 🙌