diff --git a/docs/src/animationhelpers/src/components/Key.tsx b/docs/src/animationhelpers/src/components/Key.tsx
index 3ecbbc12..5563dd7d 100644
--- a/docs/src/animationhelpers/src/components/Key.tsx
+++ b/docs/src/animationhelpers/src/components/Key.tsx
@@ -63,6 +63,7 @@ export default function Key({
           padding={15}
           fontWeight={600}
           fontSize={32}
+          fontFamily={"sans-serif"}
           y={-65}
         />
         <Text
@@ -73,6 +74,7 @@ export default function Key({
           justifyContent={"center"}
           fontWeight={600}
           fontSize={60}
+          fontFamily={"sans-serif"}
         />
       </Node>
     </Node>
diff --git a/docs/src/animationhelpers/src/components/Output.tsx b/docs/src/animationhelpers/src/components/Output.tsx
index 46a42f51..1fbb36a2 100644
--- a/docs/src/animationhelpers/src/components/Output.tsx
+++ b/docs/src/animationhelpers/src/components/Output.tsx
@@ -40,6 +40,7 @@ export default function Output({
           justifyContent={"center"}
           fontWeight={OutputFontWeight}
           fontSize={OutputFontSize}
+          fontFamily={"sans-serif"}
           margin={ModifierMargin}
         />
       </Rect>
@@ -58,6 +59,7 @@ export default function Output({
             text={() => "SHIFT"}
             fontWeight={ModifierFontWeight}
             fontSize={ModifierFontSize}
+            fontFamily={"sans-serif"}
             margin={ModifierMargin}
           />
         </Rect>
@@ -76,6 +78,7 @@ export default function Output({
             text={() => "ALT"}
             fontWeight={ModifierFontWeight}
             fontSize={ModifierFontSize}
+            fontFamily={"sans-serif"}
             margin={ModifierMargin}
           />
         </Rect>
@@ -94,6 +97,7 @@ export default function Output({
             text={() => "CTRL"}
             fontWeight={ModifierFontWeight}
             fontSize={ModifierFontSize}
+            fontFamily={"sans-serif"}
             margin={ModifierMargin}
           />
         </Rect>
@@ -112,6 +116,7 @@ export default function Output({
             text={() => "GUI"}
             fontWeight={ModifierFontWeight}
             fontSize={ModifierFontSize}
+            fontFamily={"sans-serif"}
             margin={ModifierMargin}
           />
         </Rect>
diff --git a/docs/src/animationhelpers/src/scenes/hold_tap/hold_tap_comparison.tsx b/docs/src/animationhelpers/src/scenes/hold_tap/hold_tap_comparison.tsx
index 4f5600f2..af360c5d 100644
--- a/docs/src/animationhelpers/src/scenes/hold_tap/hold_tap_comparison.tsx
+++ b/docs/src/animationhelpers/src/scenes/hold_tap/hold_tap_comparison.tsx
@@ -25,6 +25,7 @@ export default makeScene2D(function* (view) {
       position={tap.group.position().addY(-160)}
       fontWeight={600}
       fontSize={64}
+      fontFamily={"sans-serif"}
     >
       tap
     </Text>
@@ -48,6 +49,7 @@ export default makeScene2D(function* (view) {
       position={hold.group.position().addY(-160)}
       fontWeight={600}
       fontSize={64}
+      fontFamily={"sans-serif"}
     >
       hold
     </Text>