README

A beautiful Google Fonts picker component for Filament forms with real-time font previews, search functionality, and category filtering.

Features

• ???? Search Google Fonts: Find fonts quickly with intelligent search
• ????️ Category Filtering: Filter by serif, sans-serif, monospace, display, and handwriting fonts
• ???? Live Previews: See font previews as you browse
• ⚡ Performance Optimized: Fonts load only when needed with intersection observer
• ???? Dark Mode Support: Seamless integration with Filament's dark mode
• ???? Mobile Friendly: Responsive design that works on all devices
• ♿ Accessibility First: Full keyboard navigation and screen reader support

Installation

You can install the package via composer:

composer require charlieetienne/filament-font-picker

Important

If you have not set up a custom theme and are using Filament Panels follow the instructions in the Filament Docs first.

After setting up a custom theme add the plugin's views to your theme css file or your app's css file if using the standalone packages.

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

Usage

Use the FontPicker component in your Filament forms:

use CharlieEtienne\FilamentFontPicker\FontPicker; FontPicker::make('font') ->label('Choose Font')

Options

You can control which font categories are available and which are preselected:

Available Categories

Limit which categories are shown (restricts the available options):

FontPicker::make('font') ->availableCategories([ 'serif', 'sans-serif', 'monospace', 'display', 'handwriting', ])

Selected Categories

Preselect certain categories when the component loads (users can still change them):

FontPicker::make('font') ->selectedCategories([ 'monospace', 'handwriting', ])

Other options

You can customize all these options:

FontPicker::make('font') ->placeholder('Select a font') ->searchPrompt('Search fonts') ->previewText('The quick brown fox jumps over the lazy dog') ->noResultsTitle('No fonts found matching') ->noResultsSubtitle('Try searching for serif, sans-serif, monospace, or display fonts') ->loadingMessage('Loading Google Fonts...') ->loadingPreviewMessage('Loading preview...')

Updating the Google Fonts list

The package includes a built-in Google Fonts dataset that works out of the box.

However, if you want to update the fonts data or need the latest fonts from Google, you'll need to configure a Google Fonts API key.

1. Get a Google Fonts API key from the Google Cloud Console
2. Add your API key to your .env file:

   GOOGLE_FONTS_API_KEY=your_api_key_here

3. Update the Google Fonts data with the latest fonts from Google's API:

   php artisan filament-font-picker:update-fonts

   This command will fetch the latest fonts from Google and update the list of available fonts.

Requirements

• PHP 8.2+
• Filament 4.0+
• Laravel 11.0+

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

The MIT License (MIT). Please see License File for more information.

Credits

• Built for Filament
• Fonts provided by Google Fonts
• Created by Charlie Etienne
• Inspired by Filament Studio's font picker by Dennis Koch