diff --git a/packages/backend/src/server/web/bios.css b/packages/backend/src/server/web/bios.css index 2ba86b5d9168..90e97a6a41d5 100644 --- 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 index 351b1761a3f6..38a32a574af9 100644 --- a/packages/backend/src/server/web/boot.js +++ b/packages/backend/src/server/web/boot.js @@ -199,8 +199,13 @@ ${JSON.stringify(details)}`; 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 index 63edf2ba1c12..04650ef25cec 100644 --- 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 index 79fb626a9a9e..cc26f6c3976f 100644 --- 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 index 20254d335ea4..4cb3e6b80227 100644 --- 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 index ff9765b5c4ef..6e449b21ed13 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -591,6 +591,9 @@ importers: '@discordapp/twemoji': specifier: 14.1.2 version: 14.1.2 + '@fontsource/jetbrains-mono': + specifier: ^4.5.12 + version: 4.5.12 '@rollup/plugin-alias': specifier: 4.0.3 version: 4.0.3(rollup@3.20.2) @@ -684,6 +687,12 @@ importers: photoswipe: specifier: 5.3.7 version: 5.3.7 + pretendard: + specifier: ^1.3.6 + version: 1.3.6 + pretendard-jp: + specifier: ^1.3.6 + version: 1.3.6 prismjs: specifier: 1.29.0 version: 1.29.0 @@ -3984,6 +3993,10 @@ packages: hashlru: 2.3.0 dev: false + /@fontsource/jetbrains-mono@4.5.12: + resolution: {integrity: sha512-LJF1ala1/u+wXZmESFqIk08FA9yGX4/uAAleCHmXUMgEjvNAYFHUQQ7eK5hQQoBOwh99cU5suTrqYqEkgzwzPA==} + dev: false + /@gar/promisify@1.1.3: resolution: {integrity: sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==} dev: false @@ -16429,6 +16442,14 @@ packages: engines: {node: '>=0.10.0'} dev: false + /pretendard-jp@1.3.6: + resolution: {integrity: sha512-5UnEJMBaj7liqqRlfSr311EWE22eh4qMSHHdJZw6N1JB/Ywz+qRNOetuf6vFY9lw7wCmhJQwXi3IYCgo5pIv+g==} + dev: false + + /pretendard@1.3.6: + resolution: {integrity: sha512-JdImekU/moL3Qr+QqvFmZobYkwYQPA/8PoZ0ptOKNju+laE1xG9SxuxfpYLowfUeOcY+glQB6uINJsD5WAHFDw==} + dev: false + /prettier@2.8.7: resolution: {integrity: sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==} engines: {node: '>=10.13.0'}