YPE-1297 Source Serif font not applying to Bible text body

.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.

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 { INTER_FONT, 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_FONT, "'Georgia', serif", "'Nunito Sans', sans-serif"],
       description: 'Font family',
     },
     showVerseNumbers: {
@@ -127,11 +128,11 @@ 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);
-    await expect(localStorage.getItem('youversion-platform:reader:font-family')).toBe('Inter');
+    await expect(localStorage.getItem('youversion-platform:reader:font-family')).toBe(INTER_FONT);
   },
 };
 
@@ -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

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'
                           : '',
                       )}

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;
@@ -67,7 +68,7 @@ export function BibleWidgetView({
       <BibleTextView
         theme={theme}
         fontSize={16}
-        fontFamily={"'Source Serif Pro', serif"}
+        fontFamily={SOURCE_SERIF_FONT}
         reference={reference}
         versionId={versionNum}
       />

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;

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.
  *

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;
 

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);