Update CSS and font handling for ghostty-web

- Remove xterm.js-specific CSS selectors (.xterm, .xterm-viewport, etc.)
- Add canvas-specific styles for ghostty-web renderer
- Add waitForFonts() to ensure fonts are loaded before fitting
- Keep same font stack (ui-monospace, SFMono-Regular, Fira Code, etc.)
- Font is passed to ghostty-web via fontFamily option

src/textual_webterm/static/js/terminal.ts

@@ -113,8 +113,12 @@ class WebTerminal {
 
   /** Initialize event handlers and connect */
   private initialize(): void {
-    // Fit to container
-    this.fitAddon.fit();
+    // Wait for fonts to load before fitting to ensure correct measurements
+    this.waitForFonts().then(() => {
+      this.fitAddon.fit();
+    });
+    
+    // Start observing resize immediately
     this.fitAddon.observeResize();
 
     // Handle window resize (some browsers don't trigger ResizeObserver on window resize)
@@ -139,6 +143,18 @@ class WebTerminal {
     this.connect();
   }
 
+  /** Wait for fonts to be loaded */
+  private async waitForFonts(): Promise<void> {
+    if (!("fonts" in document)) {
+      return;
+    }
+    try {
+      await document.fonts.ready;
+    } catch {
+      // Ignore font loading errors
+    }
+  }
+
   /** Validate terminal dimensions */
   private isValidSize(cols: number, rows: number): boolean {
     return cols >= 2 && cols <= 500 && rows >= 1 && rows <= 200;