using ->font() on Panel, is not changed Custom Pages
Im following the documentation and added ->font('poppins') to the PanelProvider. Seems my Resources are changing the font but a Custom Page with Livewire components isnt.
And the navigation menu font is not changed aswell (in the route with the custom page)
Am i missing something ?
Thanks
25 Replies
How did you create the custom page can you share more details
Try it with a capital P 'Poppins’. It’s should the actual name of the font as you would use it in a stylesheet.
i used Poppins. it was a typo
it was a typo at my post, but the problem persists
are you using a custom page in the panel builder?
Yes
this works on my end. What about your custom page? What is the content?
Im using a livewire component with filament forms.
When i Access this page, the navigation menu also lose the Poppins font
could you share a screenshot?
Yes. Im at phone ATM but on some minutes i can provide the SS
are you using spa mode?
I dont think so.
Its my first project with filament. Im testing some stuff but the goal is build a bit project with F3.
I read something about SPA but Im not using it
Yeah not using ->spa()
another font
->font('merriweather')
even the navigation changes
when i access the "dashboard"
my dashboard is a custom page
@vite('resources/css/app.css')
<x-filament-panels::page>
<x-filament-panels::form>
<livewire:module:client-login-wizard/>
</x-filament-panels::form>
</x-filament-panels::page>
this is my main-dashboard.blade.php
hum.. i removed @vite and its working
wtf 😄
dunno why i added that @vite there but.. did the job 😄
are you using a custom theme?
no.. but i will in the future
i pretend to have customization for each company/client
i already tested the themes but im struggling with the panel customization.. i will delay that. not really important atm 😄
thanks 🙂
ah.... i remember now.. i'm using @vite because i cant use tailwind classes without it
im trying to use grid/columns... but without @vite, they are not available
and another thing that is wierd:
navigation lost Poppins
livewire with filament forms/wizard lost Poppins
filament tabs lost Poppins
but the grid test im doing here, have Poppins.
eheh... wierd 😄
did you add this livewire component to the tailwind content array?
'./modules/*/.blade.php',
im using the laravel-modules
i did the build and the optimize
but seems im doing something wrong
@vite('resources/css/app.css')
<x-filament-panels::page>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
<div class="">
<x-filament-panels::form>
<livewire:module:client-login-wizard/>
</x-filament-panels::form>
</div>
<div class="">
<x-filament::tabs label="Content tabs">
<x-filament::tabs.item active>
Tab 1
</x-filament::tabs.item>
<x-filament::tabs.item disabled> Tab 2 </x-filament::tabs.item>
<x-filament::tabs.item disabled> Tab 3 </x-filament::tabs.item> </x-filament::tabs> </div> </div> <div class="grid grid-cols-12 gap-4"> <div class="col-span-12 sm:col-span-12 md:col-span-3 lg:col-span-3 xl:col-span-3 2xl:col-span-3">Column</div> <div class="col-span-12 sm:col-span-12 md:col-span-3 lg:col-span-3 xl:col-span-3 2xl:col-span-3">Column</div> <div class="col-span-12 sm:col-span-12 md:col-span-3 lg:col-span-3 xl:col-span-3 2xl:col-span-3">Column</div> </div> <div class="grid grid-cols-3 gap-4"> <div class="...">01</div> <div class="...">02</div> <div class="...">03</div> <div class="col-span-2 ...">04</div> <div class="...">05</div> <div class="...">06</div> <div class="col-span-2 ...">07</div> </div>
</x-filament-panels::page> this is not applying to livewire and to filament tabs aswell
<x-filament::tabs.item disabled> Tab 2 </x-filament::tabs.item>
<x-filament::tabs.item disabled> Tab 3 </x-filament::tabs.item> </x-filament::tabs> </div> </div> <div class="grid grid-cols-12 gap-4"> <div class="col-span-12 sm:col-span-12 md:col-span-3 lg:col-span-3 xl:col-span-3 2xl:col-span-3">Column</div> <div class="col-span-12 sm:col-span-12 md:col-span-3 lg:col-span-3 xl:col-span-3 2xl:col-span-3">Column</div> <div class="col-span-12 sm:col-span-12 md:col-span-3 lg:col-span-3 xl:col-span-3 2xl:col-span-3">Column</div> </div> <div class="grid grid-cols-3 gap-4"> <div class="...">01</div> <div class="...">02</div> <div class="...">03</div> <div class="col-span-2 ...">04</div> <div class="...">05</div> <div class="...">06</div> <div class="col-span-2 ...">07</div> </div>
</x-filament-panels::page> this is not applying to livewire and to filament tabs aswell
check your
content configuration in tailwind.config.js to also scan for classes inside your custom directory..And then i could remove the @vite, right?
yes, you should do this