Skip to content

Commit 225fc71

Browse files
gaearonclaude
gaearon
and
claude
committed
Serve fonts from react.dev again
The font URLs were made relative in this PR, but translation forks rely on loading (and sharing the cache for) the Optimistic fonts from react.dev. Restores the absolute URLs in the CSS and the preloads. Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 0ef1557 commit 225fc71

2 files changed

Lines changed: 80 additions & 39 deletions

File tree

‎src/app/layout.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,9 @@ const themeScript = `
146146
})();
147147
`;
148148

149+
// Fonts are served from react.dev on every deployment (including the
150+
// translation forks), so they share one cache across subdomains.
151+
const FONT_ORIGIN = 'https://react.dev';
149152
const FONT_PRELOADS = [
150153
'Source-Code-Pro-Regular.woff2',
151154
'Source-Code-Pro-Bold.woff2',
@@ -189,7 +192,7 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
189192
<link
190193
key={file}
191194
rel="preload"
192-
href={`/fonts/${file}`}
195+
href={`${FONT_ORIGIN}/fonts/${file}`}
193196
as="font"
194197
type="font/woff2"
195198
crossOrigin="anonymous"

‎src/styles/index.css‎

Lines changed: 76 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -12,110 +12,124 @@
1212
font-style: normal;
1313
font-weight: 400;
1414
font-display: swap;
15-
src: url('/fonts/Source-Code-Pro-Regular.woff2') format('woff2');
15+
src: url('https://react.dev/fonts/Source-Code-Pro-Regular.woff2')
16+
format('woff2');
1617
}
1718

1819
@font-face {
1920
font-family: 'Source Code Pro';
2021
font-style: normal;
2122
font-weight: 700;
2223
font-display: swap;
23-
src: url('/fonts/Source-Code-Pro-Bold.woff2') format('woff2');
24+
src: url('https://react.dev/fonts/Source-Code-Pro-Bold.woff2')
25+
format('woff2');
2426
}
2527

2628
/* Latin */
2729

2830
@font-face {
2931
font-family: 'Optimistic Display';
30-
src: url('/fonts/Optimistic_Display_W_Md.woff2') format('woff2');
32+
src: url('https://react.dev/fonts/Optimistic_Display_W_Md.woff2')
33+
format('woff2');
3134
font-weight: 500;
3235
font-style: normal;
3336
font-display: swap;
3437
}
3538

3639
@font-face {
3740
font-family: 'Optimistic Display';
38-
src: url('/fonts/Optimistic_Display_W_MdIt.woff2') format('woff2');
41+
src: url('https://react.dev/fonts/Optimistic_Display_W_MdIt.woff2')
42+
format('woff2');
3943
font-weight: 500;
4044
font-style: italic;
4145
font-display: swap;
4246
}
4347

4448
@font-face {
4549
font-family: 'Optimistic Display';
46-
src: url('/fonts/Optimistic_Display_W_SBd.woff2') format('woff2');
50+
src: url('https://react.dev/fonts/Optimistic_Display_W_SBd.woff2')
51+
format('woff2');
4752
font-weight: 600;
4853
font-style: normal;
4954
font-display: swap;
5055
}
5156

5257
@font-face {
5358
font-family: 'Optimistic Display';
54-
src: url('/fonts/Optimistic_Display_W_SBdIt.woff2') format('woff2');
59+
src: url('https://react.dev/fonts/Optimistic_Display_W_SBdIt.woff2')
60+
format('woff2');
5561
font-weight: 600;
5662
font-style: italic;
5763
font-display: swap;
5864
}
5965

6066
@font-face {
6167
font-family: 'Optimistic Display';
62-
src: url('/fonts/Optimistic_Display_W_Bd.woff2') format('woff2');
68+
src: url('https://react.dev/fonts/Optimistic_Display_W_Bd.woff2')
69+
format('woff2');
6370
font-weight: 700;
6471
font-style: normal;
6572
font-display: swap;
6673
}
6774

6875
@font-face {
6976
font-family: 'Optimistic Display';
70-
src: url('/fonts/Optimistic_Display_W_BdIt.woff2') format('woff2');
77+
src: url('https://react.dev/fonts/Optimistic_Display_W_BdIt.woff2')
78+
format('woff2');
7179
font-weight: 700;
7280
font-style: italic;
7381
font-display: swap;
7482
}
7583

7684
@font-face {
7785
font-family: 'Optimistic Text';
78-
src: url('/fonts/Optimistic_Text_W_Rg.woff2') format('woff2');
86+
src: url('https://react.dev/fonts/Optimistic_Text_W_Rg.woff2')
87+
format('woff2');
7988
font-weight: 400;
8089
font-style: normal;
8190
font-display: swap;
8291
}
8392

8493
@font-face {
8594
font-family: 'Optimistic Text';
86-
src: url('/fonts/Optimistic_Text_W_It.woff2') format('woff2');
95+
src: url('https://react.dev/fonts/Optimistic_Text_W_It.woff2')
96+
format('woff2');
8797
font-weight: 400;
8898
font-style: italic;
8999
font-display: swap;
90100
}
91101

92102
@font-face {
93103
font-family: 'Optimistic Text';
94-
src: url('/fonts/Optimistic_Text_W_Md.woff2') format('woff2');
104+
src: url('https://react.dev/fonts/Optimistic_Text_W_Md.woff2')
105+
format('woff2');
95106
font-weight: 500;
96107
font-style: normal;
97108
font-display: swap;
98109
}
99110

100111
@font-face {
101112
font-family: 'Optimistic Text';
102-
src: url('/fonts/Optimistic_Text_W_MdIt.woff2') format('woff2');
113+
src: url('https://react.dev/fonts/Optimistic_Text_W_MdIt.woff2')
114+
format('woff2');
103115
font-weight: 500;
104116
font-style: italic;
105117
font-display: swap;
106118
}
107119

108120
@font-face {
109121
font-family: 'Optimistic Text';
110-
src: url('/fonts/Optimistic_Text_W_Bd.woff2') format('woff2');
122+
src: url('https://react.dev/fonts/Optimistic_Text_W_Bd.woff2')
123+
format('woff2');
111124
font-weight: 700;
112125
font-style: normal;
113126
font-display: swap;
114127
}
115128

116129
@font-face {
117130
font-family: 'Optimistic Text';
118-
src: url('/fonts/Optimistic_Text_W_BdIt.woff2') format('woff2');
131+
src: url('https://react.dev/fonts/Optimistic_Text_W_BdIt.woff2')
132+
format('woff2');
119133
font-weight: 700;
120134
font-style: italic;
121135
font-display: swap;
@@ -125,7 +139,8 @@
125139

126140
@font-face {
127141
font-family: 'Optimistic Display';
128-
src: url('/fonts/Optimistic_Display_Arbc_W_Md.woff2') format('woff2');
142+
src: url('https://react.dev/fonts/Optimistic_Display_Arbc_W_Md.woff2')
143+
format('woff2');
129144
font-weight: 500;
130145
font-style: normal;
131146
font-display: swap;
@@ -134,7 +149,8 @@
134149

135150
@font-face {
136151
font-family: 'Optimistic Display';
137-
src: url('/fonts/Optimistic_Display_Arbc_W_SBd.woff2') format('woff2');
152+
src: url('https://react.dev/fonts/Optimistic_Display_Arbc_W_SBd.woff2')
153+
format('woff2');
138154
font-weight: 600;
139155
font-style: normal;
140156
font-display: swap;
@@ -143,7 +159,8 @@
143159

144160
@font-face {
145161
font-family: 'Optimistic Display';
146-
src: url('/fonts/Optimistic_Display_Arbc_W_Bd.woff2') format('woff2');
162+
src: url('https://react.dev/fonts/Optimistic_Display_Arbc_W_Bd.woff2')
163+
format('woff2');
147164
font-weight: 700;
148165
font-style: normal;
149166
font-display: swap;
@@ -152,7 +169,8 @@
152169

153170
@font-face {
154171
font-family: 'Optimistic Text';
155-
src: url('/fonts/Optimistic_Text_Arbc_W_Rg.woff2') format('woff2');
172+
src: url('https://react.dev/fonts/Optimistic_Text_Arbc_W_Rg.woff2')
173+
format('woff2');
156174
font-weight: 400;
157175
font-style: normal;
158176
font-display: swap;
@@ -161,7 +179,8 @@
161179

162180
@font-face {
163181
font-family: 'Optimistic Text';
164-
src: url('/fonts/Optimistic_Text_Arbc_W_Md.woff2') format('woff2');
182+
src: url('https://react.dev/fonts/Optimistic_Text_Arbc_W_Md.woff2')
183+
format('woff2');
165184
font-weight: 500;
166185
font-style: normal;
167186
font-display: swap;
@@ -170,7 +189,8 @@
170189

171190
@font-face {
172191
font-family: 'Optimistic Text';
173-
src: url('/fonts/Optimistic_Text_Arbc_W_Bd.woff2') format('woff2');
192+
src: url('https://react.dev/fonts/Optimistic_Text_Arbc_W_Bd.woff2')
193+
format('woff2');
174194
font-weight: 700;
175195
font-style: normal;
176196
font-display: swap;
@@ -181,7 +201,8 @@
181201

182202
@font-face {
183203
font-family: 'Optimistic Display';
184-
src: url('/fonts/Optimistic_Display_Cyrl_W_Md.woff2') format('woff2');
204+
src: url('https://react.dev/fonts/Optimistic_Display_Cyrl_W_Md.woff2')
205+
format('woff2');
185206
font-weight: 500;
186207
font-style: normal;
187208
font-display: swap;
@@ -190,7 +211,8 @@
190211

191212
@font-face {
192213
font-family: 'Optimistic Display';
193-
src: url('/fonts/Optimistic_Display_Cyrl_W_SBd.woff2') format('woff2');
214+
src: url('https://react.dev/fonts/Optimistic_Display_Cyrl_W_SBd.woff2')
215+
format('woff2');
194216
font-weight: 600;
195217
font-style: normal;
196218
font-display: swap;
@@ -199,7 +221,8 @@
199221

200222
@font-face {
201223
font-family: 'Optimistic Display';
202-
src: url('/fonts/Optimistic_Display_Cyrl_W_Bd.woff2') format('woff2');
224+
src: url('https://react.dev/fonts/Optimistic_Display_Cyrl_W_Bd.woff2')
225+
format('woff2');
203226
font-weight: 700;
204227
font-style: normal;
205228
font-display: swap;
@@ -208,7 +231,8 @@
208231

209232
@font-face {
210233
font-family: 'Optimistic Text';
211-
src: url('/fonts/Optimistic_Text_Cyrl_W_Rg.woff2') format('woff2');
234+
src: url('https://react.dev/fonts/Optimistic_Text_Cyrl_W_Rg.woff2')
235+
format('woff2');
212236
font-weight: 400;
213237
font-style: normal;
214238
font-display: swap;
@@ -217,7 +241,8 @@
217241

218242
@font-face {
219243
font-family: 'Optimistic Text';
220-
src: url('/fonts/Optimistic_Text_Cyrl_W_Md.woff2') format('woff2');
244+
src: url('https://react.dev/fonts/Optimistic_Text_Cyrl_W_Md.woff2')
245+
format('woff2');
221246
font-weight: 500;
222247
font-style: normal;
223248
font-display: swap;
@@ -226,7 +251,8 @@
226251

227252
@font-face {
228253
font-family: 'Optimistic Text';
229-
src: url('/fonts/Optimistic_Text_Cyrl_W_Bd.woff2') format('woff2');
254+
src: url('https://react.dev/fonts/Optimistic_Text_Cyrl_W_Bd.woff2')
255+
format('woff2');
230256
font-weight: 700;
231257
font-style: normal;
232258
font-display: swap;
@@ -237,7 +263,8 @@
237263

238264
@font-face {
239265
font-family: 'Optimistic Display';
240-
src: url('/fonts/Optimistic_Display_Deva_W_Md.woff2') format('woff2');
266+
src: url('https://react.dev/fonts/Optimistic_Display_Deva_W_Md.woff2')
267+
format('woff2');
241268
font-weight: 500;
242269
font-style: normal;
243270
font-display: swap;
@@ -247,7 +274,8 @@
247274

248275
@font-face {
249276
font-family: 'Optimistic Display';
250-
src: url('/fonts/Optimistic_Display_Deva_W_SBd.woff2') format('woff2');
277+
src: url('https://react.dev/fonts/Optimistic_Display_Deva_W_SBd.woff2')
278+
format('woff2');
251279
font-weight: 600;
252280
font-style: normal;
253281
font-display: swap;
@@ -257,7 +285,8 @@
257285

258286
@font-face {
259287
font-family: 'Optimistic Display';
260-
src: url('/fonts/Optimistic_Display_Deva_W_Bd.woff2') format('woff2');
288+
src: url('https://react.dev/fonts/Optimistic_Display_Deva_W_Bd.woff2')
289+
format('woff2');
261290
font-weight: 700;
262291
font-style: normal;
263292
font-display: swap;
@@ -267,7 +296,8 @@
267296

268297
@font-face {
269298
font-family: 'Optimistic Text';
270-
src: url('/fonts/Optimistic_Text_Deva_W_Rg.woff2') format('woff2');
299+
src: url('https://react.dev/fonts/Optimistic_Text_Deva_W_Rg.woff2')
300+
format('woff2');
271301
font-weight: 400;
272302
font-style: normal;
273303
font-display: swap;
@@ -277,7 +307,8 @@
277307

278308
@font-face {
279309
font-family: 'Optimistic Text';
280-
src: url('/fonts/Optimistic_Text_Deva_W_Md.woff2') format('woff2');
310+
src: url('https://react.dev/fonts/Optimistic_Text_Deva_W_Md.woff2')
311+
format('woff2');
281312
font-weight: 500;
282313
font-style: normal;
283314
font-display: swap;
@@ -287,7 +318,8 @@
287318

288319
@font-face {
289320
font-family: 'Optimistic Text';
290-
src: url('/fonts/Optimistic_Text_Deva_W_Bd.woff2') format('woff2');
321+
src: url('https://react.dev/fonts/Optimistic_Text_Deva_W_Bd.woff2')
322+
format('woff2');
291323
font-weight: 700;
292324
font-style: normal;
293325
font-display: swap;
@@ -299,7 +331,8 @@
299331

300332
@font-face {
301333
font-family: 'Optimistic Display';
302-
src: url('/fonts/Optimistic_Display_Viet_W_Md.woff2') format('woff2');
334+
src: url('https://react.dev/fonts/Optimistic_Display_Viet_W_Md.woff2')
335+
format('woff2');
303336
font-weight: 500;
304337
font-style: normal;
305338
font-display: swap;
@@ -308,7 +341,8 @@
308341

309342
@font-face {
310343
font-family: 'Optimistic Display';
311-
src: url('/fonts/Optimistic_Display_Viet_W_SBd.woff2') format('woff2');
344+
src: url('https://react.dev/fonts/Optimistic_Display_Viet_W_SBd.woff2')
345+
format('woff2');
312346
font-weight: 600;
313347
font-style: normal;
314348
font-display: swap;
@@ -317,7 +351,8 @@
317351

318352
@font-face {
319353
font-family: 'Optimistic Display';
320-
src: url('/fonts/Optimistic_Display_Viet_W_Bd.woff2') format('woff2');
354+
src: url('https://react.dev/fonts/Optimistic_Display_Viet_W_Bd.woff2')
355+
format('woff2');
321356
font-weight: 700;
322357
font-style: normal;
323358
font-display: swap;
@@ -326,7 +361,8 @@
326361

327362
@font-face {
328363
font-family: 'Optimistic Text';
329-
src: url('/fonts/Optimistic_Text_Viet_W_Rg.woff2') format('woff2');
364+
src: url('https://react.dev/fonts/Optimistic_Text_Viet_W_Rg.woff2')
365+
format('woff2');
330366
font-weight: 400;
331367
font-style: normal;
332368
font-display: swap;
@@ -335,7 +371,8 @@
335371

336372
@font-face {
337373
font-family: 'Optimistic Text';
338-
src: url('/fonts/Optimistic_Text_Viet_W_Md.woff2') format('woff2');
374+
src: url('https://react.dev/fonts/Optimistic_Text_Viet_W_Md.woff2')
375+
format('woff2');
339376
font-weight: 500;
340377
font-style: normal;
341378
font-display: swap;
@@ -344,7 +381,8 @@
344381

345382
@font-face {
346383
font-family: 'Optimistic Text';
347-
src: url('/fonts/Optimistic_Text_Viet_W_Bd.woff2') format('woff2');
384+
src: url('https://react.dev/fonts/Optimistic_Text_Viet_W_Bd.woff2')
385+
format('woff2');
348386
font-weight: 700;
349387
font-style: normal;
350388
font-display: swap;

0 commit comments

Comments
 (0)