diff --git a/src/app.postcss b/src/app.postcss
index f5df0bf3..8f63096c 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -1,4 +1,3 @@
-@import '@fortawesome/fontawesome-free/css/all.min.css';
 @import '@fontsource-variable/recursive/crsv.css';
 
 @tailwind base;
diff --git a/src/lib/components/FontAwesome.svelte b/src/lib/components/FontAwesome.svelte
new file mode 100644
index 00000000..5b4dd0fe
--- /dev/null
+++ b/src/lib/components/FontAwesome.svelte
@@ -0,0 +1,54 @@
+<!--
+  @component
+  Exports a `waitForFontAwesomeToLoad` function that waits for FontAwesome to load.
+
+  Usage:
+
+  ```svelte
+  <script lang="ts">
+    import FontAwesome from '$lib/client/components/FontAwesome';
+    let waitForFontAwesomeToLoad: FontAwesome["waitForFontAwesomeToLoad"];
+  </script>
+  <FontAwesome bind:waitForFontAwesomeToLoad />
+  ```
+-->
+<script context="module" lang="ts">
+  /**
+   * Returns `true` if the code may contain FontAwesome icons, and we should
+   * wait for the fonts to load before rendering.
+   */
+  export function mayContainFontAwesome(code: string) {
+    // taken from https://github.com/mermaid-js/mermaid/blob/7043892e871d0c413ec63dc1570a8ef738d15568/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js#L63
+    // Not ideal, since we're looking at unparsed code.
+    const regex = /fa[blrs]?:fa-[\w-]+/g;
+    return regex.test(code);
+  }
+</script>
+
+<script lang="ts">
+  // Vite will automatically take care of adding this to our `<head>`
+  let lazyLoadFontAwesomeCSS = import('./FontAwesomeCSS.svelte');
+
+  // eslint-disable-next-line unicorn/prefer-top-level-await
+  let fontsLoaded = (async () => {
+    await lazyLoadFontAwesomeCSS;
+
+    // Once the stylesheet has been parsed, the fonts will be in document.fonts
+    // TODO: Maybe we should scan the CSS style sheet only, and only load FontAwesome fonts
+    await Promise.allSettled(Array.from(document.fonts, (font) => font.load()));
+  })();
+
+  /**
+   * Wait for FontAwesome to load.
+   *
+   * @returns A promise that resolves when FontAwesome is
+   * loaded, or there was an error that we ignore.
+   */
+  export async function waitForFontAwesomeToLoad() {
+    return await fontsLoaded;
+  }
+</script>
+
+{#await lazyLoadFontAwesomeCSS then FontAwesomeCSS}
+  <FontAwesomeCSS.default />
+{/await}
diff --git a/src/lib/components/FontAwesomeCSS.svelte b/src/lib/components/FontAwesomeCSS.svelte
new file mode 100644
index 00000000..36232d07
--- /dev/null
+++ b/src/lib/components/FontAwesomeCSS.svelte
@@ -0,0 +1,14 @@
+<!--
+    @component
+    
+    Imports the FontAwesome CSS file.
+
+    Needed, since the `@sveltejs/adapter-node` plugin doesn't seem to support
+    lazy-importing CSS, even though `@sveltejs/adapter-vercel` is fine with it!
+
+    However, making a `.svelte` file that imports the CSS file, and then
+    lazy-loading the `.svelte` file works.
+-->
+<script lang="ts">
+  import '@fortawesome/fontawesome-free/css/all.css';
+</script>
diff --git a/src/lib/components/View.svelte b/src/lib/components/View.svelte
index e0702f64..02ac0ebc 100644
--- a/src/lib/components/View.svelte
+++ b/src/lib/components/View.svelte
@@ -5,6 +5,7 @@
   import { PanZoomState } from '$/util/panZoom';
   import { inputStateStore, stateStore, updateCodeStore } from '$/util/state';
   import { logEvent, saveStatistics } from '$/util/stats';
+  import FontAwesome, { mayContainFontAwesome } from '$lib/components/FontAwesome.svelte';
   import uniqueID from 'lodash-es/uniqueId';
   import type { MermaidConfig } from 'mermaid';
   import { mode } from 'mode-watcher';
@@ -23,6 +24,7 @@
   let error = $state(false);
   let panZoom = true;
   let manualUpdate = true;
+  let waitForFontAwesomeToLoad: FontAwesome['waitForFontAwesomeToLoad'] | undefined = $state();
 
   // Set up panZoom state observer to update the store when pan/zoom changes
   const setupPanZoomObserver = () => {
@@ -65,6 +67,11 @@
         config = state.mermaid;
         rough = state.rough;
         panZoom = state.panZoom ?? true;
+
+        if (mayContainFontAwesome(code)) {
+          await waitForFontAwesomeToLoad?.();
+        }
+
         const scroll = view?.parentElement?.scrollTop;
         delete container.dataset.processed;
         const viewID = uniqueID('graph-');
@@ -136,6 +143,8 @@
   });
 </script>
 
+<FontAwesome bind:waitForFontAwesomeToLoad />
+
 <div
   id="view"
   bind:this={view}
