feat: add custom font styling for improved UI aesthetics

index.html

@@ -5,6 +5,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Vega-Lite Editor Integration</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
     <script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
     <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>

src/styles.css

@@ -1,3 +1,7 @@
+:root {
+    --ui-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
 #vis {
     width: 100%;
     height: 100%;
@@ -10,6 +14,27 @@
     box-sizing: border-box;
 }
 
+/* Apply font to UI elements */
+.panel-header,
+.button,
+.snippet-item,
+.snippet-content {
+    font-family: var(--ui-font);
+}
+
+.panel-header h2 {
+    font-weight: 600;
+    font-size: 1.125rem;
+}
+
+.button {
+    font-weight: 500;
+}
+
+.snippet-content {
+    font-size: 0.925rem;
+}
+
 .container {
     display: grid;
     grid-template-columns: var(--snippet-width, 1fr) 5px var(--editor-width, 1fr) 5px var(--preview-width, 2fr);