diff --git a/services/web/frontend/js/shared/context/ide-context.tsx b/services/web/frontend/js/shared/context/ide-context.tsx
index 7c2122674b..f83686df9d 100644
--- a/services/web/frontend/js/shared/context/ide-context.tsx
+++ b/services/web/frontend/js/shared/context/ide-context.tsx
@@ -31,6 +31,8 @@ export const IdeProvider: FC<{
    *   - `settings.theme`
    *   - `settings.keybindings`
    *   - `settings.fontSize`
+   *   - `settings.fontFamily`
+   *   - `settings.lineHeight`
    */
   useEffect(() => {
     window.overleaf = {
diff --git a/services/web/frontend/js/shared/context/user-settings-context.tsx b/services/web/frontend/js/shared/context/user-settings-context.tsx
index 67c9e437a1..6a069f470e 100644
--- a/services/web/frontend/js/shared/context/user-settings-context.tsx
+++ b/services/web/frontend/js/shared/context/user-settings-context.tsx
@@ -12,6 +12,7 @@ import {
 import { UserSettings, Keybindings } from '../../../../types/user-settings'
 import getMeta from '@/utils/meta'
 import useScopeValue from '@/shared/hooks/use-scope-value'
+import { userStyles } from '../utils/styles'
 
 const defaultSettings: UserSettings = {
   pdfViewer: 'pdfjs',
@@ -39,6 +40,8 @@ type ScopeSettings = {
   overallTheme: 'light' | 'dark'
   keybindings: Keybindings
   fontSize: number
+  fontFamily: string
+  lineHeight: number
 }
 
 export const UserSettingsContext = createContext<
@@ -53,9 +56,12 @@ export const UserSettingsProvider: FC = ({ children }) => {
   // update the global scope 'settings' value, for extensions
   const [, setScopeSettings] = useScopeValue<ScopeSettings>('settings')
   useEffect(() => {
+    const { fontFamily, lineHeight } = userStyles(userSettings)
     setScopeSettings({
       overallTheme: userSettings.overallTheme === 'light-' ? 'light' : 'dark',
       keybindings: userSettings.mode === 'none' ? 'default' : userSettings.mode,
+      fontFamily,
+      lineHeight,
       fontSize: userSettings.fontSize,
     })
   }, [setScopeSettings, userSettings])