diff --git a/web/apps/photos/src/styles/photoswipe.css b/web/apps/photos/src/styles/photoswipe.css
index 846c92de0b..04fcb4adbe 100644
--- a/web/apps/photos/src/styles/photoswipe.css
+++ b/web/apps/photos/src/styles/photoswipe.css
@@ -206,7 +206,7 @@
 
     /* Similar to our other controls */
     --media-icon-color: rgba(255 255 255 / 0.8);
-    --media-font-family: Inter Variable, sans-serif;
+    --media-font-family: "Inter Variable", sans-serif;
 }
 
 .pswp-ente .pswp__media-controls media-control-bar {
diff --git a/web/packages/base/components/utils/theme.ts b/web/packages/base/components/utils/theme.ts
index 5162010031..cf1076378f 100644
--- a/web/packages/base/components/utils/theme.ts
+++ b/web/packages/base/components/utils/theme.ts
@@ -412,7 +412,7 @@ const getColorSchemes = (colors: ReturnType<typeof getColors>) => ({
  * value, we alias it the same weight as regular, 500).
  */
 const typography: TypographyOptions = {
-    fontFamily: "Inter Variable, sans-serif",
+    fontFamily: '"Inter Variable", sans-serif',
     fontWeightLight: 500,
     fontWeightRegular: 500 /* CSS baseline reset sets this as the default */,
     fontWeightMedium: 600,