add inter as default font, lexend as third highly readable option

src/lib/config/types.ts

@@ -19,7 +19,7 @@ type ViewName = "members" | "journal" | "dashboard" | "chat";
 
 export type AccessibilityConfig = {
 	highLegibility: boolean,
-	highLegibilityType: "atkinson" | "opendyslexic",
+	highLegibilityType: "atkinson" | "opendyslexic" | "lexend",
 	theme: "auto" | "dark" | "light",
 	useAccentColor: boolean,
 	accentColor?: string,

src/lib/mode.ts

@@ -38,19 +38,10 @@ export function updateAccessibility() {
 
 		const highLegibilityType = (getConfigEntry("accessibility") as AccessibilityConfig).highLegibilityType;
 
-		switch(highLegibilityType){
-			default:
-			case "atkinson":
-				document.documentElement.classList.remove("opendyslexic");
-				document.documentElement.classList.add("atkinson");
-				break;
-			case "opendyslexic":
-				document.documentElement.classList.remove("atkinson");
-				document.documentElement.classList.add("opendyslexic");
-				break;
-		}
+		document.documentElement.classList.remove(...[...document.documentElement.classList.values()].filter(x => x.startsWith("hl-")));
+		document.documentElement.classList.add("hl-" + highLegibilityType);
 	} else
-		document.documentElement.classList.remove("high-legibility", "atkinson", "opendyslexic");
+		document.documentElement.classList.remove("high-legibility", ...[...document.documentElement.classList.values()].filter(x => x.startsWith("hl-")));
 
 	const fontScale = (getConfigEntry("accessibility") as AccessibilityConfig).fontScale;
 	if (fontScale !== 1)

src/main.ts

@@ -35,7 +35,7 @@ import '@ionic/vue/css/display.css';
 import '@ionic/vue/css/palettes/dark.class.css';
 
 // Import fonts
-import "./styles/fonts.css";
+import "./styles/fonts/fonts.css";
 
 // Our CSS overrides
 import "./styles/override.css";

src/styles/fonts/atkinson-hyperlegible.css

@@ -0,0 +1,27 @@
+@font-face {
+	font-family: "Atkinson Hyperlegible";
+	font-weight: normal;
+	font-style: normal;
+	src: url(../../assets/fonts/aktinson-hyperlegible/AtkinsonHyperlegible-Regular.ttf);
+}
+
+@font-face {
+	font-family: "Atkinson Hyperlegible";
+	font-weight: bold;
+	font-style: normal;
+	src: url(../../assets/fonts/aktinson-hyperlegible/AtkinsonHyperlegible-Bold.ttf);
+}
+
+@font-face {
+	font-family: "Atkinson Hyperlegible";
+	font-weight: normal;
+	font-style: italic;
+	src: url(../../assets/fonts/aktinson-hyperlegible/AtkinsonHyperlegible-Italic.ttf);
+}
+
+@font-face {
+	font-family: "Atkinson Hyperlegible";
+	font-weight: bold;
+	font-style: italic;
+	src: url(../../assets/fonts/aktinson-hyperlegible/AtkinsonHyperlegible-BoldItalic.ttf);
+}

src/styles/fonts/fonts.css

@@ -0,0 +1,3 @@
+@import url(inter.css);
+@import url(atkinson-hyperlegible.css);
+@import url(opendyslexic.css);

src/styles/fonts/inter.css

@@ -0,0 +1,13 @@
+@font-face {
+	font-family: 'Inter';
+	font-style: italic;
+	font-weight: 100 900;
+	src: url(../../assets/fonts/inter/Inter-Italic.ttf);
+}
+
+@font-face {
+	font-family: 'Inter';
+	font-style: normal;
+	font-weight: 100 900;
+	src: url(../../assets/fonts/inter/Inter.ttf);
+}

src/styles/fonts/lexend.css

@@ -0,0 +1,6 @@
+@font-face {
+	font-family: 'Lexend';
+	font-style: normal;
+	font-weight: 100 900;
+	src: url(../../assets/fonts/lexend/Lexend.ttf);
+}

src/styles/fonts/opendyslexic.css

@@ -0,0 +1,27 @@
+@font-face {
+	font-family: "OpenDyslexic";
+	font-weight: normal;
+	font-style: normal;
+	src: url(../../assets/fonts/open-dyslexic/OpenDyslexic-Regular.otf);
+}
+
+@font-face {
+	font-family: "OpenDyslexic";
+	font-weight: bold;
+	font-style: normal;
+	src: url(../../assets/fonts/open-dyslexic/OpenDyslexic-Bold.otf);
+}
+
+@font-face {
+	font-family: "OpenDyslexic";
+	font-weight: normal;
+	font-style: italic;
+	src: url(../../assets/fonts/open-dyslexic/OpenDyslexic-Italic.otf);
+}
+
+@font-face {
+	font-family: "OpenDyslexic";
+	font-weight: bold;
+	font-style: italic;
+	src: url(../../assets/fonts/open-dyslexic/OpenDyslexic-BoldItalic.otf);
+}

src/styles/override.css

@@ -1,11 +1,17 @@
-html.high-legibility.atkinson {
-	font-family: 'Atkinson Hyperlegible', sans-serif;
-	--ion-font-family: 'Atkinson Hyperlegible', sans-serif;
+html {
+	--ion-font-family: 'Inter', var(--ion-default-font);
 }
 
-html.high-legibility.opendyslexic {
-	font-family: 'OpenDyslexic', sans-serif;
-	--ion-font-family: 'OpenDyslexic', sans-serif;
+html.high-legibility.hl-atkinson {
+	--ion-font-family: 'Atkinson Hyperlegible', var(--ion-default-font);
+}
+
+html.high-legibility.hl-opendyslexic {
+	--ion-font-family: 'OpenDyslexic', var(--ion-default-font);
+}
+
+html.high-legibility.hl-lexend {
+	--ion-font-family: 'Lexend', var(--ion-default-font);
 }
 
 ion-list-header + ion-list.md {

src/views/options/Accessibility.vue

@@ -57,6 +57,10 @@
 							<MD3SegmentButton value="opendyslexic">
 								<IonLabel>{{ $t("options:accessibility.highLegibilityFontType.opendyslexic") }}</IonLabel>
 							</MD3SegmentButton>
+
+							<MD3SegmentButton value="lexend">
+								<IonLabel>{{ $t("options:accessibility.highLegibilityFontType.lexend") }}</IonLabel>
+							</MD3SegmentButton>
 						</IonSegment>
 					</IonLabel>
 				</IonItem>

translations/en/options.json

@@ -92,7 +92,8 @@
 		"highLegibilityFontType": {
 			"title": "High legibility font family",
 			"atkinson": "Atkinson Hyperlegible",
-			"opendyslexic": "OpenDyslexic"
+			"opendyslexic": "OpenDyslexic",
+			"lexend": "Lexend"
 		},
 		"uiVariant": {
 			"title": "UI variant",