feat(client): フォントを変更できる機能を実装

locales/index.d.ts

@@ -2188,6 +2188,10 @@ export interface Locale extends ILocale {
      * コーナーの丸み
      */
     "cornerRadius": string;
+    /**
+		 * カスタムフォント
+     */
+    "customFont": string;
     /**
      * 画像が1枚のみのメディアリストの高さ
      */

locales/ja-JP.yml

@@ -543,6 +543,7 @@ existingAccount: "既存のアカウント"
 regenerate: "再生成"
 fontSize: "フォントサイズ"
 cornerRadius: "コーナーの丸み"
+customFont: "カスタムフォント"
 mediaListWithOneImageAppearance: "画像が1枚のみのメディアリストの高さ"
 limitTo: "{x}を上限に"
 noFollowRequests: "フォロー申請はありません"

packages/frontend/src/pages/settings/general.vue

@@ -219,6 +219,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<div style="margin: 8px 0 0 0; font-size: 1.5em;"><Mfm :key="emojiStyle" text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></div>
 			</div>
 
+			<MkSelect v-model="customFont">
+				<template #label>{{ i18n.ts.customFont }}<span class="_beta">{{ i18n.ts.originalFeature }}</span></template>
+				<option :value="null">{{ i18n.ts.default }}</option>
+				<option v-for="[name, font] of Object.entries(fontList)" :value="name">{{ font.name }}</option>
+			</MkSelect>
+
 			<MkRadios v-model="fontSize">
 				<template #label>{{ i18n.ts.fontSize }}</template>
 				<option :value="null"><span style="font-size: 14px;">Aa</span></option>
@@ -365,6 +371,7 @@ import { misskeyApi } from '@/scripts/misskey-api.js';
 import { unisonReload } from '@/scripts/unison-reload.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
+import { fontList } from '@/scripts/font';
 import { miLocalStorage } from '@/local-storage.js';
 import { globalEvents } from '@/events.js';
 import { claimAchievement } from '@/scripts/achievements.js';
@@ -419,6 +426,7 @@ const showReactionsCount = computed(defaultStore.makeGetterSetter('showReactions
 const enableQuickAddMfmFunction = computed(defaultStore.makeGetterSetter('enableQuickAddMfmFunction'));
 const emojiStyle = computed(defaultStore.makeGetterSetter('emojiStyle'));
 const disableDrawer = computed(defaultStore.makeGetterSetter('disableDrawer'));
+const customFont = computed(defaultStore.makeGetterSetter('customFont'));
 const disableShowingAnimatedImages = computed(defaultStore.makeGetterSetter('disableShowingAnimatedImages'));
 const forceShowAds = computed(defaultStore.makeGetterSetter('forceShowAds'));
 const oneko = computed(defaultStore.makeGetterSetter('oneko'));

packages/frontend/src/scripts/font.ts

@@ -0,0 +1,78 @@
+export const fontList = {
+	'noto-sans': {
+		name: 'Noto Sans',
+		fontFamily: 'Noto Sans JP',
+		importUrl: 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap',
+	},
+	'm-plus': {
+		name: 'M PLUS',
+		fontFamily: 'M PLUS 1p',
+		importUrl: 'https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap',
+	},
+	'm-plus-rounded': {
+		name: 'M PLUS Rounded',
+		fontFamily: 'M PLUS Rounded 1c',
+		importUrl: 'https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap',
+	},
+	'm-plus-2': {
+		name: 'M PLUS 2',
+		fontFamily: 'M PLUS 2',
+		importUrl: 'https://fonts.googleapis.com/css2?family=M+PLUS+2&display=swap',
+	},
+	'biz-udpgothic': {
+		name: 'BIZ UDP Gothic',
+		fontFamily: 'BIZ UDPGothic',
+		importUrl: 'https://fonts.googleapis.com/css2?family=BIZ+UDPGothic&display=swap',
+	},
+	'biz-udmincho': {
+		name: 'BIZ UD Mincho',
+		fontFamily: 'BIZ UDMincho',
+		importUrl: 'https://fonts.googleapis.com/css2?family=BIZ+UDMincho&display=swap',
+	},
+	'klee-one': {
+		name: 'Klee One',
+		fontFamily: 'Klee One',
+		importUrl: 'https://fonts.googleapis.com/css2?family=Klee+One&display=swap',
+	},
+	'zen-maru-gothic': {
+		name: 'Zen Maru Gothic',
+		fontFamily: 'Zen Maru Gothic',
+		importUrl: 'https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap',
+	},
+	'kaisei-decol': {
+		name: 'Kaisei Decol',
+		fontFamily: 'Kaisei Decol',
+		importUrl: 'https://fonts.googleapis.com/css2?family=Kaisei+Decol&display=swap',
+	},
+	'dot-gothic16': {
+		name: 'Dot Gothic 16',
+		fontFamily: 'DotGothic16',
+		importUrl: 'https://fonts.googleapis.com/css2?family=DotGothic16&display=swap',
+	},
+};
+
+export function applyFont(fontname: null | string) {
+	console.log('called');
+	let style = document.getElementById('custom-font');
+
+	if (!fontname) {
+		if (!style) return;
+		return style.remove();
+	}
+
+	if (!style) {
+		style = document.createElement('style');
+		style.id = 'custom-font';
+		document.head.appendChild(style);
+	}
+
+	const font = fontList[fontname];
+	if (!font) return;
+
+	style.innerHTML = `
+		@import url('${font.importUrl}');
+		body {
+			font-family: '${font.fontFamily}', 'Hiragino Maru Gothic Pro', 'BIZ UDGothic', Roboto, HelveticaNeue, Arial, sans-serif;
+		}
+	`;
+}

packages/frontend/src/store.ts

@@ -348,6 +348,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: false,
 	},
+	customFont: {
+		where: 'device',
+		default: null as null | string,
+	},
 	instanceTicker: {
 		where: 'device',
 		default: 'remote' as 'none' | 'remote' | 'always',