diff --git a/packages/frontend/package.json b/packages/frontend/package.json index 17243c6757..e2fd83cd93 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -17,7 +17,6 @@ }, "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", @@ -55,8 +54,6 @@ "json5": "2.2.3", "matter-js": "0.19.0", "photoswipe": "5.4.1", - "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 be88f42078..c44d37fe88 100644 --- a/packages/frontend/src/style.scss +++ b/packages/frontend/src/style.scss @@ -6,28 +6,44 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -@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; +@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' +); :root { --radius: 12px; @@ -64,7 +80,10 @@ html { accent-color: var(--accent); overflow: auto; overflow-wrap: break-word; - font-family: $default-font; + 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; // incoming changes from v13 // font-family: 'Hiragino Maru Gothic Pro', "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif; font-size: 14px; @@ -180,7 +199,7 @@ html { } &.useSystemFont { - font-family: $system-font; + font-family: system-ui; } } @@ -496,12 +515,12 @@ hr { } ._monospace { - font-family: $monospace-font + font-family: "Pretendard JP", "JetBrains Mono", Fira code, Fira Mono, Consolas, Menlo, Courier, monospace !important; } code[class*="language-"], pre[class*="language-"] { - font-family: $monospace-font + font-family: "JetBrains Mono", "Pretendard JP" , Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace !important; } .prism-editor__textarea:focus {