diff --git a/packages/frontend/package.json b/packages/frontend/package.json index 125a40ef52..2755fb8db6 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -16,6 +16,7 @@ }, "dependencies": { "@discordapp/twemoji": "14.1.2", + "@fontsource/jetbrains-mono": "^5.0.12", "@github/webauthn-json": "2.1.1", "@rollup/plugin-alias": "5.0.0", "@rollup/plugin-json": "6.0.0", @@ -53,6 +54,8 @@ "json5": "2.2.3", "matter-js": "0.19.0", "photoswipe": "5.4.0", + "pretendard": "^1.3.8", + "pretendard-jp": "^1.3.8", "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 c44d37fe88..be88f42078 100644 --- a/packages/frontend/src/style.scss +++ b/packages/frontend/src/style.scss @@ -6,44 +6,28 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -@mixin font($font-family, $font-weight, $font-style, $font-local, $font-url) { - @font-face { - font-family: $font-family; - font-weight: $font-weight; - font-style: $font-style; - font-display: swap; - src: local($font-local), url($font-url) format('woff2'); - } -} - -@include font( - 'Pretendard JP', - 400, - normal, - 'Pretendard JP Regular', - 'https://cdn.jsdelivr.net/gh/orioncactus/pretendard/packages/pretendard-jp/dist/web/static/woff2/PretendardJP-Regular.woff2' -); -@include font( - 'Pretendard JP', - 700, - normal, - 'Pretendard JP Bold', - 'https://cdn.jsdelivr.net/gh/orioncactus/pretendard/packages/pretendard-jp/dist/web/static/woff2/PretendardJP-Bold.woff2' -); -@include font( - 'JetBrains Mono', - 400, - normal, - 'JetBrains Mono Regular', - 'https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono@master/fonts/webfonts/JetBrainsMono-Regular.woff2' -); -@include font( - 'JetBrains Mono', - 700, - normal, - 'JetBrains Mono Bold', - 'https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono@master/fonts/webfonts/JetBrainsMono-Bold.woff2' -); +@import "@fontsource/jetbrains-mono/100.css"; +@import "@fontsource/jetbrains-mono/100-italic.css"; +@import "@fontsource/jetbrains-mono/200.css"; +@import "@fontsource/jetbrains-mono/200-italic.css"; +@import "@fontsource/jetbrains-mono/300.css"; +@import "@fontsource/jetbrains-mono/300-italic.css"; +@import "@fontsource/jetbrains-mono/400.css"; +@import "@fontsource/jetbrains-mono/400-italic.css"; +@import "@fontsource/jetbrains-mono/500.css"; +@import "@fontsource/jetbrains-mono/500-italic.css"; +@import "@fontsource/jetbrains-mono/600.css"; +@import "@fontsource/jetbrains-mono/600-italic.css"; +@import "@fontsource/jetbrains-mono/700.css"; +@import "@fontsource/jetbrains-mono/700-italic.css"; +@import "@fontsource/jetbrains-mono/800.css"; +@import "@fontsource/jetbrains-mono/800-italic.css"; +@import "pretendard/dist/web/static/pretendard-dynamic-subset.css"; +@import "pretendard-jp/dist/web/static/pretendard-jp-dynamic-subset.css"; + +$default-font: "Pretendard JP", 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 Mono", "Pretendard JP", Pretendard, Fira code, Fira Mono, Consolas, Menlo, Courier, monospace !important; :root { --radius: 12px; @@ -80,10 +64,7 @@ html { accent-color: var(--accent); overflow: auto; overflow-wrap: break-word; - font-family: "Pretendard JP", 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; + font-family: $default-font; // incoming changes from v13 // font-family: 'Hiragino Maru Gothic Pro', "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif; font-size: 14px; @@ -199,7 +180,7 @@ html { } &.useSystemFont { - font-family: system-ui; + font-family: $system-font; } } @@ -515,12 +496,12 @@ hr { } ._monospace { - font-family: "Pretendard JP", "JetBrains Mono", Fira code, Fira Mono, Consolas, Menlo, Courier, monospace !important; + font-family: $monospace-font } code[class*="language-"], pre[class*="language-"] { - font-family: "JetBrains Mono", "Pretendard JP" , Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace !important; + font-family: $monospace-font } .prism-editor__textarea:focus { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0b48d54163..b8bac70b52 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -710,6 +710,9 @@ importers: '@discordapp/twemoji': specifier: 14.1.2 version: 14.1.2 + '@fontsource/jetbrains-mono': + specifier: ^5.0.12 + version: 5.0.12 '@github/webauthn-json': specifier: 2.1.1 version: 2.1.1 @@ -821,6 +824,12 @@ importers: photoswipe: specifier: 5.4.0 version: 5.4.0 + pretendard: + specifier: ^1.3.8 + version: 1.3.8 + pretendard-jp: + specifier: ^1.3.8 + version: 1.3.8 prismjs: specifier: 1.29.0 version: 1.29.0 @@ -3945,6 +3954,10 @@ packages: resolution: {integrity: sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw==} dev: true + /@fontsource/jetbrains-mono@5.0.12: + resolution: {integrity: sha512-BO2in8zNXWUn1TJsPWgL2qSMYU2SQKoKOmJ9FRrE9gMFtPhEDKgxc0hUCVmeDUcMFrafFEn+KqZ5a85z8rwMzA==} + dev: false + /@github/webauthn-json@2.1.1: resolution: {integrity: sha512-XrftRn4z75SnaJOmZQbt7Mk+IIjqVHw+glDGOxuHwXkZBZh/MBoRS7MHjSZMDaLhT4RjN2VqiEU7EOYleuJWSQ==} hasBin: true @@ -16908,6 +16921,14 @@ packages: engines: {node: '>= 0.8.0'} dev: true + /pretendard-jp@1.3.8: + resolution: {integrity: sha512-yRnEWummLceSk+J5iNPo9DU650PCHW9PpnqqykNFZYZk/mLTt9b/D5n295pK05Udoki8IRq21qyzGmvn5VChjQ==} + dev: false + + /pretendard@1.3.8: + resolution: {integrity: sha512-LTuUQsX0tE4vQVS4pL5xZ7p0Z4/sOZxZxeENydS0NnhDE4EOu+3pPQS1hoa9EIbaNuy+lL4P9ngAuXhD/FluiQ==} + dev: false + /prettier@2.8.8: resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==} engines: {node: '>=10.13.0'}