Change font to Pretendard and JetBrains Mono

libnare · Apr 9, 2023 · f439b3e · f439b3e
1 parent f6f77db
commit f439b3e
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 7 deletions.
diff --git a/packages/backend/src/server/web/bios.css b/packages/backend/src/server/web/bios.css
@@ -1,5 +1,10 @@
+@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono@4.5.11/variable.css");
+@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono@4.5.11/variable-italic.css");
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/variable/PretendardVariable-VF.css");
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/variable/PretendardJPVariable-VF.css");
+
 * {
-	font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
+	font-family: "JetBrains MonoVariable", "JetBrains Mono", "Pretendard JP Variable", "Pretendard JP", "Pretendard Variable", Pretendard, Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
 }
 
 html {

diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js
@@ -199,8 +199,13 @@
 		<code>${JSON.stringify(details)}</code>`;
 		errorsElement.appendChild(detailsElement);
 		addStyle(`
+		@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono@4.5.11/variable.css");
+		@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono@4.5.11/variable-italic.css");
+		@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/variable/PretendardVariable-VF.css");
+		@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/variable/PretendardJPVariable-VF.css");
+
 		* {
-			font-family: BIZ UDGothic, Roboto, HelveticaNeue, Arial, sans-serif;
+			font-family: "Pretendard JP Variable", "Pretendard JP", "Pretendard Variable", Pretendard, BIZ UDGothic, Roboto, HelveticaNeue, Arial, sans-serif;
 		}
 
 		#misskey_app,
@@ -285,7 +290,7 @@
 		code {
 			color: #f8f8f2;
 			text-shadow: 0 1px rgba(0,0,0,.3);
-			font-family: Fira, FiraCode, monospace;
+			font-family: "JetBrains MonoVariable", "JetBrains Mono", "Pretendard JP Variable", "Pretendard JP", "Pretendard Variable", Pretendard, Fira, FiraCode, monospace;
 		}
 
 		details {

diff --git a/packages/backend/src/server/web/cli.css b/packages/backend/src/server/web/cli.css
@@ -1,5 +1,10 @@
+@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono@4.5.11/variable.css");
+@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono@4.5.11/variable-italic.css");
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/variable/PretendardVariable-VF.css");
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/variable/PretendardJPVariable-VF.css");
+
 * {
-	font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
+	font-family: "JetBrains MonoVariable", "JetBrains Mono", "Pretendard JP Variable", "Pretendard JP", "Pretendard Variable", Pretendard, Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
 }
 
 html {

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -15,6 +15,7 @@
 	},
 	"dependencies": {
 		"@discordapp/twemoji": "14.1.2",
+		"@fontsource/jetbrains-mono": "^4.5.12",
 		"@rollup/plugin-alias": "4.0.3",
 		"@rollup/plugin-json": "6.0.0",
 		"@rollup/pluginutils": "5.0.2",
@@ -46,6 +47,8 @@
 		"mfm-js": "0.23.3",
 		"misskey-js": "workspace:*",
 		"photoswipe": "5.3.7",
+		"pretendard": "^1.3.6",
+		"pretendard-jp": "^1.3.6",
 		"prismjs": "1.29.0",
 		"punycode": "2.3.0",
 		"querystring": "0.2.1",

diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss
@@ -1,5 +1,14 @@
 @charset "utf-8";
 
+@import "@fontsource/jetbrains-mono/variable.css";
+@import "@fontsource/jetbrains-mono/variable-italic.css";
+@import "pretendard/dist/web/variable/PretendardVariable-VF.css";
+@import "pretendard-jp/dist/web/variable/PretendardJPVariable-VF.css";
+
+$default-font: "Pretendard JP Variable", "Pretendard JP", "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Hiragino Sans", "Apple SD Gothic Neo", Meiryo, "Noto Sans JP", "Noto Sans KR", "Malgun Gothic", Osaka, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+$system-font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+$monospace-font: "JetBrains MonoVariable", "JetBrains Mono", "Pretendard JP Variable", "Pretendard JP", "Pretendard Variable", Pretendard, Fira code, Fira Mono, Consolas, Menlo, Courier, monospace !important;
+
 :root {
 	--radius: 12px;
 	--marginFull: 16px;
@@ -31,7 +40,7 @@ html {
 	accent-color: var(--accent);
 	overflow: auto;
 	overflow-wrap: break-word;
-	font-family: 'Hiragino Maru Gothic Pro', "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif;
+	font-family: $default-font;
 	font-size: 14px;
 	line-height: 1.35;
 	text-size-adjust: 100%;
@@ -76,7 +85,7 @@ html {
 	}
 
 	&.useSystemFont {
-		font-family: 'Hiragino Maru Gothic Pro', sans-serif;
+		font-family: $system-font;
 	}
 }
 
@@ -391,7 +400,7 @@ hr {
 }
 
 ._monospace {
-	font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace !important;
+	font-family: $monospace-font;
 }
 
 ._code {
@@ -403,6 +412,11 @@ hr {
 	padding: 5px;
 }
 
+code[class*="language-"],
+pre[class*="language-"] {
+	font-family: $monospace-font;
+}
+
 .prism-editor__textarea:focus {
 	outline: none;
 }

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml