diff --git a/ui/.storybook/preview-head.html b/ui/.storybook/preview-head.html
new file mode 100644
index 000000000..f27f7d7b4
--- /dev/null
+++ b/ui/.storybook/preview-head.html
@@ -0,0 +1,21 @@
+<!--
+  ~ Copyright 2025 Splunk Inc.
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~ http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  ~
+-->
+
+<link rel="preload" as="font" type="font/woff" href="/fonts/splunkdatasansmono-regular.woff" />
+<link rel="preload" as="font" type="font/woff" href="/fonts/splunkdatasans-bold.woff" />
+<link rel="preload" as="font" type="font/woff" href="/fonts/splunkdatasans-medium.woff" />
+<link rel="preload" as="font" type="font/woff" href="/fonts/splunkdatasans-regular.woff" />
diff --git a/ui/.storybook/test-runner.ts b/ui/.storybook/test-runner.ts
index e3ba6b780..f28f2279c 100644
--- a/ui/.storybook/test-runner.ts
+++ b/ui/.storybook/test-runner.ts
@@ -1,4 +1,4 @@
-import { getStoryContext, TestRunnerConfig } from '@storybook/test-runner';
+import { getStoryContext, TestRunnerConfig, waitForPageReady } from '@storybook/test-runner';
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
 
 const config: TestRunnerConfig = {
@@ -38,8 +38,13 @@ const config: TestRunnerConfig = {
         const customReceivedDir = `${process.cwd()}/test-reports/visual/image_snapshot_received/`;
 
         // can't use waitForPageReady because networkidle never fires due to HMR for locally running Storybook
-        await page.waitForLoadState('domcontentloaded');
-        await page.waitForLoadState('load');
+        if (process.env.CI) {
+            await waitForPageReady(page);
+        } else {
+            await page.waitForLoadState('domcontentloaded');
+            await page.waitForLoadState('load');
+        }
+
         await page.evaluate(() => document.fonts.ready);
 
         const image = await page.screenshot({ animations: 'disabled', scale: 'css' });