PHPackages charlieetienne/filament-font-picker - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. charlieetienne/filament-font-picker ActiveLibrary[Utility & Helpers](/categories/utility) charlieetienne/filament-font-picker =================================== A Filament form component for selecting Google Fonts with real-time previews, search functionality, and category filtering. 1.4.0(5mo ago)95.2k↑118.9%2[1 issues](https://github.com/CharlieEtienne/filament-font-picker/issues)MITBladePHP ^8.2 Since Aug 15Pushed 5mo agoCompare [ Source](https://github.com/CharlieEtienne/filament-font-picker)[ Packagist](https://packagist.org/packages/charlieetienne/filament-font-picker)[ Docs](https://github.com/charlieetienne/filament-font-picker)[ GitHub Sponsors](https://github.com/CharlieEtienne)[ GitHub Sponsors](https://github.com/pxlrbt)[ RSS](/packages/charlieetienne-filament-font-picker/feed)WikiDiscussions main Synced 3d ago READMEChangelog (6)Dependencies (5)Versions (7)Used By (0) Filament Font Picker ==================== [](#filament-font-picker) A beautiful Google Fonts picker component for Filament forms with real-time font previews, search functionality, and category filtering. [![filament-font-picker-social-1280x640](https://private-user-images.githubusercontent.com/9772943/478597776-2f4ac6eb-7ddf-4b0c-9eb6-3fd0614e9a4b.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3ODI5Nzg0MjUsIm5iZiI6MTc4Mjk3ODEyNSwicGF0aCI6Ii85NzcyOTQzLzQ3ODU5Nzc3Ni0yZjRhYzZlYi03ZGRmLTRiMGMtOWViNi0zZmQwNjE0ZTlhNGIucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDcwMiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA3MDJUMDc0MjA1WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YWJlNDRiMjhhMDhhOWZhNzE1MTY0ZjBiZjg5MDQ1YzAyMGVjYzI0ZTEwYWNiOTQyODJhN2U2OTMyNGUwY2VlMSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmcmVzcG9uc2UtY29udGVudC10eXBlPWltYWdlJTJGcG5nIn0.W9VMr-rZUTRIhdj5_bh6jndR5Y0ZDwHLX9dVEXz2NOQ)](https://private-user-images.githubusercontent.com/9772943/478597776-2f4ac6eb-7ddf-4b0c-9eb6-3fd0614e9a4b.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3ODI5Nzg0MjUsIm5iZiI6MTc4Mjk3ODEyNSwicGF0aCI6Ii85NzcyOTQzLzQ3ODU5Nzc3Ni0yZjRhYzZlYi03ZGRmLTRiMGMtOWViNi0zZmQwNjE0ZTlhNGIucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDcwMiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA3MDJUMDc0MjA1WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YWJlNDRiMjhhMDhhOWZhNzE1MTY0ZjBiZjg5MDQ1YzAyMGVjYzI0ZTEwYWNiOTQyODJhN2U2OTMyNGUwY2VlMSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmcmVzcG9uc2UtY29udGVudC10eXBlPWltYWdlJTJGcG5nIn0.W9VMr-rZUTRIhdj5_bh6jndR5Y0ZDwHLX9dVEXz2NOQ)Features -------- [](#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 ------------ [](#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](https://filamentphp.com/docs/4.x/styling/overview#creating-a-custom-theme) 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 ----- [](#usage) Use the FontPicker component in your Filament forms: ``` use CharlieEtienne\FilamentFontPicker\FontPicker; FontPicker::make('font') ->label('Choose Font') ``` ### Options [](#options) You can control which font categories are available and which are preselected: #### Available Categories [](#available-categories) Limit which categories are shown (restricts the available options): ``` FontPicker::make('font') ->availableCategories([ 'serif', 'sans-serif', 'monospace', 'display', 'handwriting', ]) ``` #### Selected Categories [](#selected-categories) Preselect certain categories when the component loads (users can still change them): ``` FontPicker::make('font') ->selectedCategories([ 'monospace', 'handwriting', ]) ``` #### Other options [](#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 [](#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](https://developers.google.com/fonts/docs/developer_api#APIKey) 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 ------------ [](#requirements) - PHP 8.2+ - Filament 4.0+ - Laravel 11.0+ Contributing ------------ [](#contributing) Contributions are welcome! Please feel free to submit a Pull Request. License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. Credits ------- [](#credits) - Built for [Filament](https://filamentphp.com) - Fonts provided by [Google Fonts](https://fonts.google.com) - Created by [Charlie Etienne](https://github.com/charlieetienne) - Inspired by [Filament Studio](https://filamentstudio.dev/)'s font picker by [Dennis Koch](https://github.com/sponsors/pxlrbt) ### Health Score 44 — FairBetter than 90% of packages Maintenance69 Regular maintenance activity Popularity32 Limited adoption so far Community7 Small or concentrated contributor base Maturity53 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~31 days Recently: every ~39 days Total 6 Last Release 166d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/9772943?v=4)[Charlie Etienne](/maintainers/CharlieEtienne)[@CharlieEtienne](https://github.com/CharlieEtienne) --- Top Contributors [![CharlieEtienne](https://avatars.githubusercontent.com/u/9772943?v=4)](https://github.com/CharlieEtienne "CharlieEtienne (13 commits)") --- Tags laravelgoogle fontsfilamentform-componentfont-picker ### Code Quality TestsPest ### Embed Badge ![Health badge](/badges/charlieetienne-filament-font-picker/health.svg) ``` [![Health](https://phpackages.com/badges/charlieetienne-filament-font-picker/health.svg)](https://phpackages.com/packages/charlieetienne-filament-font-picker) ``` ### Alternatives [codewithdennis/filament-select-tree The multi-level select field enables you to make single selections from a predefined list of options that are organized into multiple levels or depths. 329530.5k29](/packages/codewithdennis-filament-select-tree)[ysfkaya/filament-phone-input A phone input component for Laravel Filament 3161.3M25](/packages/ysfkaya-filament-phone-input)[awcodes/richer-editor A collection of extensions and tools to enhance the Filament Rich Editor field. 3912.9k9](/packages/awcodes-richer-editor)[rawilk/filament-password-input Enhanced password input component for filament. 52263.4k14](/packages/rawilk-filament-password-input)[schmeits/filament-character-counter This is a Filament character counter TextField and Textarea form field for Filament v4 and v5 34226.4k13](/packages/schmeits-filament-character-counter)[emmanpbarrameda/filament-take-picture-field FilamentTakePictureField Component for Filament Forms 3411.2k](/packages/emmanpbarrameda-filament-take-picture-field) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)