feat: add font settings

src/lang/en.ts

@@ -651,4 +651,5 @@ export const languageEnglish = {
     v2Warning: "Warning: V2 card is no longer supported. it may not contain all the data.",
     applyModule: "Apply Module",
     successApplyModule: "Module is successfully applied",
+    font: "Font",
 }

src/lib/Setting/Pages/DisplaySettings.svelte

@@ -12,6 +12,7 @@
     import { DownloadIcon, FolderUpIcon } from "lucide-svelte";
 
     import { guiSizeText, updateGuisize } from "src/ts/gui/guisize";
+  import TextInput from "src/lib/UI/GUI/TextInput.svelte";
 
     const onSchemeInputChange = (e:Event) => {
         changeColorScheme((e.target as HTMLInputElement).value)
@@ -137,6 +138,17 @@
     </div>
 {/if}
 
+<span class="text-textcolor mt-4">{language.font}</span>
+<SelectInput className="mt-2" bind:value={$DataBase.font} on:change={updateTextTheme}>
+    <OptionInput value="default" >Default</OptionInput>
+    <OptionInput value="timesnewroman" >Times New Roman</OptionInput>
+    <OptionInput value="custom" >Custom</OptionInput>
+</SelectInput>
+
+{#if $DataBase.font === "custom"}
+    <TextInput bind:value={$DataBase.customFont} on:change={updateTextTheme} />
+{/if}
+
 <span class="text-textcolor mt-4">{language.UISize}</span>
 <SliderInput  min={50} max={200} bind:value={$DataBase.zoomsize} />
 <span class="text-textcolor2 mb-6 text-sm">{($DataBase.zoomsize)}%</span>

src/styles.css

@@ -29,6 +29,7 @@ body{
   --risu-theme-darkborderc: #4b5563;
   --risu-theme-darkbutton: #374151;
   --risu-height-size: 100%;
+  --risu-font-family: Arial, sans-serif, serif;
 
 }
 
@@ -126,7 +127,7 @@ html, body{
 }
 
 *{
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--risu-font-family);
 }
 
 .chattext p:first-child{

src/ts/gui/colorscheme.ts

@@ -225,4 +225,19 @@ export function updateTextTheme(){
             break
         }
     }
+
+    switch(db.font){
+        case "default":{
+            root.style.setProperty('--risu-font-family', 'Arial, sans-serif');
+            break
+        }
+        case "timesnewroman":{
+            root.style.setProperty('--risu-font-family', 'Times New Roman, serif');
+            break
+        }
+        case "custom":{
+            root.style.setProperty('--risu-font-family', db.customFont);
+            break
+        }
+    }
 }

src/ts/storage/database.ts

@@ -413,6 +413,8 @@ export function setDatabase(data:Database){
     data.dallEQuality ??= 'standard'
     data.customTextTheme.FontColorQuote1 ??= '#8BE9FD'
     data.customTextTheme.FontColorQuote2 ??= '#FFB86C'
+    data.font ??= 'default'
+    data.customFont ??= ''
     changeLanguage(data.language)
     DataBase.set(data)
 }
@@ -680,6 +682,8 @@ export interface Database{
     cohereAPIKey:string
     goCharacterOnImport:boolean
     dallEQuality:string
+    font: string
+    customFont: string
 }
 
 export interface customscript{