Ensure that the custom font is loaded (#435)

livebook-dev · May 31, 2024 · de0abce · de0abce
1 parent 0a56ac3
commit de0abce
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git a/assets/data_table/src/main.js b/assets/data_table/src/main.js
@@ -5,14 +5,17 @@ import React from "react";
 import { createRoot } from "react-dom/client";
 import { App } from "./App";
 
-export function init(ctx, data) {
-  ctx.importCSS("main.css");
-  ctx.importCSS(
-    "https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap",
+export async function init(ctx, data) {
+  // In Firefox and Safari, during the first load (uncached), the data
+  // grid renders the default font and the font is only updated after
+  // hovering the grid. Ensuring the font is loaded helps in Firefox.
+  await ctx.importCSS(
+    "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap"
   );
   ctx.importCSS(
-    "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap",
+    "https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap"
   );
+  ctx.importCSS("main.css");
 
   const root = createRoot(ctx.root);
   root.render(<App ctx={ctx} data={data} />);