Consolidate font definitions into single source of truth

Create constants.py with FONT_FAMILY and FONT_FAMILY_SHORT.
All Python files now import and use these constants instead of
hardcoded font values.

app.py

@@ -3,6 +3,8 @@ import logging
 import sys
 import os
 
+from constants import FONT_FAMILY_SHORT
+
 logging.basicConfig(level=logging.INFO, format='%(levelname)s: %(message)s')
 logger = logging.getLogger(__name__)
 
@@ -202,7 +204,7 @@ theme = gr.themes.Base(
         c50="#F7F8FB", c100="#EBEDF3", c200="#D4D8E7", c300="#B1B9D3", c400="#82889B",
         c500="#525662", c600="#3A3C45", c700="#2F3137", c800="#222328", c900="#18191C", c950="#0D0D0F"
     ),
-    font=['Arial', 'sans-serif'],
+    font=[FONT_FAMILY_SHORT, 'sans-serif'],
     font_mono=['monospace'],
 ).set(
     body_text_color='*neutral_950',

constants.py

@@ -0,0 +1,5 @@
+# Single source of truth for styling constants
+
+# Font settings
+FONT_FAMILY = "Arial, sans-serif"
+FONT_FAMILY_SHORT = "Arial"  # For places that don't accept fallbacks

content.py

@@ -1,4 +1,5 @@
 import re
+from constants import FONT_FAMILY
 
 def create_gradio_anchor_id(text: str, validation) -> str:
     """
@@ -233,7 +234,7 @@ def hf_uri_to_web_url(uri: str) -> str:
     return f"https://huggingface.co/datasets/{namespace}/{repo}/tree/main/{path}"
 
 
-css = """
+css = f"""
 /* CSS Color Variables aligned with OpenHands brand (openhands-ui/tokens.css) */
 :root {
     /* Primary - Yellow */
@@ -400,7 +401,7 @@ thead.svelte-1e98i6s th {
     background: var(--color-background-dark) !important;
 }
 .cell-wrap.svelte-v1pjjd {
-    font-family: Arial, sans-serif;
+    font-family: {FONT_FAMILY};
     }
 nav.svelte-ti537g.svelte-ti537g {
     justify-content: flex-start;
@@ -462,7 +463,7 @@ nav.svelte-ti537g.svelte-ti537g {
     line-height: 1.2 !important;
     vertical-align: top !important;
     font-size: 12px !important;
-    font-family: Arial, sans-serif;
+    font-family: {FONT_FAMILY};
 }
 .wrap-header-df th {
     height: auto !important;

leaderboard_transformer.py

@@ -8,6 +8,7 @@ import html
 import os
 
 import aliases
+from constants import FONT_FAMILY, FONT_FAMILY_SHORT
 
 logger = logging.getLogger(__name__)
 
@@ -55,7 +56,7 @@ URL_ANNOTATION = dict(
     yanchor="bottom",
     showarrow=False,
     font=dict(
-        family="Arial, sans-serif",
+        family=FONT_FAMILY,
         size=14,
         color="#82889B",  # neutral-400
     ),
@@ -785,7 +786,7 @@ def _plot_scatter_plotly(
                 font=dict(
                     size=10,
                     color='#0D0D0F',  # neutral-950
-                    family='Arial'
+                    family=FONT_FAMILY_SHORT
                 ),
                 xanchor='center',
                 yanchor='bottom'
@@ -816,13 +817,13 @@ def _plot_scatter_plotly(
         ),
         height=572,
         font=dict(
-            family="Arial, sans-serif",
+            family=FONT_FAMILY,
             color="#0D0D0F",  # neutral-950
         ),
         hoverlabel=dict(
             bgcolor="#222328",  # neutral-800
             font_size=12,
-            font_family="Arial",
+            font_family=FONT_FAMILY_SHORT,
             font_color="#F7F8FB",  # neutral-50
         ),
         # Add margin at bottom for logo and URL

visualizations.py

@@ -8,6 +8,7 @@ from datetime import datetime
 import os
 import base64
 import aliases
+from constants import FONT_FAMILY, FONT_FAMILY_SHORT
 
 # Import company logo mapping from leaderboard_transformer
 from leaderboard_transformer import get_company_from_model
@@ -19,13 +20,13 @@ STANDARD_LAYOUT = dict(
     template="plotly_white",
     height=572,
     font=dict(
-        family="Outfit, ui-sans-serif, sans-serif",
+        family=FONT_FAMILY,
         color="#0D0D0F",  # neutral-950
     ),
     hoverlabel=dict(
         bgcolor="#222328",  # neutral-800
         font_size=12,
-        font_family="Outfit",
+        font_family=FONT_FAMILY_SHORT,
         font_color="#F7F8FB",  # neutral-50
     ),
     legend=dict(