font flash #476

klyburke · klyburke · commit 2669e9d90081 · 2022-06-05T15:41:24.000-07:00
diff --git a/book/9-end/lib/theme.js b/book/9-end/lib/theme.js
@@ -11,7 +11,7 @@ const theme = createTheme({
     },
   },
   typography: {
-    fontFamily: 'IBM Plex Mono, monospace',
+    fontFamily: ['IBM Plex Mono', 'monospace'].join(','),
     button: {
       textTransform: 'none',
     },
diff --git a/book/9-end/pages/_document.jsx b/book/9-end/pages/_document.jsx
@@ -58,6 +58,7 @@ class MyDocument extends Document {
             href="https://storage.googleapis.com/builderbook/favicon32.png"
           />
 
+          <link rel="stylesheet" href="/fonts/server.css" />
           <link rel="stylesheet" href="https://storage.googleapis.com/builderbook/vs.min.css" />
 
           <style>
diff --git a/builderbook/pages/_app.jsx b/builderbook/pages/_app.jsx
@@ -50,6 +50,7 @@ function MyApp({ Component, pageProps }) {
         {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
         <Head>
           <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+          <link rel="stylesheet" href={isServer ? '/fonts/server.css' : '/fonts/cdn.css'} />
           <link
             rel="stylesheet"
             href="https://storage.googleapis.com/async-await/nprogress-light-spinner.css"
