Filament Font Picker Laravel Package

Getting Started

Minimal Setup

1. Install the package:

   composer require charlieetienne/filament-font-picker
   

2. Ensure a custom theme is configured (required for Filament Panels): Follow Filament’s theme setup guide.
3. Add the package’s Blade views to your theme’s CSS file:

   @source '../../../../vendor/charlieetienne/filament-font-picker/resources/**/*.blade.php';
   

4. Register the plugin in your AppServiceProvider:

   use CharlieEtienne\FilamentFontPicker\FilamentFontPickerPlugin;
   
   public function boot(): void
   {
       FilamentFontPickerPlugin::make()
           ->register();
   }
   

First Use Case

Add the component to a Filament form:

use CharlieEtienne\FilamentFontPicker\Components\FontPicker;

FontPicker::make('font_family')
    ->label('Select a Google Font')
    ->required(),

Implementation Patterns

Common Workflows

1. Basic Integration:

   FontPicker::make('primary_font')
       ->label('Primary Font')
       ->default('Roboto') // Optional default
       ->required(),
   

   • Live Preview: Users see real-time previews while browsing.
   • Search: Type to filter fonts dynamically.

2. Category Filtering:

   FontPicker::make('heading_font')
       ->label('Heading Font')
       ->categories(['serif', 'display']) // Restrict to specific categories
       ->searchable(), // Enable search (default: true)
   

3. Standalone Usage (Non-Filament Context):

   • Use the FontPicker component in custom Blade views via @filamentForms directive:

     @filamentForms
     <x-filament-font-picker::font-picker wire:model="fontFamily" />
     

4. Validation & Rules:

   FontPicker::make('body_font')
       ->rules(['required', 'font_family']) // Custom validation rule
       ->helperText('Must be a valid Google Font.'),
   

5. Dynamic Updates:

   • Bind to a model attribute:

     public function form(Form $form): Form
     {
         return $form
             ->schema([
                 FontPicker::make('font')
                     ->live(onBlur: true), // Update on blur
             ]);
     }
     

Integration Tips

• Theme Consistency: Ensure your custom theme’s CSS includes the package’s styles to avoid conflicts.
• Performance: Fonts load lazily via Intersection Observer—ideal for forms with many fields.
• Localization: Supports Filament’s localization system for category labels (e.g., "Serif" → translated text).

Gotchas and Tips

Pitfalls

1. Missing Custom Theme:

   • Error: Class 'FilamentFontPickerPlugin' not found or blank previews.
   • Fix: Always set up a custom theme before using the package.

2. Font Loading Delays:

   • Cause: Google Fonts API rate limits or slow connections.
   • Fix: Preload critical fonts in your app.blade.php:

     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'">
     <noscript><link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"></noscript>
     

3. Dark Mode Glitches:

   • Issue: Previews may not update smoothly in dark mode.
   • Fix: Extend the package’s CSS to override font-color for dark themes:

     .filament-font-picker-preview.dark {
         --font-color: #ffffff;
     }
     

4. Search Not Working:

   • Debug: Check if the searchable() method is called (enabled by default).
   • Fix: Ensure no JavaScript errors block the search input:

     // In a custom JS file
     document.addEventListener('DOMContentLoaded', () => {
         console.log('Font picker search:', document.querySelector('.filament-font-picker-search')?.addEventListener);
     });
     

Debugging

• Inspect Network Requests: Verify Google Fonts API calls (/css2?family=...) are successful.
• Check Console Logs: Look for errors like Uncaught TypeError: fontPicker is not a function.
• Disable Extensions: Conflicts with ad-blockers or dark mode extensions may break previews.

Extension Points

1. Custom Font Sources:

   • Override the default Google Fonts API by publishing the package’s config:

     php artisan vendor:publish --provider="CharlieEtienne\FilamentFontPicker\FilamentFontPickerServiceProvider"
     

   • Modify config/filament-font-picker.php to point to a custom endpoint.

2. Add New Categories:

   • Extend the FontCategory enum in app/Providers/FilamentFontPickerServiceProvider.php:

     use CharlieEtienne\FilamentFontPicker\Enums\FontCategory;
     
     FontCategory::add('custom', 'Custom Category');
     

3. Styling Overrides:

   • Target the package’s classes in your theme’s CSS:

     /* Example: Change preview text */
     .filament-font-picker-preview-text {
         font-size: 2rem;
         color: #3b82f6;
     }
     

4. Keyboard Navigation:

   • Enhance accessibility by binding custom keyboard shortcuts:

     document.addEventListener('filament-font-picker:mounted', (e) => {
         e.detail.element.addEventListener('keydown', (e) => {
             if (e.key === 'ArrowDown') {
                 e.preventDefault();
                 // Custom logic
             }
         });
     });