fix: add free-text input for custom Google Fonts in Customization Studio (JhaSourav07#2191)

## Description
Fixes JhaSourav07#2163 

## Pillar
- [x] 🛠️ Other (Bug fix, refactoring, docs)

## Visual Preview
Before: Font dropdown only showed 4 hardcoded options (Default,
JetBrains Mono, Fira Code, Roboto) with no way to use custom Google
Fonts from the UI.

<img width="410" height="269"
alt="{10B4251A-F0C0-4049-BDBD-FE5372931A2D}"
src="https://github.com/user-attachments/assets/a848b97e-2204-44e0-b82c-a22cd1d72552"
/>


After: Selecting "Custom Google Font..." from the dropdown now reveals a
free-text input where users can type any valid Google Font name (e.g.
Orbitron, Space Mono, Inter). The font is loaded via Google Fonts and
applied to the badge preview instantly.

<img width="427" height="214"
alt="{1854EAE4-1D73-4017-B4A5-08250DDA5658}"
src="https://github.com/user-attachments/assets/10674ba5-d63c-4888-a6ed-63e9f1d30519"
/>

Badge generated using Playfair Display font:

<img width="1316" height="907"
alt="{91DB64FE-D84A-4A7F-B4F1-AF438DB38987}"
src="https://github.com/user-attachments/assets/cd1d73fb-b557-4f23-83e8-3971a0bcd15e"
/>

## Known Limitations
The custom font input is case-sensitive as it passes the value directly
to the Google Fonts API.
Users should enter font names as they appear on fonts.google.com (e.g.
`Orbitron`, not `orbitron`).
A future improvement could add a Google Fonts API lookup for
autocomplete/validation.

## Checklist before requesting a review:
- [x] I have read the `CONTRIBUTING.md` file.
- [x] I have tested these changes locally
(`localhost:3000/api/streak?user=YOUR_USERNAME`).
- [x] I have run `npm run format` and `npm run lint` locally and
resolved all errors (CI will fail otherwise).
- [x] My commits follow the Conventional Commits format (e.g.,
`feat(themes): ...`, `fix(calculate): ...`).
- [ ] I have updated `README.md` if I added a new theme or URL
parameter.
- [x] I have started the repo.
- [x] I have made sure that i have only one commit to merge in this PR.
- [x] The SVG output matches the CommitPulse "premium quality" aesthetic
standard (no raw elements, smooth animations, correct fonts).

Author: JhaSourav07

app/customize/components/ControlsPanel.tsx

@@ -277,14 +277,35 @@ export function ControlsPanel({
 
         <ControlRow label="Font">
           <div className="relative">
-            <StyledSelect id="font-select" value={font} onChange={(v) => onFontChange(v as Font)}>
+            <StyledSelect
+              id="font-select"
+              value={FONTS.some((f) => f.value === font) ? font : 'custom'}
+              onChange={(v) => {
+                if (v === 'custom') {
+                  onFontChange('' as Font);
+                } else {
+                  onFontChange(v as Font);
+                }
+              }}
+            >
               {FONTS.map((fontOption) => (
                 <option key={fontOption.value} value={fontOption.value}>
                   {fontOption.label}
                 </option>
               ))}
+              <option value="custom">Custom Google Font...</option>
             </StyledSelect>
           </div>
+          {!FONTS.some((f) => f.value === font) && (
+            <input
+              id="font-custom-input"
+              type="text"
+              value={font}
+              onChange={(e) => onFontChange(e.target.value as Font)}
+              placeholder="e.g. Orbitron, Space Mono, Inter"
+              className="w-full bg-gray-100/80 backdrop-blur-md border border-black/10 dark:bg-white/[0.03] dark:border-white/10 rounded-xl px-4 py-2.5 text-sm font-mono text-black dark:text-emerald-300 placeholder:text-gray-400 dark:placeholder:text-white/60 outline-none focus:border-emerald-500/50 transition-colors mt-2"
+            />
+          )}
         </ControlRow>
 
         <ControlRow label="Border Radius">

app/customize/types.ts

@@ -34,7 +34,7 @@ export const FONTS = [
   { value: 'roboto', label: 'Roboto' },
 ] as const satisfies readonly { value: string; label: string }[];
 
-export type Font = (typeof FONTS)[number]['value'];
+export type Font = (typeof FONTS)[number]['value'] | string;
 
 export const VIEW_MODES = [
   { value: 'default', label: 'Default' },