Merge pull request #8 from team-shahu/feat/custom-font

Feat/custom font

README.md

@@ -24,6 +24,7 @@
 - 同じ音源が短時間で重複して流れないように
 - 通知にフォロバボタンを表示
 - 二要素認証のバックアップコードを保存するように促すダイアログを表示するように
+- カスタムフォント機能
 
 ## Special Thanks
 - [Misskey](https://github.com/misskey-dev/misskey)  

locales/index.d.ts

@@ -2048,6 +2048,10 @@ export interface Locale extends ILocale {
      * フォントサイズ
      */
     "fontSize": string;
+    /**
+     * カスタムフォント
+     */
+    "customFont": string;
     /**
      * 画像が1枚のみのメディアリストの高さ
      */

locales/ja-JP.yml

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

packages/frontend/src/boot/common.ts

@@ -23,6 +23,7 @@ import { deckStore } from '@/ui/deck/deck-store.js';
 import { miLocalStorage } from '@/local-storage.js';
 import { fetchCustomEmojis } from '@/custom-emojis.js';
 import { setupRouter } from '@/router/definition.js';
+import { applyFont } from '@/scripts/font';
 
 export async function common(createVue: () => App<Element>) {
 	console.info(`Misskey v${version}`);
@@ -165,6 +166,15 @@ export async function common(createVue: () => App<Element>) {
 		}
 	});
 
+	//# Custom font
+	if (defaultStore.state.customFont) {
+		applyFont(defaultStore.state.customFont);
+	}
+
+	watch(defaultStore.reactiveState.customFont, (font) => {
+		applyFont(font);
+	});
+
 	//#region Sync dark mode
 	if (ColdDeviceStorage.get('syncDeviceDarkMode')) {
 		defaultStore.set('darkMode', isDeviceDarkmode());

packages/frontend/src/index.html

@@ -19,7 +19,8 @@
 		content="default-src 'self' https://newassets.hcaptcha.com/ https://challenges.cloudflare.com/ http://localhost:7493/;
 			worker-src 'self';
 			script-src 'self' 'unsafe-eval' https://*.hcaptcha.com https://challenges.cloudflare.com https://esm.sh;
-			style-src 'self' 'unsafe-inline';
+			style-src 'self' https://fonts.googleapis.com 'unsafe-inline';
+			font-src 'self' https://fonts.gstatic.com;
 			img-src 'self' data: blob: www.google.com xn--931a.moe localhost:3000 localhost:5173 127.0.0.1:5173 127.0.0.1:3000;
 			media-src 'self' localhost:3000 localhost:5173 127.0.0.1:5173 127.0.0.1:3000;
 			connect-src 'self' localhost:3000 localhost:5173 127.0.0.1:5173 127.0.0.1:3000 https://newassets.hcaptcha.com;

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

@@ -145,6 +145,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>
@@ -252,6 +258,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';
@@ -291,6 +298,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 loadRawImages = computed(defaultStore.makeGetterSetter('loadRawImages'));

packages/frontend/src/scripts/font.ts

@@ -0,0 +1,123 @@
+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',
+	},
+	'kosugi-maru': {
+		name: 'Kosugi Maru',
+		fontFamily: 'Kosugi Maru',
+		importUrl: 'https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap',
+	},
+	'kosugi': {
+		name: 'Kosugi',
+		fontFamily: 'Kosugi',
+		importUrl: 'https://fonts.googleapis.com/css2?family=Kosugi&display=swap',
+	},
+	'kiwi-maru': {
+		name: 'Kiwi Maru',
+		fontFamily: 'Kiwi Maru',
+		importUrl: 'https://fonts.googleapis.com/css2?family=Kiwi+Maru&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',
+	},
+	'zen-kaku-gothic-new': {
+		name: 'Zen Kaku Gothic New',
+		fontFamily: 'Zen Kaku Gothic New',
+		importUrl: 'https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New&display=swap',
+	},
+	'zen-kurenaido': {
+		name: 'Zen Kurenaido',
+		fontFamily: 'Zen Kurenaido',
+		importUrl: 'https://fonts.googleapis.com/css2?family=Zen+Kurenaido&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',
+	},
+	'hachi-maru-pop-regular': {
+		name: 'Hachi Maru Pop',
+		fontFamily: 'Hachi Maru Pop',
+		importUrl: 'https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&display=swap',
+	},
+	'stick-regular': {
+		name: 'Stick',
+		fontFamily: 'Stick',
+		importUrl: 'https://fonts.googleapis.com/css2?family=Stick&display=swap',
+	},
+	'tsukimi-rounded-regular': {
+		name: 'Tsukimi Rounded',
+		fontFamily: 'Tsukimi Rounded',
+		importUrl: 'https://fonts.googleapis.com/css2?family=Tsukimi+Rounded&display=swap',
+	},
+	'yusei-magic-regular': {
+		name: 'Yusei Magic',
+		fontFamily: 'Yusei Magic',
+		importUrl: 'https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap',
+	},
+};
+
+export function applyFont(fontname: null | string) {
+	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 !important;
+			font-style: normal;
+		}
+	`;
+}

packages/frontend/src/store.ts

@@ -304,6 +304,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',