From 10fb02960997342aedefaed8111f5c7129339258 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 28 Nov 2020 13:05:57 +0900
Subject: [PATCH] Resolve #6858

---
 locales/ja-JP.yml                     |  1 +
 src/client/pages/settings/general.vue | 15 +++++++++++++--
 src/client/style.scss                 |  6 +++++-
 src/server/web/views/base.pug         |  5 +++++
 4 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 035359839..8d547f500 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -649,6 +649,7 @@ pageLikesCount: "Pageにいいねした数"
 pageLikedCount: "Pageにいいねされた数"
 reversiCount: "リバーシの対局数"
 contact: "連絡先"
+useSystemFont: "システムのデフォルトのフォントを使う"
 
 _aboutMisskey:
   about: "Misskeyはsyuiloによって2014年から開発されている、オープンソースのソフトウェアです。"
diff --git a/src/client/pages/settings/general.vue b/src/client/pages/settings/general.vue
index 7c2905fde..d7acc9ad4 100644
--- a/src/client/pages/settings/general.vue
+++ b/src/client/pages/settings/general.vue
@@ -33,11 +33,12 @@
 		<FormSwitch v-model:value="disableAnimatedMfm">{{ $t('disableAnimatedMfm') }}</FormSwitch>
 		<FormSwitch v-model:value="reduceAnimation">{{ $t('reduceUiAnimation') }}</FormSwitch>
 		<FormSwitch v-model:value="useBlurEffectForModal">{{ $t('useBlurEffectForModal') }}</FormSwitch>
+		<FormSwitch v-model:value="loadRawImages">{{ $t('loadRawImages') }}</FormSwitch>
+		<FormSwitch v-model:value="disableShowingAnimatedImages">{{ $t('disableShowingAnimatedImages') }}</FormSwitch>
+		<FormSwitch v-model:value="useSystemFont">{{ $t('useSystemFont') }}</FormSwitch>
 		<FormSwitch v-model:value="useOsNativeEmojis">{{ $t('useOsNativeEmojis') }}
 			<div><Mfm text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></div>
 		</FormSwitch>
-		<FormSwitch v-model:value="loadRawImages">{{ $t('loadRawImages') }}</FormSwitch>
-		<FormSwitch v-model:value="disableShowingAnimatedImages">{{ $t('disableShowingAnimatedImages') }}</FormSwitch>
 	</FormGroup>
 
 	<FormRadios v-model="fontSize">
@@ -118,6 +119,7 @@ export default defineComponent({
 			langs,
 			lang: localStorage.getItem('lang'),
 			fontSize: localStorage.getItem('fontSize'),
+			useSystemFont: localStorage.getItem('useSystemFont') != null,
 			faImage, faCog, faColumns
 		}
 	},
@@ -221,6 +223,15 @@ export default defineComponent({
 			location.reload();
 		},
 
+		useSystemFont() {
+			if (this.useSystemFont) {
+				localStorage.setItem('useSystemFont', 't');
+			} else {
+				localStorage.removeItem('useSystemFont');
+			}
+			location.reload();
+		},
+
 		enableInfiniteScroll() {
 			location.reload()
 		},
diff --git a/src/client/style.scss b/src/client/style.scss
index f42805edd..e2d3e596a 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -27,7 +27,7 @@ html {
 	color: var(--fg);
 	overflow: auto;
 	font-family: "BIZ UDPGothic", Roboto, HelveticaNeue, Arial, sans-serif;
-	line-height: 1.3em;
+	line-height: 1.35em;
 	text-size-adjust: 100%;
 
 	&, * {
@@ -75,6 +75,10 @@ html {
 	&.f-veryLarge {
 		font-size: 1.2em;
 	}
+
+	&.useSystemFont {
+		font-family: sans-serif;
+	}
 }
 
 html.changing-theme {
diff --git a/src/server/web/views/base.pug b/src/server/web/views/base.pug
index 9652d29db..cbba6bd08 100644
--- a/src/server/web/views/base.pug
+++ b/src/server/web/views/base.pug
@@ -94,6 +94,11 @@ html
 				document.documentElement.classList.add('f-' + fontSize);
 			}
 
+			const useSystemFont = localStorage.getItem('useSystemFont');
+			if (useSystemFont) {
+				document.documentElement.classList.add('useSystemFont');
+			}
+
 			const wallpaper = localStorage.getItem('wallpaper');
 			if (wallpaper) {
 				document.documentElement.style.backgroundImage = `url(${wallpaper})`;