Google Fonts Link

Drop this into your <head> to preload them:

<link href="https://fonts.googleapis.com/css2?
family=Inter:wght@400;700&
family=Manrope:wght@400;700&
family=Montserrat:wght@400;700&
family=Poppins:wght@400;700&
family=Roboto:wght@400;700&
family=Open+Sans:wght@400;700&
family=Lato:wght@400;700&
family=Work+Sans:wght@400;700&
family=Nunito:wght@400;700&
family=Raleway:wght@400;700&
family=Rubik:wght@400;700&
family=Barlow:wght@400;700&
family=Heebo:wght@400;700&
family=Archivo:wght@400;700&
family=Catamaran:wght@400;700&
family=Lexend:wght@400;700&
family=Titillium+Web:wght@400;700&
family=Chivo:wght@400;700&
family=Overpass:wght@400;700&
family=Ubuntu:wght@400;700&

family=Playfair+Display:wght@700&
family=Merriweather:wght@700&
family=Cormorant+Garamond:wght@700&
family=PT+Serif:wght@700&
family=Domine:wght@700&
family=Zilla+Slab:wght@700&
family=Crimson+Text:wght@700&
family=Lora:wght@700&
family=Spectral:wght@700&
family=Vollkorn:wght@700&

family=Arvo:wght@700&
family=Roboto+Slab:wght@700&
family=Noto+Serif+Display:wght@700&
family=Alegreya:wght@700&
family=Tinos:wght@700&

family=Bebas+Neue&
family=Oswald:wght@700&
family=Orbitron:wght@700&
family=Varela+Round&
family=Play:wght@700&
family=Exo+2:wght@700&
family=Righteous&
family=Anton&
family=Fjalla+One&
family=Bungee&

family=Pacifico&
family=Dancing+Script:wght@700&
family=Great+Vibes&
family=Permanent+Marker&
family=Amatic+SC:wght@700&
family=Sacramento&
family=Indie+Flower&
family=Shadows+Into+Light&
family=Courgette&
family=Kaushan+Script&
display=swap" rel="stylesheet">

🖋️ Font Picker Integration

Just extend the DEFAULT_FONTS list in the FontPicker.tsx I gave you earlier to include these. Group them by category like:

{ label: "Lora", family: '"Lora", serif', group: "Serif" },
{ label: "Anton", family: '"Anton", sans-serif', group: "Display" },
{ label: "Indie Flower", family: '"Indie Flower", cursive', group: "Script" },


The search + filter by category will keep it usable, even with 60+ options.