From a5839fc7cf982f03cc00a52e27f18bd417796a32 Mon Sep 17 00:00:00 2001
From: VIPIN PAUL <37212471+vipinpaul@users.noreply.github.com>
Date: Mon, 20 Nov 2023 11:23:38 +0530
Subject: [PATCH] Saving font in the backend (#215)

* Saving font for Text editor

* Enabling font selector for reference pane and saving it in the backend

* Saving font for OBS editor and Audio in the backend

* Fixing the conflict
---
 renderer/environment.js                       |   2 +-
 .../EditorPage/ObsEditor/ReferenceObs.js      |   5 +-
 .../Reference/OBS/ObsResourceCard.js          |  27 +--
 .../EditorPage/Reference/OBS/ObsTn.js         |   2 +
 .../EditorPage/Reference/OBS/ObsTwlCard.js    |   2 +
 .../EditorPage/Reference/ReferenceCard.js     |  28 +--
 .../EditorPage/Reference/TranslationHelps.js  |  13 +-
 .../Reference/TranslationHelpsCard.js         |   2 +
 .../components/EditorPage/Scribex/Scribex.jsx | 201 ++++++++++++++++++
 .../EditorPage/TextEditor/EditorMenuBar.jsx   |   4 +-
 .../EditorPage/TextEditor/index.jsx           |   7 +-
 .../createDownloadedResourceSB.js             |   1 +
 renderer/src/components/SnackBar/SnackBar.js  |   2 +-
 .../Sync/Gitea/SyncFromGiteaUtils.js          |  12 +-
 renderer/src/components/Sync/GridRow.jsx      |   2 +-
 .../components/context/ReferenceContext.js    |  11 +
 renderer/src/core/burrito/importBurrito.js    |  12 +-
 .../editor/fetchSettingsResourceHistory.js    |   4 +
 .../editor/saveSettingsResourceHistory.js     |   5 +
 .../src/core/projects/updateAgSettings.js     |  18 +-
 renderer/src/layouts/editor/EditorSection.js  |   2 +-
 .../src/layouts/editor/SectionPlaceholder1.js |  25 ++-
 .../src/layouts/editor/SectionPlaceholder2.js |  20 ++
 renderer/src/modules/editor/Editor.js         |   6 +
 renderer/src/util/createAudioVersification.js |   1 +
 renderer/src/util/createObsContent.js         |   2 +
 renderer/src/util/createVersificationUSFM.js  |   2 +
 27 files changed, 370 insertions(+), 48 deletions(-)
 create mode 100644 renderer/src/components/EditorPage/Scribex/Scribex.jsx

diff --git a/renderer/environment.js b/renderer/environment.js
index 30bdb97fe..f855a8e7b 100644
--- a/renderer/environment.js
+++ b/renderer/environment.js
@@ -2,7 +2,7 @@ export const environment = {
     PROJECT_SETTING_FILE: 'scribe-settings.json',
     USER_SETTING_FILE: 'scribe-user-settings.json',
     production: false,
-    AG_SETTING_VERSION: '1.2.1',
+    AG_SETTING_VERSION: '1.2.2',
     AG_USER_SETTING_VERSION: '1.2.0',
     APPLICATION_ID: 'AutographaEditor',
     JAVASCRIPT_KEY: 'C3925DFBCF06DF5291AC',
diff --git a/renderer/src/components/EditorPage/ObsEditor/ReferenceObs.js b/renderer/src/components/EditorPage/ObsEditor/ReferenceObs.js
index 43fe2b1ac..7c82932b8 100644
--- a/renderer/src/components/EditorPage/ObsEditor/ReferenceObs.js
+++ b/renderer/src/components/EditorPage/ObsEditor/ReferenceObs.js
@@ -17,13 +17,12 @@ const style = {
     fontStyle: 'italic',
   },
 };
-const ReferenceObs = ({ stories }) => {
+const ReferenceObs = ({ stories, font }) => {
   const [isLoading, setIsLoading] = useState(true);
   const [networkState, setNetworkState] = useState({ online: true });
   const {
  state: {
     selectedStory,
-    selectedFont,
     fontSize,
   },
   actions: {
@@ -104,7 +103,7 @@ const { t } = useTranslation();
                   <p
                     className="text-sm text-gray-600 text-justify w-full break-words overflow-hidden"
                     style={{
-                      fontFamily: selectedFont || 'sans-serif',
+                      fontFamily: font || 'sans-serif',
                       fontSize: `${fontSize}rem`,
                       lineHeight: (fontSize > 1.3) ? 1.5 : '',
                     }}
diff --git a/renderer/src/components/EditorPage/Reference/OBS/ObsResourceCard.js b/renderer/src/components/EditorPage/Reference/OBS/ObsResourceCard.js
index 799337d53..5890d1168 100644
--- a/renderer/src/components/EditorPage/Reference/OBS/ObsResourceCard.js
+++ b/renderer/src/components/EditorPage/Reference/OBS/ObsResourceCard.js
@@ -16,6 +16,7 @@ function ObsResourceCard({
   languageId,
   isLoading,
   setIndex,
+  font,
 }) {
   const {
     state: { filters, markdownView },
@@ -35,18 +36,20 @@ function ObsResourceCard({
         itemIndex={index}
         setItemIndex={setIndex}
       />
-      <CardContent
-        item={[]}
-        items={items}
-        filters={filters}
-        markdown={markdown}
-        languageId={languageId}
-        markdownView={markdownView}
-        isLoading={isLoading}
-        selectedQuote={selectedQuote}
-        setQuote={setQuote}
-        viewMode={viewMode}
-      />
+      <div style={{ fontFamily: font || 'sans-serif' }}>
+        <CardContent
+          item={[]}
+          items={items}
+          filters={filters}
+          markdown={markdown}
+          languageId={languageId}
+          markdownView={markdownView}
+          isLoading={isLoading}
+          selectedQuote={selectedQuote}
+          setQuote={setQuote}
+          viewMode={viewMode}
+        />
+      </div>
     </>
   );
 }
diff --git a/renderer/src/components/EditorPage/Reference/OBS/ObsTn.js b/renderer/src/components/EditorPage/Reference/OBS/ObsTn.js
index 41ce41b7d..2899e2f7a 100644
--- a/renderer/src/components/EditorPage/Reference/OBS/ObsTn.js
+++ b/renderer/src/components/EditorPage/Reference/OBS/ObsTn.js
@@ -26,6 +26,7 @@ function ObsTnCard({
   owner,
   resourceId,
   offlineResource,
+  font,
   ...props
 }) {
   const [index, setIndex] = useState(0);
@@ -141,6 +142,7 @@ function ObsTnCard({
         shouldSetQuoteOnClick
         index={index}
         setIndex={(v) => setIndex(v)}
+        font={font}
       />
     ) : <LoadingScreen />
   );
diff --git a/renderer/src/components/EditorPage/Reference/OBS/ObsTwlCard.js b/renderer/src/components/EditorPage/Reference/OBS/ObsTwlCard.js
index b1fc6e096..8c226d1f5 100644
--- a/renderer/src/components/EditorPage/Reference/OBS/ObsTwlCard.js
+++ b/renderer/src/components/EditorPage/Reference/OBS/ObsTwlCard.js
@@ -22,6 +22,7 @@ function ObsTwlCard({
   owner,
   resourceId,
   offlineResource,
+  font,
   ...props
 }) {
   const [index, setIndex] = useState(1);
@@ -102,6 +103,7 @@ function ObsTwlCard({
         shouldSetQuoteOnClick
         index={index}
         setIndex={(v) => setIndex(v)}
+        font={font}
       />
     ) : (
       <LoadingScreen />
diff --git a/renderer/src/components/EditorPage/Reference/ReferenceCard.js b/renderer/src/components/EditorPage/Reference/ReferenceCard.js
index db99b4e57..8efd82418 100644
--- a/renderer/src/components/EditorPage/Reference/ReferenceCard.js
+++ b/renderer/src/components/EditorPage/Reference/ReferenceCard.js
@@ -14,19 +14,23 @@ const ReferenceCard = ({
   setQuote,
   viewMode,
   isLoading,
+  font,
 }) => (
-  <CardContent
-    item={item}
-    items={items}
-    filters={filters}
-    markdown={markdown}
-    languageId={languageId}
-    markdownView={markdownView}
-    isLoading={isLoading}
-    selectedQuote={selectedQuote}
-    setQuote={setQuote}
-    viewMode={viewMode}
-  />
+  <div style={{ fontFamily: font || 'sans-serif' }}>
+    <CardContent
+      item={item}
+      items={items}
+      filters={filters}
+      markdown={markdown}
+      languageId={languageId}
+      markdownView={markdownView}
+      isLoading={isLoading}
+      selectedQuote={selectedQuote}
+      setQuote={setQuote}
+      viewMode={viewMode}
+    />
+  </div>
+
 );
 
 export default ReferenceCard;
diff --git a/renderer/src/components/EditorPage/Reference/TranslationHelps.js b/renderer/src/components/EditorPage/Reference/TranslationHelps.js
index c35f497ec..fcbac2c0f 100644
--- a/renderer/src/components/EditorPage/Reference/TranslationHelps.js
+++ b/renderer/src/components/EditorPage/Reference/TranslationHelps.js
@@ -7,7 +7,7 @@ import ObsTnCard from './OBS/ObsTn';
 import ObsTwlCard from './OBS/ObsTwlCard';
 
 const TranslationHelps = ({
- selectedResource, languageId, refName, bookId, chapter, verse, owner, story, offlineResource,
+ selectedResource, languageId, refName, bookId, chapter, verse, owner, story, offlineResource, font,
 }) => {
   const {
     state: {
@@ -39,6 +39,7 @@ const TranslationHelps = ({
               owner={owner}
               server="https://git.door43.org"
               offlineResource={offlineResource}
+              font={font}
             />
           );
         case 'twl':
@@ -54,6 +55,7 @@ const TranslationHelps = ({
               resourceId="twl"
               owner="test_org"
               server="https://git.door43.org"
+              font={font}
             />
           );
         case 'twlm':
@@ -69,6 +71,7 @@ const TranslationHelps = ({
               resourceId="twl"
               owner={owner}
               server="https://git.door43.org"
+              font={font}
             />
             );
         case 'tq':
@@ -86,6 +89,7 @@ const TranslationHelps = ({
               owner={owner}
               server="https://git.door43.org"
               offlineResource={offlineResource}
+              font={font}
             />
           );
         case 'tw':
@@ -101,6 +105,7 @@ const TranslationHelps = ({
               filePath={offlineResource?.twSelected?.folder}
               server="https://git.door43.org"
               offlineResource={offlineResource}
+              font={font}
             />
             );
         case 'ta':
@@ -117,6 +122,7 @@ const TranslationHelps = ({
               filePath={filePathTa}
               server="https://git.door43.org"
               offlineResource={offlineResource}
+              font={font}
             />
             );
         case 'bible':
@@ -128,6 +134,7 @@ const TranslationHelps = ({
               bookId={bookId}
               chapter={chapter}
               verse={verse}
+              font={font}
             />
           );
         case 'obs':
@@ -139,6 +146,7 @@ const TranslationHelps = ({
               bookId={bookId}
               chapter={chapter}
               verse={verse}
+              font={font}
             />
           );
         case 'obs-tn':
@@ -154,6 +162,7 @@ const TranslationHelps = ({
               owner={owner}
               server="https://git.door43.org"
               offlineResource={offlineResource}
+              font={font}
             />
           );
         case 'obs-tq':
@@ -169,6 +178,7 @@ const TranslationHelps = ({
               owner={owner}
               server="https://git.door43.org"
               offlineResource={offlineResource}
+              font={font}
             />
           );
           case 'obs-twlm':
@@ -184,6 +194,7 @@ const TranslationHelps = ({
               owner={owner}
               server="https://git.door43.org"
               offlineResource={offlineResource}
+              font={font}
             />
           );
         default:
diff --git a/renderer/src/components/EditorPage/Reference/TranslationHelpsCard.js b/renderer/src/components/EditorPage/Reference/TranslationHelpsCard.js
index aa0b49d4a..fd6c18090 100644
--- a/renderer/src/components/EditorPage/Reference/TranslationHelpsCard.js
+++ b/renderer/src/components/EditorPage/Reference/TranslationHelpsCard.js
@@ -25,6 +25,7 @@ export default function TranslationHelpsCard({
   selectedQuote,
   viewMode,
   offlineResource,
+  font,
 }) {
   const [offlineItems, setOfflineItems] = useState([]);
   const [offlineItemsDisable, setOfflineItemsDisable] = useState(false);
@@ -182,6 +183,7 @@ export default function TranslationHelpsCard({
         viewMode={viewMode}
         selectedQuote={selectedQuote}
         setQuote={setQuote}
+        font={font}
       />
     </>
   );
diff --git a/renderer/src/components/EditorPage/Scribex/Scribex.jsx b/renderer/src/components/EditorPage/Scribex/Scribex.jsx
new file mode 100644
index 000000000..d410f6254
--- /dev/null
+++ b/renderer/src/components/EditorPage/Scribex/Scribex.jsx
@@ -0,0 +1,201 @@
+import {
+  useEffect, useState, useContext, Fragment,
+} from 'react';
+import { useProskomma, useImport, useCatalog } from 'proskomma-react-hooks';
+import { useDeepCompareEffect } from 'use-deep-compare';
+import { LockClosedIcon, BookmarkIcon, LockOpenIcon } from '@heroicons/react/24/outline';
+import BibleNavigationX from '@/modules/biblenavigation/BibleNavigationX';
+import usePerf from '@/components/hooks/scribex/usePerf';
+import htmlMap from '@/components/hooks/scribex/htmlmap';
+import { ScribexContext } from '@/components/context/ScribexContext';
+import { ReferenceContext } from '@/components/context/ReferenceContext';
+import { ProjectContext } from '@/components/context/ProjectContext';
+import EditorSideBar from '@/modules/editorsidebar/EditorSideBar';
+import MenuDropdown from '@/components/MenuDropdown/MenuDropdown';
+import Buttons from './Buttons';
+import Editor from './Editor';
+import InsertMenu from './InsertMenu';
+
+export default function Scribex(props) {
+  const { state, actions } = useContext(ScribexContext);
+  const { verbose } = state;
+  const { usfmData, bookAvailable } = props;
+  const [selectedBook, setSelectedBook] = useState();
+  const [bookChange, setBookChange] = useState(false);
+  const [chapterNumber, setChapterNumber] = useState(1);
+  const [verseNumber, setVerseNumber] = useState(1);
+  const [triggerVerseInsert, setTriggerVerseInsert] = useState(false);
+  const [newVerChapNumber, setInsertNumber] = useState('');
+  const [insertVerseRChapter, setInsertVerseRChapter] = useState('');
+  const [selectedText, setSelectedText] = useState();
+
+  const handleClick = (number, title) => {
+    setInsertNumber(number);
+    setInsertVerseRChapter(title);
+    setTriggerVerseInsert(!triggerVerseInsert);
+  };
+
+  let selectedDocument;
+
+  const { proskomma, stateId, newStateId } = useProskomma({ verbose });
+  const { done } = useImport({
+    proskomma,
+    stateId,
+    newStateId,
+    documents: usfmData,
+  });
+
+  const {
+    state: {
+      bookId, selectedFont, fontSize, projectScriptureDir,
+    },
+    actions: { handleSelectedFont },
+  } = useContext(ReferenceContext);
+
+  const {
+    states: { scrollLock },
+    actions: { setScrollLock },
+  } = useContext(ProjectContext);
+
+  const {
+    states: { openSideBar },
+    actions: { setOpenSideBar },
+  } = useContext(ProjectContext);
+
+  function closeSideBar(open) {
+    setOpenSideBar(open);
+  }
+
+  useEffect(() => {
+    setSelectedBook(bookId.toUpperCase());
+    setBookChange(true);
+  }, [bookId]);
+
+  const { catalog } = useCatalog({ proskomma, stateId, verbose });
+  const { id: docSetId, documents } = (done && catalog.docSets[0]) || {};
+  if (done) {
+    selectedDocument = documents?.find(
+      (doc) => doc.bookCode === selectedBook,
+    );
+  }
+
+  const { bookCode, h: bookName } = selectedDocument || {};
+  const ready = (docSetId && bookCode) || false;
+  const isLoading = !done || !ready;
+  const { state: perfState, actions: perfActions } = usePerf({
+    proskomma,
+    ready,
+    docSetId,
+    bookCode,
+    verbose,
+    htmlMap,
+  });
+  const { htmlPerf } = perfState;
+
+  useDeepCompareEffect(() => {
+    if (htmlPerf && htmlPerf.mainSequenceId !== state.sequenceIds[0]) {
+      actions.setSequenceIds([htmlPerf?.mainSequenceId]);
+    }
+  }, [htmlPerf, state.sequenceIds, perfState]);
+  const _props = {
+    ...state,
+    ...perfState,
+    ...actions,
+    ...perfActions,
+    triggerVerseInsert,
+    chapterNumber,
+    verseNumber,
+    isLoading,
+    bookName,
+    bookChange,
+    bookAvailable,
+    setBookChange,
+    setChapterNumber,
+    setVerseNumber,
+    newVerChapNumber,
+    insertVerseRChapter,
+    selectedText,
+    setSelectedText,
+  };
+  return (
+    <>
+      <EditorSideBar
+        isOpen={openSideBar}
+        closeSideBar={closeSideBar}
+        graftProps={_props}
+      />
+      <div className="flex flex-col bg-white border-b-2 border-secondary h-editor rounded-md shadow scrollbar-width">
+        <div className="relative min-h-[66px] flex flex-col bg-secondary rounded-t-md overflow-hidden">
+          <div className="flex min-h-[33px] items-center justify-between ">
+            <BibleNavigationX
+              chapterNumber={chapterNumber}
+              setChapterNumber={setChapterNumber}
+              verseNumber={verseNumber}
+              setVerseNumber={setVerseNumber}
+            />
+            <div
+              aria-label="editor-pane"
+              className="flex flex-1 justify-center text-white text-xxs uppercase tracking-wider font-bold leading-3 truncate"
+            >
+              Editor
+            </div>
+            <div
+              title="navigation lock/unlock"
+              className="flex items-center mr-auto"
+            >
+              <div>
+                {scrollLock === true ? (
+                  <LockOpenIcon
+                    aria-label="open-lock"
+                    className="h-6 mr-2 w-6 text-white cursor-pointer"
+                    aria-hidden="true"
+                    onClick={() => setScrollLock(!scrollLock)}
+                  />
+                ) : (
+                  <LockClosedIcon
+                    aria-label="close-lock"
+                    className="h-5 mr-3 w-5 text-white cursor-pointer"
+                    aria-hidden="true"
+                    onClick={() => setScrollLock(!scrollLock)}
+                  />
+                )}
+              </div>
+              <div
+                role="button"
+                tabIndex="0"
+                title="bookmark"
+                className="focus:outline-none border-r-2 border-l-2 border-white border-opacity-10"
+              >
+                <BookmarkIcon
+                  className="h-5 mr-4 w-5 text-white cursor-pointer"
+                  aria-hidden="true"
+                />
+              </div>
+            </div>
+          </div>
+          <div className="mx-2.5 min-h-[33px] flex items-center justify-center">
+            <div className="flex items-center">
+              <Buttons {..._props} />
+            </div>
+            <div className="flex ml-auto">
+              <MenuDropdown selectedFont={selectedFont || 'sans-serif'} setSelectedFont={handleSelectedFont} buttonStyle="h-6 mr-2 w-6 text-white cursor-pointer" />
+              <InsertMenu handleClick={handleClick} selectedText={selectedText} />
+            </div>
+          </div>
+        </div>
+
+        <div
+          style={{
+            fontFamily: selectedFont || 'sans-serif',
+            fontSize: `${fontSize}rem`,
+            lineHeight: (fontSize > 1.3) ? 1.5 : '',
+            direction: `${projectScriptureDir === 'RTL' ? 'rtl' : 'auto'}`,
+          }}
+          className="border-l-2 border-r-2 border-secondary pb-16 overflow-auto h-full scrollbars-width leading-8"
+        >
+          <Editor {..._props} />
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/renderer/src/components/EditorPage/TextEditor/EditorMenuBar.jsx b/renderer/src/components/EditorPage/TextEditor/EditorMenuBar.jsx
index a6cb2478e..6cbaf96b7 100644
--- a/renderer/src/components/EditorPage/TextEditor/EditorMenuBar.jsx
+++ b/renderer/src/components/EditorPage/TextEditor/EditorMenuBar.jsx
@@ -15,7 +15,7 @@ export default function EditorMenuBar(props) {
     setChapterNumber,
     verseNumber,
     setVerseNumber,
-    setSelectedFont,
+    handleSelectedFont,
     setTriggerVerseInsert,
   } = props;
 
@@ -78,7 +78,7 @@ export default function EditorMenuBar(props) {
           <Buttons {...props} />
         </div>
         <div className="flex ml-auto">
-          <MenuDropdown selectedFont={selectedFont} setSelectedFont={setSelectedFont} buttonStyle="button text-gray-200 bg-primary-500 hover:bg-primary-500/90 text-highlight-300 gap-1" />
+          <MenuDropdown selectedFont={selectedFont || 'sans-serif'} setSelectedFont={handleSelectedFont} buttonStyle="button text-gray-200 bg-primary-500 hover:bg-primary-500/90 text-highlight-300 gap-1" />
           <InsertMenu setTriggerVerseInsert={setTriggerVerseInsert} />
         </div>
       </div>
diff --git a/renderer/src/components/EditorPage/TextEditor/index.jsx b/renderer/src/components/EditorPage/TextEditor/index.jsx
index 797c9d875..954ad361a 100644
--- a/renderer/src/components/EditorPage/TextEditor/index.jsx
+++ b/renderer/src/components/EditorPage/TextEditor/index.jsx
@@ -28,8 +28,8 @@ export default function TextEditor() {
   const { usfmData, bookAvailable } = useReadUsfmFile();
 
   const {
-    state: { bookId },
-    actions: { setSelectedFont },
+    state: { bookId, selectedFont },
+    actions: { handleSelectedFont },
   } = useContext(ReferenceContext);
 
   const {
@@ -88,6 +88,7 @@ export default function TextEditor() {
     ...perfState,
     ...actions,
     ...perfActions,
+    selectedFont,
     chapterNumber,
     verseNumber,
     isLoading,
@@ -97,7 +98,7 @@ export default function TextEditor() {
     setBookChange,
     setChapterNumber,
     setVerseNumber,
-    setSelectedFont,
+    handleSelectedFont,
     triggerVerseInsert,
     setTriggerVerseInsert,
   };
diff --git a/renderer/src/components/Resources/ResourceUtils/createDownloadedResourceSB.js b/renderer/src/components/Resources/ResourceUtils/createDownloadedResourceSB.js
index b80746412..70c1f07c4 100644
--- a/renderer/src/components/Resources/ResourceUtils/createDownloadedResourceSB.js
+++ b/renderer/src/components/Resources/ResourceUtils/createDownloadedResourceSB.js
@@ -140,6 +140,7 @@ export const generateAgSettings = async (metaData, currentResourceMeta, selectRe
           lastSeen: moment().format(),
           refResources: [],
           bookMarks: [],
+          font: '',
         },
       },
       sync: { services: { door43: [] } },
diff --git a/renderer/src/components/SnackBar/SnackBar.js b/renderer/src/components/SnackBar/SnackBar.js
index 7fd91db13..78ed8f29e 100644
--- a/renderer/src/components/SnackBar/SnackBar.js
+++ b/renderer/src/components/SnackBar/SnackBar.js
@@ -58,7 +58,7 @@ const SnackBar = ({
         leaveTo="opacity-0 translate-y-1"
       >
         <Popover.Panel className="transform transition-all p-4">
-          <div className="relative p-5 mt-5 bg-validation rounded-lg text-sm font-semibold text-gray-600" style={{ backgroundColor: colors[error] }}>
+          <div className="relative p-5 mt-5 bg-validation rounded-lg text-sm font-semibold text-gray-600" style={{ fontFamily: 'sans-serif', backgroundColor: colors[error] }}>
             <button
               type="button"
               className="bg-black absolute top-0 right-0 h-6 w-6 rounded-full text-center text-white p-1 -mt-2 -mr-2 focus:outline-none"
diff --git a/renderer/src/components/Sync/Gitea/SyncFromGiteaUtils.js b/renderer/src/components/Sync/Gitea/SyncFromGiteaUtils.js
index c9c06a23e..df6177a3d 100644
--- a/renderer/src/components/Sync/Gitea/SyncFromGiteaUtils.js
+++ b/renderer/src/components/Sync/Gitea/SyncFromGiteaUtils.js
@@ -53,6 +53,7 @@ async function createOrUpdateAgSettings(sbDataObject, currentUser, projectName,
           lastSeen: moment().format(),
           refResources: [],
           bookMarks: [],
+          font: '',
         },
       },
       sync: { services: { door43: [] } },
@@ -87,9 +88,14 @@ async function createOrUpdateAgSettings(sbDataObject, currentUser, projectName,
       // setting.sync.services.door43 = setting?.sync?.services?.door43 ? setting?.sync?.services?.door43 : [];
       if (!setting.sync && !setting.sync?.services) {
         setting.sync = { services: { door43: [] } };
-        } else {
-          setting.sync.services.door43 = setting?.sync?.services?.door43 ? setting?.sync?.services?.door43 : [];
-        }
+      } else {
+        setting.sync.services.door43 = setting?.sync?.services?.door43 ? setting?.sync?.services?.door43 : [];
+      }
+      if (!setting.font) {
+        setting.project[sbDataObject.type.flavorType.flavor.name].font = '';
+      } else {
+        setting.project[sbDataObject.type.flavorType.flavor.name].font = (setting.project[sbDataObject.type.flavorType.flavor.name].font) ? (setting.project[sbDataObject.type.flavorType.flavor.name].font) : '';
+      }
       settings = setting;
     }
     settings.project[sbDataObject.type.flavorType.flavor.name].lastSeen = moment().format();
diff --git a/renderer/src/components/Sync/GridRow.jsx b/renderer/src/components/Sync/GridRow.jsx
index 00dab2300..1d3c36bd4 100644
--- a/renderer/src/components/Sync/GridRow.jsx
+++ b/renderer/src/components/Sync/GridRow.jsx
@@ -16,7 +16,7 @@ function GridRow({
         <span
           className={classNames(
             selected ? 'text-primary' : 'text-gray-800',
-            'capitalize w-full flex items-center gap-5',
+            'w-full flex items-center gap-5',
           )}
         >
           <FolderIcon className="w-4 h-4" />
diff --git a/renderer/src/components/context/ReferenceContext.js b/renderer/src/components/context/ReferenceContext.js
index c9a747acc..22a1183aa 100644
--- a/renderer/src/components/context/ReferenceContext.js
+++ b/renderer/src/components/context/ReferenceContext.js
@@ -7,6 +7,7 @@ import PropTypes from 'prop-types';
 
 import * as localforage from 'localforage';
 import { splitStringByLastOccurance } from '@/util/splitStringByLastMarker';
+import { saveReferenceResource } from '@/core/projects/updateAgSettings';
 import { isElectron } from '../../core/handleElectron';
 import * as logger from '../../logger';
 import packageInfo from '../../../../package.json';
@@ -83,6 +84,12 @@ export default function ReferenceContextProvider({ children }) {
       setFolderPath(chosenFolder.filePaths[0]);
     }
   };
+  const handleSelectedFont = async (font) => {
+    if (isElectron()) {
+      saveReferenceResource(font);
+      setSelectedFont(font);
+    }
+  };
 
   useEffect(() => {
     localforage.getItem('currentProject').then(async (projectName) => {
@@ -100,15 +107,18 @@ export default function ReferenceContextProvider({ children }) {
                       case 'textTranslation':
                         setBookmarksVerses(resources.project?.textTranslation.bookMarks);
                         setProjectScriptureDir(resources.project?.textTranslation?.scriptDirection?.toUpperCase());
+                        setSelectedFont(resources.project?.textTranslation?.font);
                         break;
                       case 'textStories':
                         setBookmarksVerses(resources.project?.textStories.bookMarks);
                         setProjectScriptureDir(resources.project?.textStories?.scriptDirection?.toUpperCase());
                         setObsNavigation(resources.project?.textStories.navigation ? resources.project?.textStories.navigation : '1');
+                        setSelectedFont(resources.project?.textStories?.font);
                         break;
                       case 'audioTranslation':
                         setBookmarksVerses(resources.project?.audioTranslation.bookMarks);
                         setProjectScriptureDir(resources.project?.audioTranslation?.scriptDirection?.toUpperCase());
+                        setSelectedFont(resources.project?.audioTranslation?.font);
                         break;
                       default:
                         break;
@@ -229,6 +239,7 @@ export default function ReferenceContextProvider({ children }) {
       setOpenResource4,
       setOpenResourcePopUp,
       setSelectedFont,
+      handleSelectedFont,
       setFont1,
       setFont2,
       setFont3,
diff --git a/renderer/src/core/burrito/importBurrito.js b/renderer/src/core/burrito/importBurrito.js
index c0a58244e..50d0d565c 100644
--- a/renderer/src/core/burrito/importBurrito.js
+++ b/renderer/src/core/burrito/importBurrito.js
@@ -351,6 +351,7 @@ const importBurrito = async (filePath, currentUser, updateBurritoVersion, concat
               lastSeen: moment().format(),
               refResources: [],
               bookMarks: [],
+              font: '',
             },
           },
           sync: { services: { door43: [] } },
@@ -385,9 +386,14 @@ const importBurrito = async (filePath, currentUser, updateBurritoVersion, concat
           // setting.sync.services.door43 = setting?.sync?.services?.door43 ? setting?.sync?.services?.door43 : [];
           if (!setting.sync && !setting.sync?.services) {
             setting.sync = { services: { door43: [] } };
-            } else {
-              setting.sync.services.door43 = setting?.sync?.services?.door43 ? setting?.sync?.services?.door43 : [];
-            }
+          } else {
+            setting.sync.services.door43 = setting?.sync?.services?.door43 ? setting?.sync?.services?.door43 : [];
+          }
+          if (!setting.project[metadata.type.flavorType.flavor.name].font) {
+            setting.project[metadata.type.flavorType.flavor.name].font = '';
+          } else {
+            setting.font = (setting.project[metadata.type.flavorType.flavor.name].font) ? (setting.project[metadata.type.flavorType.flavor.name].font) : '';
+          }
           settings = setting;
         }
         settings.project[metadata.type.flavorType.flavor.name].lastSeen = moment().format();
diff --git a/renderer/src/core/editor/fetchSettingsResourceHistory.js b/renderer/src/core/editor/fetchSettingsResourceHistory.js
index 20204c067..d6bc8d23e 100644
--- a/renderer/src/core/editor/fetchSettingsResourceHistory.js
+++ b/renderer/src/core/editor/fetchSettingsResourceHistory.js
@@ -115,6 +115,7 @@ export async function fetchSettingsResourceHistory(
                                   header: '',
                                   owner: '',
                                   offlineResource: { offline: false },
+                                  font: '',
                                 }
                                 ));
                               } else if (_columnnum === historyColumn && _rownum === '2') {
@@ -132,6 +133,7 @@ export async function fetchSettingsResourceHistory(
                                   header: '',
                                   owner: '',
                                   offlineResource: { offline: false },
+                                  font: '',
                                 }
                                 ));
                               }
@@ -155,6 +157,7 @@ export async function fetchSettingsResourceHistory(
                             header: _value?.name,
                             owner: _value?.owner,
                             offlineResource: _value?.offline,
+                            font: _value?.font,
                           });
                       }
                       if (_rownum === '2') {
@@ -166,6 +169,7 @@ export async function fetchSettingsResourceHistory(
                             header: _value?.name,
                             owner: _value?.owner,
                             offlineResource: _value?.offline,
+                            font: _value?.font,
                           });
                       }
                   },
diff --git a/renderer/src/core/editor/saveSettingsResourceHistory.js b/renderer/src/core/editor/saveSettingsResourceHistory.js
index e3b26b060..f8d690a6c 100644
--- a/renderer/src/core/editor/saveSettingsResourceHistory.js
+++ b/renderer/src/core/editor/saveSettingsResourceHistory.js
@@ -69,6 +69,7 @@ export async function saveSettingsResourceHistory(
                       header: referenceColumnData2?.header,
                       owner: referenceColumnData2?.owner,
                       offlineResource: referenceColumnData2.offlineResource,
+                      font: referenceColumnData2?.font,
                     }
                     ));
                     setReferenceColumnData2((prev) => ({
@@ -79,6 +80,7 @@ export async function saveSettingsResourceHistory(
                       header: '',
                       owner: '',
                       offlineResource: { offline: false },
+                      font: '',
                     }
                     ));
                     setOpenResourceR1(false);
@@ -92,6 +94,7 @@ export async function saveSettingsResourceHistory(
                         owner: referenceToUse?.owner,
                         navigation: { book: '1TI', chapter: '1' },
                         offline: referenceToUse.offlineResource,
+                        font: referenceToUse?.font,
                       },
                     };
                 }
@@ -107,6 +110,7 @@ export async function saveSettingsResourceHistory(
                       owner: referenceColumnData1?.owner,
                       navigation: { book: '1TI', chapter: '1' },
                       offline: referenceColumnData1.offlineResource,
+                      font: referenceColumnData1?.font,
                     },
                     2: {
                       resouceId: referenceColumnData2?.selectedResource,
@@ -115,6 +119,7 @@ export async function saveSettingsResourceHistory(
                       owner: referenceColumnData2?.owner,
                       navigation: { book: '1TI', chapter: '1' },
                       offline: referenceColumnData2.offlineResource,
+                      font: referenceColumnData2?.font,
                     },
                   };
                 }
diff --git a/renderer/src/core/projects/updateAgSettings.js b/renderer/src/core/projects/updateAgSettings.js
index 9c0f4ee73..42894c9c3 100644
--- a/renderer/src/core/projects/updateAgSettings.js
+++ b/renderer/src/core/projects/updateAgSettings.js
@@ -12,7 +12,7 @@ import {
 //   const newPath = require('../../../../supabase').newPath
 // }
 
-export const updateAgSettings = async (username, projectName, data) => {
+export const updateAgSettings = async (username, projectName, data, font) => {
   logger.debug('updateAgSettings.js', 'In updateAgSettings');
   const newpath = localStorage.getItem('userPath');
   const fs = window.require('fs');
@@ -28,8 +28,13 @@ export const updateAgSettings = async (username, projectName, data) => {
     } else {
       setting.sync.services.door43 = setting?.sync?.services?.door43 ? setting?.sync?.services?.door43 : [];
     }
+    if (!setting.project[data.type.flavorType.flavor.name].font) {
+      setting.project[data.type.flavorType.flavor.name].font = font || '';
+    } else {
+      setting.project[data.type.flavorType.flavor.name].font = font || setting.project[data.type.flavorType.flavor.name].font;
+    }
   }
-  setting.project[data.type.flavorType.flavor.name] = data.project[data.type.flavorType.flavor.name];
+  setting.project[data.type.flavorType.flavor.name].refResources = data.project[data.type.flavorType.flavor.name].refResources;
   logger.debug('updateAgSettings.js', `Updating the ${environment.PROJECT_SETTING_FILE}`);
   await fs.writeFileSync(folder, JSON.stringify(setting));
 };
@@ -47,6 +52,11 @@ export const updateWebAgSettings = async (username, projectName, data) => {
     } else {
       setting.sync.services.door43 = setting?.sync?.services?.door43 ? setting?.sync?.services?.door43 : [];
     }
+    if (!setting.project[data.type.flavorType.flavor.name].font) {
+      setting.project[data.type.flavorType.flavor.name].font = '';
+    } else {
+      setting.project[data.type.flavorType.flavor.name].font = (setting.project[data.type.flavorType.flavor.name].font) ? (setting.project[data.type.flavorType.flavor.name].font) : '';
+    }
   }
   setting.project[data.type.flavorType.flavor.name] = data.project[data.type.flavorType.flavor.name];
   await sbStorageUpload(folder, JSON.stringify(setting), {
@@ -55,7 +65,7 @@ export const updateWebAgSettings = async (username, projectName, data) => {
   });
 };
 
-export const saveReferenceResource = () => {
+export const saveReferenceResource = (font = '') => {
   logger.debug('updateAgSettings.js', 'In saveReferenceResource for saving the reference data');
   localforage.getItem('currentProject').then(async (projectName) => {
     const _projectname = await splitStringByLastOccurance(projectName, '_');
@@ -69,7 +79,7 @@ export const saveReferenceResource = () => {
               if (id[0] === _projectname[1]) {
                 localforage.getItem('userProfile').then(async (value) => {
                   if (isElectron()) {
-                    await updateAgSettings(value?.username, projectName, resources);
+                    await updateAgSettings(value?.username, projectName, resources, font);
                   } else {
                     await updateWebAgSettings(value?.user?.email, projectName, resources);
                   }
diff --git a/renderer/src/layouts/editor/EditorSection.js b/renderer/src/layouts/editor/EditorSection.js
index ec3fb6193..0632a539d 100644
--- a/renderer/src/layouts/editor/EditorSection.js
+++ b/renderer/src/layouts/editor/EditorSection.js
@@ -250,7 +250,7 @@ export default function EditorSection({
               )}
               <div className="flex bg-gray-300 absolute h-full -right-0 rounded-tr  group-hover:visible ">
                 <MenuDropdown
-                  selectedFont={font}
+                  selectedFont={font || 'sans-serif'}
                   setSelectedFont={setFont}
                 />
                 <button
diff --git a/renderer/src/layouts/editor/SectionPlaceholder1.js b/renderer/src/layouts/editor/SectionPlaceholder1.js
index c4e0d70e4..664cccf74 100644
--- a/renderer/src/layouts/editor/SectionPlaceholder1.js
+++ b/renderer/src/layouts/editor/SectionPlaceholder1.js
@@ -40,6 +40,7 @@ const SectionPlaceholder1 = ({ editor }) => {
     header: '',
     owner: '',
     offlineResource: { offline: false },
+    font: '',
   });
   const [referenceColumnOneData2, setReferenceColumnOneData2] = useState({
     languageId: '',
@@ -48,6 +49,7 @@ const SectionPlaceholder1 = ({ editor }) => {
     header: '',
     owner: '',
     offlineResource: { offline: false },
+    font: '',
   });
   const [loadResource1, setLoadResource1] = useState(false);
   const [loadResource2, setLoadResource2] = useState(false);
@@ -132,6 +134,7 @@ const SectionPlaceholder1 = ({ editor }) => {
         header: '',
         owner: '',
         offlineResource: { offline: false },
+        font: '',
       }
       ));
       setResetResourceOnDeleteOffline((prev) => ({
@@ -152,6 +155,7 @@ const SectionPlaceholder1 = ({ editor }) => {
         header: '',
         owner: '',
         offlineResource: { offline: false },
+        font: '',
       }
       ));
       setResetResourceOnDeleteOffline((prev) => ({
@@ -224,7 +228,8 @@ const SectionPlaceholder1 = ({ editor }) => {
     referenceColumnOneData1?.selectedResource, referenceColumnOneData2?.languageId, referenceColumnOneData2?.refName,
     referenceColumnOneData2?.selectedResource, sectionNum, layout,
     referenceColumnOneData2?.owner, removingSection, addingSection, referenceColumnOneData2?.offlineResource,
-    referenceColumnOneData1?.offlineResource, resetResourceOnDeleteOffline?.referenceColumnOneData1Reset,
+    referenceColumnOneData1?.offlineResource, referenceColumnOneData2?.font,
+    referenceColumnOneData1?.font, resetResourceOnDeleteOffline?.referenceColumnOneData1Reset,
     resetResourceOnDeleteOffline?.referenceColumnOneData2Reset, referenceColumnOneData2, referenceColumnOneData1]);
 
   // referenceColumnOneData2 referenceColumnOneData1
@@ -280,8 +285,20 @@ const SectionPlaceholder1 = ({ editor }) => {
       // }
     };
     readObs();
+    if (referenceColumnOneData1?.font) {
+      setFont1(referenceColumnOneData1.font);
+    }
+    if (referenceColumnOneData2.font) {
+      setFont2(referenceColumnOneData2?.font);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [_obsNavigation1, _obsNavigation2, referenceColumnOneData1, referenceColumnOneData2]);
 
+  useEffect(() => {
+    setReferenceColumnOneData1((prev) => ({ ...prev, font: font1 }));
+    setReferenceColumnOneData2((prev) => ({ ...prev, font: font2 }));
+  }, [font1, font2]);
+
   return (
     <>
       {(layout > 0 && layout <= 2) && (
@@ -335,6 +352,7 @@ const SectionPlaceholder1 = ({ editor }) => {
                           && (
                             <ReferenceObs
                               stories={stories1}
+                              font={font1}
                             />
                           )}
                       </>
@@ -345,6 +363,7 @@ const SectionPlaceholder1 = ({ editor }) => {
                         bookId={_bookId1}
                         chapter={_chapter1}
                         verse={_verse1}
+                        font={font1}
                       />
                     )) || (
                     <TranslationHelps
@@ -356,6 +375,7 @@ const SectionPlaceholder1 = ({ editor }) => {
                       verse={_verse1}
                       story={_obsNavigation1}
                       offlineResource={referenceColumnOneData1.offlineResource}
+                      font={font1}
                     />
                       )
                     )
@@ -409,6 +429,7 @@ const SectionPlaceholder1 = ({ editor }) => {
                           && (
                             <ReferenceObs
                               stories={stories2}
+                              font={font2}
                             />
                           )}
                       </>
@@ -419,6 +440,7 @@ const SectionPlaceholder1 = ({ editor }) => {
                         bookId={_bookId1}
                         chapter={_chapter1}
                         verse={_verse1}
+                        font={font2}
                       />
                     )) || (
                     <TranslationHelps
@@ -430,6 +452,7 @@ const SectionPlaceholder1 = ({ editor }) => {
                       verse={_verse2}
                       story={_obsNavigation2}
                       offlineResource={referenceColumnOneData2.offlineResource}
+                      font={font2}
                     />
                       )
                     )
diff --git a/renderer/src/layouts/editor/SectionPlaceholder2.js b/renderer/src/layouts/editor/SectionPlaceholder2.js
index d2acd8806..e8aa9c789 100644
--- a/renderer/src/layouts/editor/SectionPlaceholder2.js
+++ b/renderer/src/layouts/editor/SectionPlaceholder2.js
@@ -127,6 +127,7 @@ const SectionPlaceholder2 = ({ editor }) => {
         header: '',
         owner: '',
         offlineResource: { offline: false },
+        font: '',
       }
       ));
       setResetResourceOnDeleteOffline((prev) => ({
@@ -145,6 +146,7 @@ const SectionPlaceholder2 = ({ editor }) => {
         header: '',
         owner: '',
         offlineResource: { offline: false },
+        font: '',
       }
       ));
       setResetResourceOnDeleteOffline((prev) => ({
@@ -230,6 +232,7 @@ const SectionPlaceholder2 = ({ editor }) => {
     referenceColumnTwoData2?.refName, referenceColumnTwoData2?.selectedResource, sectionNum, layout,
     referenceColumnTwoData1?.owner, referenceColumnTwoData2?.owner, removingSection, addingSection,
     referenceColumnTwoData1.offlineResource, referenceColumnTwoData2.offlineResource,
+    referenceColumnTwoData1.font, referenceColumnTwoData2.font,
     resetResourceOnDeleteOffline?.referenceColumnTwoData1Reset, resetResourceOnDeleteOffline?.referenceColumnTwoData2Reset,
   ]);
 
@@ -280,7 +283,20 @@ const SectionPlaceholder2 = ({ editor }) => {
         setStories2(core(fs, _obsNavigation2, referenceColumnTwoData2.refName, user.username));
       }
     });
+    if (referenceColumnTwoData1?.font) {
+      setFont3(referenceColumnTwoData1.font);
+    }
+    if (referenceColumnTwoData2.font) {
+      setFont4(referenceColumnTwoData2?.font);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [_obsNavigation1, _obsNavigation2, referenceColumnTwoData1, referenceColumnTwoData2]);
+
+  useEffect(() => {
+    setReferenceColumnTwoData1((prev) => ({ ...prev, font: font3 }));
+    setReferenceColumnTwoData2((prev) => ({ ...prev, font: font4 }));
+  }, [font3, font4]);
+
   return (
     <>
       {((openResource1 === true && openResource2 === true)
@@ -346,6 +362,7 @@ const SectionPlaceholder2 = ({ editor }) => {
                           bookId={_bookId1}
                           chapter={_chapter1}
                           verse={_verse1}
+                          font={font3}
                         />
                       )) || (
                       <TranslationHelps
@@ -357,6 +374,7 @@ const SectionPlaceholder2 = ({ editor }) => {
                         verse={_verse1}
                         story={_obsNavigation1}
                         offlineResource={referenceColumnTwoData1.offlineResource}
+                        font={font3}
                       />
                         )
                       )
@@ -421,6 +439,7 @@ const SectionPlaceholder2 = ({ editor }) => {
                           bookId={_bookId1}
                           chapter={_chapter1}
                           verse={_verse1}
+                          font={font4}
                         />
                       )) || (
                       <TranslationHelps
@@ -432,6 +451,7 @@ const SectionPlaceholder2 = ({ editor }) => {
                         verse={_verse2}
                         story={_obsNavigation2}
                         offlineResource={referenceColumnTwoData2.offlineResource}
+                        font={font4}
                       />
                         )
                       )
diff --git a/renderer/src/modules/editor/Editor.js b/renderer/src/modules/editor/Editor.js
index cbc1351a9..f02159a84 100644
--- a/renderer/src/modules/editor/Editor.js
+++ b/renderer/src/modules/editor/Editor.js
@@ -15,6 +15,7 @@ import BibleNavigation from '@/modules/biblenavigation/BibleNavigation';
 import { ReferenceContext } from '@/components/context/ReferenceContext';
 import { ProjectContext } from '@/components/context/ProjectContext';
 import { splitStringByLastOccurance } from '@/util/splitStringByLastMarker';
+import MenuDropdown from '@/components/MenuDropdown/MenuDropdown';
 import * as logger from '../../logger';
 
 export default function Editor({
@@ -41,6 +42,7 @@ export default function Editor({
     actions: {
       setBookmarksVerses,
       setObsNavigation,
+      handleSelectedFont,
     },
   } = useContext(ReferenceContext);
   const [bookMarked, setBookMarks] = useState(false);
@@ -146,6 +148,10 @@ export default function Editor({
         <div aria-label="editor-pane" className="h-4 flex flex-1 justify-center text-white text-xxs uppercase tracking-wider font-bold leading-3 truncate">
           {t('label-editor-pane')}
         </div>
+        <div className="flex ml-auto">
+          <MenuDropdown selectedFont={selectedFont || 'sans-serif'} setSelectedFont={handleSelectedFont} buttonStyle="h-6 mr-2 w-6 text-white cursor-pointer" />
+          {/* <InsertMenu handleClick={handleClick} selectedText={selectedText} /> */}
+        </div>
         <div title={t('tooltip-editor-lock')} className="flex items-center">
           {scrollLock === true ? (
             <div>
diff --git a/renderer/src/util/createAudioVersification.js b/renderer/src/util/createAudioVersification.js
index 9f4dff438..5c59234b8 100644
--- a/renderer/src/util/createAudioVersification.js
+++ b/renderer/src/util/createAudioVersification.js
@@ -76,6 +76,7 @@ export const createAudioVersification = (
               lastSeen: moment().format(),
               refResources: call === 'edit' ? currentBurrito.project.audioTranslation.refResources : [],
               bookMarks: call === 'edit' ? currentBurrito.project.audioTranslation.bookMarks : [],
+              font: '',
             },
           },
           sync: { services: { door43: [] } },
diff --git a/renderer/src/util/createObsContent.js b/renderer/src/util/createObsContent.js
index 909faf526..b0a140d51 100644
--- a/renderer/src/util/createObsContent.js
+++ b/renderer/src/util/createObsContent.js
@@ -191,6 +191,7 @@ export const createObsContent = (
           lastSeen: moment().format(),
           refResources: call === 'edit' ? currentBurrito.project.textStories.refResources : [],
           bookMarks: call === 'edit' ? currentBurrito.project.textStories.bookMarks : [],
+          font: '',
         },
       },
       sync: { services: { door43: [] } },
@@ -370,6 +371,7 @@ export const createObsContent = (
           },
         },
         sync: { services: { door43: [] } },
+        font: '',
       };
       const stat = await uploadFileToSupabase(`${supabasePath}/${environment.PROJECT_SETTING_FILE}`, JSON.stringify(settings));
       ingredients[path.join('ingredients', environment.PROJECT_SETTING_FILE)] = {
diff --git a/renderer/src/util/createVersificationUSFM.js b/renderer/src/util/createVersificationUSFM.js
index 0e673597e..5280d62c4 100644
--- a/renderer/src/util/createVersificationUSFM.js
+++ b/renderer/src/util/createVersificationUSFM.js
@@ -161,6 +161,7 @@ export const createVersificationUSFM = (
               lastSeen: moment().format(),
               refResources: call === 'edit' ? currentBurrito.project?.textTranslation.refResources : [],
               bookMarks: call === 'edit' ? currentBurrito.project?.textTranslation.bookMarks : [],
+              font: '',
             },
           },
           sync: { services: { door43: [] } },
@@ -345,6 +346,7 @@ export const createWebVersificationUSFM = async (
             },
           },
           sync: { services: { door43: [] } },
+          font: '',
         };
         if (call === 'edit') {
           settings.sync = currentBurrito?.sync;