Font Select

use Bjanczak\FilamentFlexFields\Filament\Forms\Components\FontSelect;

FontSelect::make('heading_font')
    ->default('google:inter')
    ->required();

FontSelect::make('brand_font')
    ->fonts(['google:inter', 'google:roboto', 'google:lora'])
    ->exceptFonts(['google:roboto']);

FontSelect::make('editorial_font')
    ->categories(['serif'])
    ->subsets(['latin-ext'])
    ->variableOnly()
    ->sortFonts('alpha');

FontSelect::make('brand_font')
    ->previewText('Your brand, beautifully set.')
    ->previewWeight(600)
    ->previewStyle('normal');

FontSelect::make('heading_font')
    ->previewSelectedFont(false)
    ->default('google:inter');

FontSelect::make('font')
    ->categoryTabs(['sans-serif', 'serif', 'monospace'])
    ->categoryLabels(['sans-serif' => 'Sans serif', 'monospace' => 'Code'])
    ->perPage(48);

FontSelect::make('font')->categoryTabs(false);

FontSelect::make('brand_font')
    ->providers(['local'])
    ->localFonts([
        'brand' => [
            'family' => 'Brand Sans',
            'category' => 'sans-serif',
            'variants' => ['400'],
            'url' => '/fonts/brand-regular.woff2',
        ],
    ]);

FontSelect::make('font')->size('sm')->variant('secondary');
FontSelect::make('font')->size('lg')->rounding('xl');
FontSelect::make('font')->readOnly()->default('google:inter');
FontSelect::make('font')->disabled()->default('google:inter');
FontSelect::make('font')->clearable(false)->placeholder('Choose brand typography');

{
  "providers": ["google"],
  "fonts": ["google:inter", "google:lora"],
  "category_tabs": ["sans-serif", "serif"],
  "preview_text": "Brand typography",
  "preview_weight": 400,
  "preview_style": "normal",
  "preview_selected_font": false,
  "per_page": 48,
  "sort_fonts": "popularity",
  "size": "md",
  "variant": "bordered"
}

use Bjanczak\FilamentFlexFields\Support\Fonts\FontCatalog;

// $settings is your application's cached database settings record.
$font = FontCatalog::find($settings->font_id)
    ?? FontCatalog::find('google:inter');

$font->family;       // Inter
$font->category;     // sans-serif
$font->variants;     // Available weights and italic variants
$font->variable;     // Whether the family has variable axes
$font->axes;         // Axis tags and supported min/max/default values

<link rel="stylesheet" href="{{ $font->stylesheetUrl(weights: [400, 600, 700]) }}">

<main style="font-family: {{ $font->cssFamily() }}, sans-serif">
    Your website content
</main>

$font->stylesheetUrl(
    weights: [400, 700],
    styles: ['normal', 'italic'],
    display: 'swap',
);

$font = FontCatalog::find('google:inter');
$font->stylesheetUrl(weights: [450, 550], styles: ['normal', 'italic']);
$font->variableStylesheetUrl(
    weightRange: [100, 900],
    styles: ['normal', 'italic'],
);
// Use font-weight: 550 in your application CSS with the complete variable font.

<style>
{!! $font->fontFaceCss(display: 'swap') !!}
</style>
<main style="font-family: {{ $font->cssFamily() }}, sans-serif">…</main>

use Bjanczak\FilamentFlexFields\Support\Fonts\FontCatalog;
use Filament\FontProviders\GoogleFontProvider;

$font = FontCatalog::find($settings->panel_font_id)
    ?? FontCatalog::find('google:inter');

return $panel->font(
    $font->family,
    url: $font->stylesheetUrl(weights: [400, 500, 600, 700]),
    provider: GoogleFontProvider::class,
);