Skip to content

Commit e1e43fe

Browse files
pettinarippettinarip
authored
Merge pull request #13364 from TylerAPfledderer/refactor/mono-font-static-import
refactor: use @font-face import for mono font
2 parents 59b94f2 + 284af3e commit e1e43fe

File tree

5 files changed

+60
-26
lines changed

5 files changed

+60
-26
lines changed

‎.storybook/preview-head.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@
22

33
:root {
44
--font-inter: 'Inter', sans-serif;
5+
--font-mono: "IBM Plex Mono", Courier, monospace;
56
}
67

78
</style>
89

9-
<link rel="preload" href="/fonts/inter/latin.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
10+
<link rel="preload" href="/fonts/inter/latin.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
11+
<link rel="preload" href="/fonts/ibm-plex-mono/IBMPlexMono-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous" />

‎src/fonts/IBMPlexMono-Regular.ttf renamed to ‎public/fonts/ibm-plex-mono/IBMPlexMono-Regular.ttf

File renamed without changes.

‎src/lib/fonts.ts

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎src/pages/_app.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import "../styles/global.css"
1414

1515
import { useLocaleDirection } from "@/hooks/useLocaleDirection"
1616
import { BaseLayout } from "@/layouts/BaseLayout"
17-
import { mono } from "@/lib/fonts"
1817

1918
const App = ({ Component, pageProps }: AppPropsWithLayout) => {
2019
useEffect(() => {
@@ -40,7 +39,7 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
4039
{`
4140
:root {
4241
--font-inter: Inter, sans-serif;
43-
--font-mono: ${mono.style.fontFamily};
42+
--font-mono: "IBM Plex Mono", Courier, monospace;
4443
}
4544
`}
4645
</style>

‎src/styles/global.css

Lines changed: 56 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
src: url(/fonts/inter/cyrillic-ext.woff2) format("woff2");
1010
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
1111
U+FE2E-FE2F;
12-
}
12+
}
1313
/* cyrillic */
1414
@font-face {
1515
font-family: "Inter";
@@ -36,7 +36,7 @@
3636
font-display: swap;
3737
src: url(/fonts/inter/greek.woff2) format("woff2");
3838
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
39-
U+03A3-03FF;
39+
U+03A3-03FF;
4040
}
4141
/* vietnamese */
4242
@font-face {
@@ -46,7 +46,7 @@
4646
font-display: swap;
4747
src: url(/fonts/inter/vietnamese.woff2) format("woff2");
4848
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
49-
U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
49+
U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
5050
U+1EA0-1EF9, U+20AB;
5151
}
5252
/* latin-ext */
@@ -58,7 +58,7 @@
5858
src: url(/fonts/inter/latin-ext.woff2) format("woff2");
5959
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
6060
U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
61-
}
61+
}
6262
/* latin */
6363
@font-face {
6464
font-family: "Inter";
@@ -67,8 +67,8 @@
6767
font-display: swap;
6868
src: url(/fonts/inter/latin.woff2) format("woff2");
6969
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
70-
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
71-
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
70+
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
71+
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
7272
}
7373
/* cyrillic-ext */
7474
@font-face {
@@ -78,7 +78,7 @@
7878
font-display: swap;
7979
src: url(/fonts/inter/cyrillic-ext.woff2) format("woff2");
8080
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
81-
U+FE2E-FE2F;
81+
U+FE2E-FE2F;
8282
}
8383
/* cyrillic */
8484
@font-face {
@@ -106,7 +106,7 @@
106106
font-display: swap;
107107
src: url(/fonts/inter/greek.woff2) format("woff2");
108108
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
109-
U+03A3-03FF;
109+
U+03A3-03FF;
110110
}
111111
/* vietnamese */
112112
@font-face {
@@ -118,16 +118,16 @@
118118
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
119119
U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
120120
U+1EA0-1EF9, U+20AB;
121-
}
122-
/* latin-ext */
121+
}
122+
/* latin-ext */
123123
@font-face {
124124
font-family: "Inter";
125125
font-style: normal;
126126
font-weight: 700;
127127
font-display: swap;
128128
src: url(/fonts/inter/latin-ext.woff2) format("woff2");
129129
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
130-
U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
130+
U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
131131
}
132132
/* latin */
133133
@font-face {
@@ -137,6 +137,49 @@
137137
font-display: swap;
138138
src: url(/fonts/inter/latin.woff2) format("woff2");
139139
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
140-
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
141-
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
140+
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
141+
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
142+
}
143+
144+
/* css imported from https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400 */
145+
146+
/* cyrillic-ext */
147+
@font-face {
148+
font-family: 'IBM Plex Mono';
149+
font-style: normal;
150+
font-weight: 400;
151+
src: url(/fonts/ibm-plex-mono/IBMPlexMono-Regular.ttf) format('truetype');
152+
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
153+
}
154+
/* cyrillic */
155+
@font-face {
156+
font-family: 'IBM Plex Mono';
157+
font-style: normal;
158+
font-weight: 400;
159+
src: url(/fonts/ibm-plex-mono/IBMPlexMono-Regular.ttf) format('truetype');
160+
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
142161
}
162+
/* vietnamese */
163+
@font-face {
164+
font-family: 'IBM Plex Mono';
165+
font-style: normal;
166+
font-weight: 400;
167+
src: url(/fonts/ibm-plex-mono/IBMPlexMono-Regular.ttf) format('truetype');
168+
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
169+
}
170+
/* latin-ext */
171+
@font-face {
172+
font-family: 'IBM Plex Mono';
173+
font-style: normal;
174+
font-weight: 400;
175+
src: url(/fonts/ibm-plex-mono/IBMPlexMono-Regular.ttf) format('truetype');
176+
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
177+
}
178+
/* latin */
179+
@font-face {
180+
font-family: 'IBM Plex Mono';
181+
font-style: normal;
182+
font-weight: 400;
183+
src: url(/fonts/ibm-plex-mono/IBMPlexMono-Regular.ttf) format('truetype');
184+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
185+
}

0 commit comments

Comments
 (0)