From 97b5e3e65cbdbce1059015425403f5b88fa918ed Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Tue, 14 Apr 2026 09:33:41 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20font=20selector=20i?=
 =?UTF-8?q?n=20accessibility=20settings?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Dropdown with description and FR/EN/NL translations.
---
 CHANGELOG.md                                  |  1 +
 .../components/tabs/AccessibilityTab.tsx      | 33 +++++++++++++++++--
 src/frontend/src/locales/de/settings.json     | 10 ++++++
 src/frontend/src/locales/en/settings.json     | 10 ++++++
 src/frontend/src/locales/fr/settings.json     | 10 ++++++
 src/frontend/src/locales/nl/settings.json     | 10 ++++++
 6 files changed, 72 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3fbec3ee..18dcb244 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -61,6 +61,7 @@ and this project adheres to
 - ✨(summary) allow more file extensions #1265
 - ♿️(frontend) refocus reactions toolbar with ctrl+shift+e is activated #1262
 - ♿️(frontend) set an explicit document title on recording download page #1261
+- ♿️(frontend) add customizable accessibility fonts #1270
 
 ### Fixed
 
diff --git a/src/frontend/src/features/settings/components/tabs/AccessibilityTab.tsx b/src/frontend/src/features/settings/components/tabs/AccessibilityTab.tsx
index dad2297b..d9ed0578 100644
--- a/src/frontend/src/features/settings/components/tabs/AccessibilityTab.tsx
+++ b/src/frontend/src/features/settings/components/tabs/AccessibilityTab.tsx
@@ -1,9 +1,14 @@
-import { Field, H } from '@/primitives'
+import { Field, H, Text } from '@/primitives'
 import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
 import { css } from '@/styled-system/css'
+import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSnapshot } from 'valtio'
-import { accessibilityStore } from '@/stores/accessibility'
+import {
+  accessibilityStore,
+  UI_FONT_OPTIONS,
+  type UiFont,
+} from '@/stores/accessibility'
 import { CaptionsSettings } from '@/features/subtitle/component/CaptionsSettings'
 
 export type AccessibilityTabProps = Pick<TabPanelProps, 'id'>
@@ -12,6 +17,15 @@ export const AccessibilityTab = ({ id }: AccessibilityTabProps) => {
   const { t } = useTranslation('settings')
   const snap = useSnapshot(accessibilityStore)
 
+  const fontItems = useMemo(
+    () =>
+      UI_FONT_OPTIONS.map((font) => ({
+        value: font,
+        label: t(`accessibility.font.options.${font}`),
+      })),
+    [t]
+  )
+
   return (
     <TabPanel padding={'md'} flex id={id}>
       <H lvl={2}>{t('tabs.accessibility')}</H>
@@ -33,6 +47,21 @@ export const AccessibilityTab = ({ id }: AccessibilityTabProps) => {
             wrapperProps={{ noMargin: true, fullWidth: true }}
           />
         </li>
+        <li>
+          <Field
+            type="select"
+            label={t('accessibility.font.label')}
+            items={fontItems}
+            selectedKey={snap.uiFont}
+            onSelectionChange={(key) => {
+              accessibilityStore.uiFont = key as UiFont
+            }}
+            wrapperProps={{ noMargin: true, fullWidth: true }}
+          />
+          <Text variant="smNote" className={css({ marginTop: '0.25rem' })}>
+            {t('accessibility.font.description')}
+          </Text>
+        </li>
         <CaptionsSettings />
       </ul>
     </TabPanel>
diff --git a/src/frontend/src/locales/de/settings.json b/src/frontend/src/locales/de/settings.json
index 9879d21b..8c13a096 100644
--- a/src/frontend/src/locales/de/settings.json
+++ b/src/frontend/src/locales/de/settings.json
@@ -117,6 +117,16 @@
     "announceReactions": {
       "label": "Reaktionen vorlesen"
     },
+    "font": {
+      "label": "Anzeigeschrift",
+      "description": "Passe die in der Oberfläche verwendete Schrift für ein besseres Leseerlebnis an.",
+      "options": {
+        "default": "Standard (System)",
+        "lexend": "Lexend (verbesserte Lesbarkeit)",
+        "atkinson-hyperlegible": "Atkinson Hyperlegible (Sehbeeinträchtigung)",
+        "opendyslexic": "OpenDyslexic (Dyslexie)"
+      }
+    },
     "captions": {
       "heading": "Untertitel",
       "textSize": {
diff --git a/src/frontend/src/locales/en/settings.json b/src/frontend/src/locales/en/settings.json
index 722978b0..caba3195 100644
--- a/src/frontend/src/locales/en/settings.json
+++ b/src/frontend/src/locales/en/settings.json
@@ -117,6 +117,16 @@
     "announceReactions": {
       "label": "Announce reactions aloud"
     },
+    "font": {
+      "label": "Display font",
+      "description": "Customize the font used in the interface to improve your reading comfort.",
+      "options": {
+        "default": "Default (system)",
+        "lexend": "Lexend (improved readability)",
+        "atkinson-hyperlegible": "Atkinson Hyperlegible (low vision)",
+        "opendyslexic": "OpenDyslexic (dyslexia)"
+      }
+    },
     "captions": {
       "heading": "Captions",
       "textSize": {
diff --git a/src/frontend/src/locales/fr/settings.json b/src/frontend/src/locales/fr/settings.json
index 99e29c82..1e63c6bb 100644
--- a/src/frontend/src/locales/fr/settings.json
+++ b/src/frontend/src/locales/fr/settings.json
@@ -117,6 +117,16 @@
     "announceReactions": {
       "label": "Vocaliser les réactions"
     },
+    "font": {
+      "label": "Police d'affichage",
+      "description": "Personnalisez la police utilisée dans l'interface pour améliorer votre confort de lecture.",
+      "options": {
+        "default": "Par défaut",
+        "lexend": "Lexend (lisibilité améliorée)",
+        "atkinson-hyperlegible": "Atkinson Hyperlegible (basse vision)",
+        "opendyslexic": "OpenDyslexic (dyslexie)"
+      }
+    },
     "captions": {
       "heading": "Sous-titres",
       "textSize": {
diff --git a/src/frontend/src/locales/nl/settings.json b/src/frontend/src/locales/nl/settings.json
index ec971879..48b8c6dd 100644
--- a/src/frontend/src/locales/nl/settings.json
+++ b/src/frontend/src/locales/nl/settings.json
@@ -117,6 +117,16 @@
     "announceReactions": {
       "label": "Reacties hardop aankondigen"
     },
+    "font": {
+      "label": "Weergavelettertype",
+      "description": "Pas het lettertype van de interface aan om uw leescomfort te verbeteren.",
+      "options": {
+        "default": "Standaard (systeem)",
+        "lexend": "Lexend (verbeterde leesbaarheid)",
+        "atkinson-hyperlegible": "Atkinson Hyperlegible (slechtziend)",
+        "opendyslexic": "OpenDyslexic (dyslexie)"
+      }
+    },
     "captions": {
       "heading": "Ondertitels",
       "textSize": {