feat(customize): expose font parameter as dropdown in Customization Studio (JhaSourav07#534)

## Description

- Adds a Font type (`'' | 'jetbrains' | 'fira' | 'roboto'`) and FONTS
constant to `app/customize/types.ts`
- Adds a Font dropdown to the Controls panel in `ControlsPanel.tsx`,
rendered below the Radar Scan Speed control using the existing
`StyledSelect` component
- Wires `font` state into `buildQueryParams` in `page.tsx` so the live
preview and export snippet update in real-time

Fixes JhaSourav07#139

## Pillar

- [ ] 🎨 Pillar 1 — New Theme Design
- [ ] 📐 Pillar 2 — Geometric SVG Improvement
- [ ] 🕐 Pillar 3 — Timezone Logic Optimization
- [x] 🛠️ Other (Bug fix, refactoring, docs)

## Visual Preview

<img width="1512" height="771" alt="image"
src="https://github.com/user-attachments/assets/e655c358-4043-4cda-b5bb-ad843b010650"
/>
<img width="758" height="284" alt="image"
src="https://github.com/user-attachments/assets/db07827b-39b4-4df5-8466-a968bb536e68"
/>
<img width="1512" height="759" alt="image"
src="https://github.com/user-attachments/assets/16dbaea9-598e-406c-aa2a-cddba2506c52"
/>
<img width="1509" height="750" alt="image"
src="https://github.com/user-attachments/assets/7958d6be-5650-4ac9-b9bd-69d1739cb9be"
/>


## 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): ...`).
- [x] 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).
- [x] (Recommended) I joined the CommitPulse Discord community for
contributor discussions, mentorship, and faster PR support.

Author: JhaSourav07

app/customize/components/ControlsPanel.tsx

@@ -1,5 +1,5 @@
 import type { ReactElement, ReactNode } from 'react';
-import { SIZES, SPEEDS, type BadgeSize, type Scale } from '../types';
+import { FONTS, SIZES, SPEEDS, type BadgeSize, type Font, type Scale } from '../types';
 import { isValidHex, stripHash } from '../utils';
 import { SectionLabel } from './SectionLabel';
 import { StyledSelect, ThemeSelector } from './ThemeSelector';
@@ -85,6 +85,7 @@ export function ControlsPanel({
   textHex,
   scale,
   speed,
+  font,
   year,
   radius,
   size,
@@ -95,6 +96,7 @@ export function ControlsPanel({
   onTextHexChange,
   onScaleChange,
   onSpeedChange,
+  onFontChange,
   onYearChange,
   onSizeChange,
   onClearOverrides,
@@ -107,6 +109,7 @@ export function ControlsPanel({
   textHex: string;
   scale: Scale;
   speed: string;
+  font: Font;
   year: string;
   radius: number;
   size: BadgeSize;
@@ -117,6 +120,7 @@ export function ControlsPanel({
   onTextHexChange: (value: string) => void;
   onScaleChange: (value: Scale) => void;
   onSpeedChange: (value: string) => void;
+  onFontChange: (value: Font) => void;
   onYearChange: (value: string) => void;
   onSizeChange: (value: BadgeSize) => void;
   onClearOverrides: () => void;
@@ -271,6 +275,18 @@ export function ControlsPanel({
           </div>
         </ControlRow>
 
+        <ControlRow label="Font">
+          <div className="relative">
+            <StyledSelect id="font-select" value={font} onChange={(v) => onFontChange(v as Font)}>
+              {FONTS.map((fontOption) => (
+                <option key={fontOption.value} value={fontOption.value}>
+                  {fontOption.label}
+                </option>
+              ))}
+            </StyledSelect>
+          </div>
+        </ControlRow>
+
         <ControlRow label="Border Radius">
           <div className="relative flex items-center">
             <div className="absolute inset-x-0 h-1 rounded-full bg-gray-300 dark:bg-white/6" />

app/customize/page.tsx

@@ -5,7 +5,7 @@ import Link from 'next/link';
 import { motion } from 'framer-motion';
 import { ControlsPanel } from './components/ControlsPanel';
 import { ExportPanel } from './components/ExportPanel';
-import type { ExportFormat, Scale, BadgeSize } from './types';
+import type { ExportFormat, Font, Scale, BadgeSize } from './types';
 import { getExportSnippet, stripHash } from './utils';
 
 // ─── Main Page ────────────────────────────────────────────────────────────────
@@ -18,6 +18,7 @@ export default function CustomizePage(): ReactElement {
   const [textHex, setTextHex] = useState('');
   const [scale, setScale] = useState<Scale>('linear');
   const [speed, setSpeed] = useState('8s');
+  const [font, setFont] = useState<Font>('');
   const [year, setYear] = useState('');
   const [radius, setRadius] = useState(8);
   const [size, setSize] = useState<BadgeSize>('medium');
@@ -90,6 +91,7 @@ export default function CustomizePage(): ReactElement {
 
     if (scale !== 'linear') params.set('scale', scale);
     if (speed !== '8s') params.set('speed', speed);
+    if (font) params.set('font', font);
     if (year) params.set('year', year);
     if (radius !== 8) params.set('radius', radius.toString());
     if (size !== 'medium') params.set('size', size);
@@ -104,6 +106,7 @@ export default function CustomizePage(): ReactElement {
     textHex,
     scale,
     speed,
+    font,
     year,
     radius,
     size,
@@ -226,6 +229,7 @@ export default function CustomizePage(): ReactElement {
               textHex={textHex}
               scale={scale}
               speed={speed}
+              font={font}
               year={year}
               radius={radius}
               size={size}
@@ -236,6 +240,7 @@ export default function CustomizePage(): ReactElement {
               onTextHexChange={setTextHex}
               onScaleChange={setScale}
               onSpeedChange={setSpeed}
+              onFontChange={setFont}
               onYearChange={setYear}
               onRadiusChange={setRadius}
               onSizeChange={setSize}

app/customize/types.ts

@@ -26,3 +26,12 @@ export const SIZES = [
   { value: 'medium', label: 'Medium (Default)' },
   { value: 'large', label: 'Large' },
 ] as const;
+
+export const FONTS = [
+  { value: '', label: 'Default' },
+  { value: 'jetbrains', label: 'JetBrains Mono' },
+  { value: 'fira', label: 'Fira Code' },
+  { value: 'roboto', label: 'Roboto' },
+] as const satisfies readonly { value: string; label: string }[];
+
+export type Font = (typeof FONTS)[number]['value'];