From 996767341528b94f452962d9d4ce8c47512b5a4d Mon Sep 17 00:00:00 2001
From: Kyleasmth <45497561+Kyleasmth@users.noreply.github.com>
Date: Fri, 13 Feb 2026 14:53:03 -0800
Subject: [PATCH 1/6] feat(ui): Font family handling in BibleReader and related
 components to use new constants for 'Inter' and 'Source Serif 4'.

---
 .../src/components/bible-reader.stories.tsx   |  9 ++++----
 packages/ui/src/components/bible-reader.tsx   | 21 ++++++++++---------
 .../ui/src/components/bible-widget-view.tsx   |  2 +-
 packages/ui/src/components/verse.tsx          |  5 +++--
 packages/ui/src/lib/verse-html-utils.ts       |  4 ++++
 packages/ui/src/styles/bible-reader.css       |  5 ++++-
 packages/ui/src/styles/global.css             |  4 ++--
 7 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/packages/ui/src/components/bible-reader.stories.tsx b/packages/ui/src/components/bible-reader.stories.tsx
index aae01dd2..6c7cc5a7 100644
--- a/packages/ui/src/components/bible-reader.stories.tsx
+++ b/packages/ui/src/components/bible-reader.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { expect, fn, screen, spyOn, userEvent, waitFor } from 'storybook/test';
 import { BibleReader } from './bible-reader';
 import { setupAuthenticatedUser } from '../test/utils';
+import { SOURCE_SERIF_FONT } from '@/lib/verse-html-utils';
 
 let signInMock: ReturnType<typeof fn>;
 
@@ -45,7 +46,7 @@ const meta: Meta<typeof BibleReader.Root> = {
     },
     fontFamily: {
       control: 'select',
-      options: ['Source Serif Pro', 'Inter', "'Georgia', serif", "'Nunito Sans', sans-serif"],
+      options: [SOURCE_SERIF_FONT, 'Inter', "'Georgia', serif", "'Nunito Sans', sans-serif"],
       description: 'Font family',
     },
     showVerseNumbers: {
@@ -127,7 +128,7 @@ export const Default: Story = {
 
     await userEvent.click(sourceSerifButton);
     await expect(localStorage.getItem('youversion-platform:reader:font-family')).toBe(
-      'Source Serif',
+      SOURCE_SERIF_FONT,
     );
 
     await userEvent.click(interButton);
@@ -501,7 +502,7 @@ export const LoadsSavedPreferencesFromLocalStorage: Story = {
     localStorage.clear();
     // Pre-populate localStorage with saved preferences
     localStorage.setItem('youversion-platform:reader:font-size', '18');
-    localStorage.setItem('youversion-platform:reader:font-family', 'Source Serif');
+    localStorage.setItem('youversion-platform:reader:font-family', SOURCE_SERIF_FONT);
   },
   render: (args) => (
     <div className="yv:h-screen yv:bg-background">
@@ -526,7 +527,7 @@ export const LoadsSavedPreferencesFromLocalStorage: Story = {
     )!;
     await expect(verseContainer.style.getPropertyValue('--yv-reader-font-size')).toBe('18px');
     await expect(verseContainer.style.getPropertyValue('--yv-reader-font-family')).toBe(
-      'Source Serif',
+      SOURCE_SERIF_FONT,
     );
 
     // Open settings and verify the correct font family button is active
diff --git a/packages/ui/src/components/bible-reader.tsx b/packages/ui/src/components/bible-reader.tsx
index b83cdd94..9b3fa285 100644
--- a/packages/ui/src/components/bible-reader.tsx
+++ b/packages/ui/src/components/bible-reader.tsx
@@ -27,6 +27,7 @@ import { PersonIcon } from './icons/person';
 import { Button } from './ui/button';
 import { Popover, PopoverContent, PopoverTrigger } from './ui/popover';
 import { BibleTextView } from './verse';
+import { INTER_FONT, SOURCE_SERIF_FONT, type FontFamily } from '@/lib/verse-html-utils';
 
 type BibleReaderContextType = {
   book: string;
@@ -35,8 +36,8 @@ type BibleReaderContextType = {
   setBook: React.Dispatch<React.SetStateAction<string>>;
   setChapter: React.Dispatch<React.SetStateAction<string>>;
   setVersionId: React.Dispatch<React.SetStateAction<number>>;
-  currentFontFamily: string;
-  setCurrentFontFamily: React.Dispatch<React.SetStateAction<string>>;
+  currentFontFamily: FontFamily;
+  setCurrentFontFamily: React.Dispatch<React.SetStateAction<FontFamily>>;
   currentFontSize: number;
   setCurrentFontSize: React.Dispatch<React.SetStateAction<number>>;
   lineHeight?: number;
@@ -64,7 +65,7 @@ export type RootProps = {
   versionId?: number;
   defaultVersionId?: number;
   onVersionChange?: (versionId: number) => void;
-  fontFamily?: string;
+  fontFamily?: FontFamily;
   fontSize?: number;
   lineHeight?: number;
   showVerseNumbers?: boolean;
@@ -86,7 +87,7 @@ function Root({
   versionId: controlledVersionId,
   defaultVersionId = DEFAULT_LICENSE_FREE_BIBLE_VERSION,
   onVersionChange,
-  fontFamily = 'Inter',
+  fontFamily = SOURCE_SERIF_FONT,
   fontSize = DEFAULT_FONT_SIZE,
   lineHeight,
   showVerseNumbers = true,
@@ -396,18 +397,18 @@ function Toolbar({ border = 'top' }: { border?: 'top' | 'bottom' }) {
                 <Button
                   className={cn(
                     'yv:group yv:dark:bg-muted yv:rounded-r-none yv:dark:border-border yv:rounded-l-[8px] yv:h-auto',
-                    currentFontFamily === 'Inter'
+                    currentFontFamily === INTER_FONT
                       ? 'yv:bg-black yv:dark:bg-inherit yv:text-white yv:hover:text-white yv:hover:bg-black/80'
                       : '',
                   )}
-                  onClick={() => setCurrentFontFamily('Inter')}
+                  onClick={() => setCurrentFontFamily(INTER_FONT)}
                   variant="outline"
                 >
                   <div className="yv:flex yv:flex-col yv:w-full yv:items-start">
                     <span
                       className={cn(
                         'yv:text-xs yv:text-muted-foreground',
-                        currentFontFamily === 'Inter'
+                        currentFontFamily === INTER_FONT
                           ? 'yv:text-muted yv:dark:text-muted-foreground yv:group-hover:text-muted'
                           : '',
                       )}
@@ -420,18 +421,18 @@ function Toolbar({ border = 'top' }: { border?: 'top' | 'bottom' }) {
                 <Button
                   className={cn(
                     'yv:group yv:dark:bg-muted yv:rounded-l-none yv:rounded-r-[8px] yv:h-auto',
-                    currentFontFamily === 'Source Serif'
+                    currentFontFamily === SOURCE_SERIF_FONT
                       ? 'yv:bg-black yv:dark:bg-inherit yv:text-white yv:hover:text-white yv:hover:bg-black/80'
                       : '',
                   )}
-                  onClick={() => setCurrentFontFamily('Source Serif')}
+                  onClick={() => setCurrentFontFamily(SOURCE_SERIF_FONT)}
                   variant="outline"
                 >
                   <div className="yv:flex yv:flex-col yv:w-full yv:items-start">
                     <span
                       className={cn(
                         'yv:text-xs yv:text-muted-foreground',
-                        currentFontFamily === 'Source Serif'
+                        currentFontFamily === SOURCE_SERIF_FONT
                           ? 'yv:text-muted yv:dark:text-muted-foreground yv:group-hover:text-muted'
                           : '',
                       )}
diff --git a/packages/ui/src/components/bible-widget-view.tsx b/packages/ui/src/components/bible-widget-view.tsx
index 03e3da5e..43872e25 100644
--- a/packages/ui/src/components/bible-widget-view.tsx
+++ b/packages/ui/src/components/bible-widget-view.tsx
@@ -67,7 +67,7 @@ export function BibleWidgetView({
       <BibleTextView
         theme={theme}
         fontSize={16}
-        fontFamily={"'Source Serif Pro', serif"}
+        fontFamily={"'Source Serif 4', serif"}
         reference={reference}
         versionId={versionNum}
       />
diff --git a/packages/ui/src/components/verse.tsx b/packages/ui/src/components/verse.tsx
index 58383655..461f331e 100644
--- a/packages/ui/src/components/verse.tsx
+++ b/packages/ui/src/components/verse.tsx
@@ -17,6 +17,7 @@ import {
   extractNotesFromWrappedHtml,
   LETTERS,
   NON_BREAKING_SPACE,
+  type FontFamily,
   type VerseNotes,
   wrapVerseContent,
 } from '@/lib/verse-html-utils';
@@ -286,7 +287,7 @@ type VerseProps = {
 
 type VerseHtmlProps = {
   html: string;
-  fontFamily?: string;
+  fontFamily?: FontFamily;
   fontSize?: number;
   lineHeight?: number;
   showVerseNumbers?: boolean;
@@ -392,7 +393,7 @@ export const Verse = {
 
 export type BibleTextViewProps = {
   reference: string;
-  fontFamily?: string;
+  fontFamily?: FontFamily;
   fontSize?: number;
   lineHeight?: number;
   versionId: number;
diff --git a/packages/ui/src/lib/verse-html-utils.ts b/packages/ui/src/lib/verse-html-utils.ts
index 727f61fa..073fdc80 100644
--- a/packages/ui/src/lib/verse-html-utils.ts
+++ b/packages/ui/src/lib/verse-html-utils.ts
@@ -7,6 +7,10 @@ export type VerseNotes = {
   notes: string[];
 };
 
+export const INTER_FONT = '"Inter", sans-serif' as const;
+export const SOURCE_SERIF_FONT = '"Source Serif 4", serif' as const;
+export type FontFamily = typeof INTER_FONT | typeof SOURCE_SERIF_FONT | (string & {});
+
 /**
  * Wraps verse content in `yv-v` elements for easier CSS targeting.
  *
diff --git a/packages/ui/src/styles/bible-reader.css b/packages/ui/src/styles/bible-reader.css
index 47a883e8..d198a8ab 100644
--- a/packages/ui/src/styles/bible-reader.css
+++ b/packages/ui/src/styles/bible-reader.css
@@ -2,7 +2,10 @@
 [data-slot='yv-bible-renderer'] {
   /* Makes it where cascading styles from the parent app do not affect the bible reader */
   all: unset;
-  --yv-reader-font-family: var(--font-sans), var(--font-serif);
+
+  --font-sans: 'Inter', sans-serif;
+  --font-serif: 'Source Serif 4', serif;
+  --yv-reader-font-family: var(--font-serif), var(--font-sans);
   --yv-reader-font-size: 20px;
   --yv-reader-line-height: 1.625;
 
diff --git a/packages/ui/src/styles/global.css b/packages/ui/src/styles/global.css
index 652cf7b4..ebd5fe6b 100644
--- a/packages/ui/src/styles/global.css
+++ b/packages/ui/src/styles/global.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Source+Serif+Pro:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Source+Serif+4:wght@400;700&display=swap');
 
 /*
  * Tailwind v4 CSS Layer Opt-Out
@@ -183,7 +183,7 @@
 [data-yv-sdk] {
   @theme inline {
     --font-sans: 'Inter', sans-serif;
-    --font-serif: 'Source Serif Pro', serif;
+    --font-serif: 'Source Serif 4', serif;
     --color-background: var(--yv-background);
     --color-foreground: var(--yv-foreground);
     --color-card: var(--yv-card);

From a2aa1cb110c5c9f6f2acbd799632fec0307ce414 Mon Sep 17 00:00:00 2001
From: Kyleasmth <45497561+Kyleasmth@users.noreply.github.com>
Date: Fri, 13 Feb 2026 14:57:37 -0800
Subject: [PATCH 2/6] Update BibleReader story to use INTER_FONT constant for
 font-family retrieval

---
 packages/ui/src/components/bible-reader.stories.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/bible-reader.stories.tsx b/packages/ui/src/components/bible-reader.stories.tsx
index 6c7cc5a7..744b6d63 100644
--- a/packages/ui/src/components/bible-reader.stories.tsx
+++ b/packages/ui/src/components/bible-reader.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { expect, fn, screen, spyOn, userEvent, waitFor } from 'storybook/test';
 import { BibleReader } from './bible-reader';
 import { setupAuthenticatedUser } from '../test/utils';
-import { SOURCE_SERIF_FONT } from '@/lib/verse-html-utils';
+import { INTER_FONT, SOURCE_SERIF_FONT } from '@/lib/verse-html-utils';
 
 let signInMock: ReturnType<typeof fn>;
 
@@ -132,7 +132,7 @@ export const Default: Story = {
     );
 
     await userEvent.click(interButton);
-    await expect(localStorage.getItem('youversion-platform:reader:font-family')).toBe('Inter');
+    await expect(localStorage.getItem('youversion-platform:reader:font-family')).toBe(INTER_FONT);
   },
 };
 

From efd145975ad8d19aac17e1bc6a419896b1482b0b Mon Sep 17 00:00:00 2001
From: Kyleasmth <45497561+Kyleasmth@users.noreply.github.com>
Date: Mon, 16 Feb 2026 10:32:13 -0800
Subject: [PATCH 3/6] Update packages/ui/src/components/bible-widget-view.tsx

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
Signed-off-by: Kyleasmth <45497561+Kyleasmth@users.noreply.github.com>
---
 packages/ui/src/components/bible-widget-view.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/bible-widget-view.tsx b/packages/ui/src/components/bible-widget-view.tsx
index 43872e25..3108128b 100644
--- a/packages/ui/src/components/bible-widget-view.tsx
+++ b/packages/ui/src/components/bible-widget-view.tsx
@@ -67,7 +67,7 @@ export function BibleWidgetView({
       <BibleTextView
         theme={theme}
         fontSize={16}
-        fontFamily={"'Source Serif 4', serif"}
+        fontFamily={SOURCE_SERIF_FONT}
         reference={reference}
         versionId={versionNum}
       />

From 95718ebeec719d68220e4d420b0fd7fd0637d0a8 Mon Sep 17 00:00:00 2001
From: Kyleasmth <45497561+Kyleasmth@users.noreply.github.com>
Date: Mon, 16 Feb 2026 10:32:21 -0800
Subject: [PATCH 4/6] Update
 packages/ui/src/components/bible-reader.stories.tsx

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
Signed-off-by: Kyleasmth <45497561+Kyleasmth@users.noreply.github.com>
---
 packages/ui/src/components/bible-reader.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/bible-reader.stories.tsx b/packages/ui/src/components/bible-reader.stories.tsx
index 744b6d63..4a581694 100644
--- a/packages/ui/src/components/bible-reader.stories.tsx
+++ b/packages/ui/src/components/bible-reader.stories.tsx
@@ -46,7 +46,7 @@ const meta: Meta<typeof BibleReader.Root> = {
     },
     fontFamily: {
       control: 'select',
-      options: [SOURCE_SERIF_FONT, 'Inter', "'Georgia', serif", "'Nunito Sans', sans-serif"],
+      options: [SOURCE_SERIF_FONT, INTER_FONT, "'Georgia', serif", "'Nunito Sans', sans-serif"],
       description: 'Font family',
     },
     showVerseNumbers: {

From 0e90d71c038829e7bb23a0def72d721b2c62ced0 Mon Sep 17 00:00:00 2001
From: Kyleasmth <45497561+Kyleasmth@users.noreply.github.com>
Date: Mon, 16 Feb 2026 10:42:55 -0800
Subject: [PATCH 5/6] add import

---
 packages/ui/src/components/bible-widget-view.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ui/src/components/bible-widget-view.tsx b/packages/ui/src/components/bible-widget-view.tsx
index 3108128b..bce0b69c 100644
--- a/packages/ui/src/components/bible-widget-view.tsx
+++ b/packages/ui/src/components/bible-widget-view.tsx
@@ -4,6 +4,7 @@ import { BibleAppLogoLockup } from './bible-app-logo-lockup';
 import { BibleVersionPicker } from './bible-version-picker';
 import { Button } from './ui/button';
 import { useState } from 'react';
+import { SOURCE_SERIF_FONT } from '@/lib/verse-html-utils';
 
 export type BibleWidgetViewProps = {
   reference: string;

From 45b5dd59501a44208a38100ddf5c5376c3dd5f9e Mon Sep 17 00:00:00 2001
From: Cameron Pak <cameronandrewpak@gmail.com>
Date: Mon, 16 Feb 2026 13:33:14 -0600
Subject: [PATCH 6/6] Fix serif font rendering in Bible reader

This change addresses an issue where the serif font was not displaying
correctly within the Bible reader component.
---
 .changeset/many-apes-find.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/many-apes-find.md

diff --git a/.changeset/many-apes-find.md b/.changeset/many-apes-find.md
new file mode 100644
index 00000000..5e6920ed
--- /dev/null
+++ b/.changeset/many-apes-find.md
@@ -0,0 +1,7 @@
+---
+'@youversion/platform-react-ui': patch
+'@youversion/platform-core': patch
+'@youversion/platform-react-hooks': patch
+---
+
+This change fixes a bug where the serif font failed to render properly in the Bible reader.