Reduce overall font size
How do I reduce the overall font size with Filament? It seems overly big, especially in form fields etc.
I have this in my Tailwind config:
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/.blade.php',
'./vendor/laravel/jetstream/**/.blade.php',
'./storage/framework/views/.php',
'./resources/views/**/.blade.php',
],
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
And this in the config:
'google_fonts' => 'https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap',
I also have Jetstream installed. Could the Jetstream styles be overriding the Filament ones?
6 Replies
Large font in table:
I don't think the fonts are overly big. If you use the same Tailwind config Jetstream you could run into issues, otherwise you can overwrite the font sizes in the config.
I also think the default font size is fine... I bring it down occasionally in very crowded tables.
One thing you could try is to override the font-size on the root element:
AFAIK, most Tailwind units are in rem so this should scale all text, padding, margin, etc. evenly.
Right even better. I always think in
em but forgot, that you can change the size at the root level for rem 😅Thanks both.
With your help, I am now able to resolve this by using this type of thing:
table, input, select, .choices__item { font-size: 0.8rem !important; }
(If I don't use !important, then the Jetstream ones don't get applied to).
It feels a bit hacky, but it seems to work. 🤷
I still don't quite understand why Jetstream don't allow publishing of their components anymore.
Yeah,
!important feels yucky but it's pretty much necessary when you're skinning 3rd party components 😄