Skip to content

Commit 9ac1896

Browse files
Mohamed-HashemMohamed-Hashem
committed
Fix: Change font URLs from external CDN to local paths
- Changed all font URLs from https://react.dev/fonts/ to /fonts/ - Ensures site works independently without external dependencies - Improves loading performance and reliability - Addresses Copilot code review feedback
1 parent 9eca1fc commit 9ac1896

File tree

1 file changed

+38
-76
lines changed

1 file changed

+38
-76
lines changed

‎src/styles/index.css‎

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

1918
@font-face {
2019
font-family: 'Source Code Pro';
2120
font-style: normal;
2221
font-weight: 700;
2322
font-display: swap;
24-
src: url('https://react.dev/fonts/Source-Code-Pro-Bold.woff2')
25-
format('woff2');
23+
src: url('/fonts/Source-Code-Pro-Bold.woff2') format('woff2');
2624
}
2725

2826
/* Latin */
2927

3028
@font-face {
3129
font-family: 'Optimistic Display';
32-
src: url('https://react.dev/fonts/Optimistic_Display_W_Md.woff2')
33-
format('woff2');
30+
src: url('/fonts/Optimistic_Display_W_Md.woff2') format('woff2');
3431
font-weight: 500;
3532
font-style: normal;
3633
font-display: swap;
3734
}
3835

3936
@font-face {
4037
font-family: 'Optimistic Display';
41-
src: url('https://react.dev/fonts/Optimistic_Display_W_MdIt.woff2')
42-
format('woff2');
38+
src: url('/fonts/Optimistic_Display_W_MdIt.woff2') format('woff2');
4339
font-weight: 500;
4440
font-style: italic;
4541
font-display: swap;
4642
}
4743

4844
@font-face {
4945
font-family: 'Optimistic Display';
50-
src: url('https://react.dev/fonts/Optimistic_Display_W_SBd.woff2')
51-
format('woff2');
46+
src: url('/fonts/Optimistic_Display_W_SBd.woff2') format('woff2');
5247
font-weight: 600;
5348
font-style: normal;
5449
font-display: swap;
5550
}
5651

5752
@font-face {
5853
font-family: 'Optimistic Display';
59-
src: url('https://react.dev/fonts/Optimistic_Display_W_SBdIt.woff2')
60-
format('woff2');
54+
src: url('/fonts/Optimistic_Display_W_SBdIt.woff2') format('woff2');
6155
font-weight: 600;
6256
font-style: italic;
6357
font-display: swap;
6458
}
6559

6660
@font-face {
6761
font-family: 'Optimistic Display';
68-
src: url('https://react.dev/fonts/Optimistic_Display_W_Bd.woff2')
69-
format('woff2');
62+
src: url('/fonts/Optimistic_Display_W_Bd.woff2') format('woff2');
7063
font-weight: 700;
7164
font-style: normal;
7265
font-display: swap;
7366
}
7467

7568
@font-face {
7669
font-family: 'Optimistic Display';
77-
src: url('https://react.dev/fonts/Optimistic_Display_W_BdIt.woff2')
78-
format('woff2');
70+
src: url('/fonts/Optimistic_Display_W_BdIt.woff2') format('woff2');
7971
font-weight: 700;
8072
font-style: italic;
8173
font-display: swap;
8274
}
8375

8476
@font-face {
8577
font-family: 'Optimistic Text';
86-
src: url('https://react.dev/fonts/Optimistic_Text_W_Rg.woff2')
87-
format('woff2');
78+
src: url('/fonts/Optimistic_Text_W_Rg.woff2') format('woff2');
8879
font-weight: 400;
8980
font-style: normal;
9081
font-display: swap;
9182
}
9283

9384
@font-face {
9485
font-family: 'Optimistic Text';
95-
src: url('https://react.dev/fonts/Optimistic_Text_W_It.woff2')
96-
format('woff2');
86+
src: url('/fonts/Optimistic_Text_W_It.woff2') format('woff2');
9787
font-weight: 400;
9888
font-style: italic;
9989
font-display: swap;
10090
}
10191

10292
@font-face {
10393
font-family: 'Optimistic Text';
104-
src: url('https://react.dev/fonts/Optimistic_Text_W_Md.woff2')
105-
format('woff2');
94+
src: url('/fonts/Optimistic_Text_W_Md.woff2') format('woff2');
10695
font-weight: 500;
10796
font-style: normal;
10897
font-display: swap;
10998
}
11099

111100
@font-face {
112101
font-family: 'Optimistic Text';
113-
src: url('https://react.dev/fonts/Optimistic_Text_W_MdIt.woff2')
114-
format('woff2');
102+
src: url('/fonts/Optimistic_Text_W_MdIt.woff2') format('woff2');
115103
font-weight: 500;
116104
font-style: italic;
117105
font-display: swap;
118106
}
119107

120108
@font-face {
121109
font-family: 'Optimistic Text';
122-
src: url('https://react.dev/fonts/Optimistic_Text_W_Bd.woff2')
123-
format('woff2');
110+
src: url('/fonts/Optimistic_Text_W_Bd.woff2') format('woff2');
124111
font-weight: 700;
125112
font-style: normal;
126113
font-display: swap;
127114
}
128115

129116
@font-face {
130117
font-family: 'Optimistic Text';
131-
src: url('https://react.dev/fonts/Optimistic_Text_W_BdIt.woff2')
132-
format('woff2');
118+
src: url('/fonts/Optimistic_Text_W_BdIt.woff2') format('woff2');
133119
font-weight: 700;
134120
font-style: italic;
135121
font-display: swap;
@@ -139,8 +125,7 @@
139125

140126
@font-face {
141127
font-family: 'Optimistic Display';
142-
src: url('https://react.dev/fonts/Optimistic_Display_Arbc_W_Md.woff2')
143-
format('woff2');
128+
src: url('/fonts/Optimistic_Display_Arbc_W_Md.woff2') format('woff2');
144129
font-weight: 500;
145130
font-style: normal;
146131
font-display: swap;
@@ -149,8 +134,7 @@
149134

150135
@font-face {
151136
font-family: 'Optimistic Display';
152-
src: url('https://react.dev/fonts/Optimistic_Display_Arbc_W_SBd.woff2')
153-
format('woff2');
137+
src: url('/fonts/Optimistic_Display_Arbc_W_SBd.woff2') format('woff2');
154138
font-weight: 600;
155139
font-style: normal;
156140
font-display: swap;
@@ -159,8 +143,7 @@
159143

160144
@font-face {
161145
font-family: 'Optimistic Display';
162-
src: url('https://react.dev/fonts/Optimistic_Display_Arbc_W_Bd.woff2')
163-
format('woff2');
146+
src: url('/fonts/Optimistic_Display_Arbc_W_Bd.woff2') format('woff2');
164147
font-weight: 700;
165148
font-style: normal;
166149
font-display: swap;
@@ -169,8 +152,7 @@
169152

170153
@font-face {
171154
font-family: 'Optimistic Text';
172-
src: url('https://react.dev/fonts/Optimistic_Text_Arbc_W_Rg.woff2')
173-
format('woff2');
155+
src: url('/fonts/Optimistic_Text_Arbc_W_Rg.woff2') format('woff2');
174156
font-weight: 400;
175157
font-style: normal;
176158
font-display: swap;
@@ -179,8 +161,7 @@
179161

180162
@font-face {
181163
font-family: 'Optimistic Text';
182-
src: url('https://react.dev/fonts/Optimistic_Text_Arbc_W_Md.woff2')
183-
format('woff2');
164+
src: url('/fonts/Optimistic_Text_Arbc_W_Md.woff2') format('woff2');
184165
font-weight: 500;
185166
font-style: normal;
186167
font-display: swap;
@@ -189,8 +170,7 @@
189170

190171
@font-face {
191172
font-family: 'Optimistic Text';
192-
src: url('https://react.dev/fonts/Optimistic_Text_Arbc_W_Bd.woff2')
193-
format('woff2');
173+
src: url('/fonts/Optimistic_Text_Arbc_W_Bd.woff2') format('woff2');
194174
font-weight: 700;
195175
font-style: normal;
196176
font-display: swap;
@@ -201,8 +181,7 @@
201181

202182
@font-face {
203183
font-family: 'Optimistic Display';
204-
src: url('https://react.dev/fonts/Optimistic_Display_Cyrl_W_Md.woff2')
205-
format('woff2');
184+
src: url('/fonts/Optimistic_Display_Cyrl_W_Md.woff2') format('woff2');
206185
font-weight: 500;
207186
font-style: normal;
208187
font-display: swap;
@@ -211,8 +190,7 @@
211190

212191
@font-face {
213192
font-family: 'Optimistic Display';
214-
src: url('https://react.dev/fonts/Optimistic_Display_Cyrl_W_SBd.woff2')
215-
format('woff2');
193+
src: url('/fonts/Optimistic_Display_Cyrl_W_SBd.woff2') format('woff2');
216194
font-weight: 600;
217195
font-style: normal;
218196
font-display: swap;
@@ -221,8 +199,7 @@
221199

222200
@font-face {
223201
font-family: 'Optimistic Display';
224-
src: url('https://react.dev/fonts/Optimistic_Display_Cyrl_W_Bd.woff2')
225-
format('woff2');
202+
src: url('/fonts/Optimistic_Display_Cyrl_W_Bd.woff2') format('woff2');
226203
font-weight: 700;
227204
font-style: normal;
228205
font-display: swap;
@@ -231,8 +208,7 @@
231208

232209
@font-face {
233210
font-family: 'Optimistic Text';
234-
src: url('https://react.dev/fonts/Optimistic_Text_Cyrl_W_Rg.woff2')
235-
format('woff2');
211+
src: url('/fonts/Optimistic_Text_Cyrl_W_Rg.woff2') format('woff2');
236212
font-weight: 400;
237213
font-style: normal;
238214
font-display: swap;
@@ -241,8 +217,7 @@
241217

242218
@font-face {
243219
font-family: 'Optimistic Text';
244-
src: url('https://react.dev/fonts/Optimistic_Text_Cyrl_W_Md.woff2')
245-
format('woff2');
220+
src: url('/fonts/Optimistic_Text_Cyrl_W_Md.woff2') format('woff2');
246221
font-weight: 500;
247222
font-style: normal;
248223
font-display: swap;
@@ -251,8 +226,7 @@
251226

252227
@font-face {
253228
font-family: 'Optimistic Text';
254-
src: url('https://react.dev/fonts/Optimistic_Text_Cyrl_W_Bd.woff2')
255-
format('woff2');
229+
src: url('/fonts/Optimistic_Text_Cyrl_W_Bd.woff2') format('woff2');
256230
font-weight: 700;
257231
font-style: normal;
258232
font-display: swap;
@@ -263,8 +237,7 @@
263237

264238
@font-face {
265239
font-family: 'Optimistic Display';
266-
src: url('https://react.dev/fonts/Optimistic_Display_Deva_W_Md.woff2')
267-
format('woff2');
240+
src: url('/fonts/Optimistic_Display_Deva_W_Md.woff2') format('woff2');
268241
font-weight: 500;
269242
font-style: normal;
270243
font-display: swap;
@@ -274,8 +247,7 @@
274247

275248
@font-face {
276249
font-family: 'Optimistic Display';
277-
src: url('https://react.dev/fonts/Optimistic_Display_Deva_W_SBd.woff2')
278-
format('woff2');
250+
src: url('/fonts/Optimistic_Display_Deva_W_SBd.woff2') format('woff2');
279251
font-weight: 600;
280252
font-style: normal;
281253
font-display: swap;
@@ -285,8 +257,7 @@
285257

286258
@font-face {
287259
font-family: 'Optimistic Display';
288-
src: url('https://react.dev/fonts/Optimistic_Display_Deva_W_Bd.woff2')
289-
format('woff2');
260+
src: url('/fonts/Optimistic_Display_Deva_W_Bd.woff2') format('woff2');
290261
font-weight: 700;
291262
font-style: normal;
292263
font-display: swap;
@@ -296,8 +267,7 @@
296267

297268
@font-face {
298269
font-family: 'Optimistic Text';
299-
src: url('https://react.dev/fonts/Optimistic_Text_Deva_W_Rg.woff2')
300-
format('woff2');
270+
src: url('/fonts/Optimistic_Text_Deva_W_Rg.woff2') format('woff2');
301271
font-weight: 400;
302272
font-style: normal;
303273
font-display: swap;
@@ -307,8 +277,7 @@
307277

308278
@font-face {
309279
font-family: 'Optimistic Text';
310-
src: url('https://react.dev/fonts/Optimistic_Text_Deva_W_Md.woff2')
311-
format('woff2');
280+
src: url('/fonts/Optimistic_Text_Deva_W_Md.woff2') format('woff2');
312281
font-weight: 500;
313282
font-style: normal;
314283
font-display: swap;
@@ -318,8 +287,7 @@
318287

319288
@font-face {
320289
font-family: 'Optimistic Text';
321-
src: url('https://react.dev/fonts/Optimistic_Text_Deva_W_Bd.woff2')
322-
format('woff2');
290+
src: url('/fonts/Optimistic_Text_Deva_W_Bd.woff2') format('woff2');
323291
font-weight: 700;
324292
font-style: normal;
325293
font-display: swap;
@@ -331,8 +299,7 @@
331299

332300
@font-face {
333301
font-family: 'Optimistic Display';
334-
src: url('https://react.dev/fonts/Optimistic_Display_Viet_W_Md.woff2')
335-
format('woff2');
302+
src: url('/fonts/Optimistic_Display_Viet_W_Md.woff2') format('woff2');
336303
font-weight: 500;
337304
font-style: normal;
338305
font-display: swap;
@@ -341,8 +308,7 @@
341308

342309
@font-face {
343310
font-family: 'Optimistic Display';
344-
src: url('https://react.dev/fonts/Optimistic_Display_Viet_W_SBd.woff2')
345-
format('woff2');
311+
src: url('/fonts/Optimistic_Display_Viet_W_SBd.woff2') format('woff2');
346312
font-weight: 600;
347313
font-style: normal;
348314
font-display: swap;
@@ -351,8 +317,7 @@
351317

352318
@font-face {
353319
font-family: 'Optimistic Display';
354-
src: url('https://react.dev/fonts/Optimistic_Display_Viet_W_Bd.woff2')
355-
format('woff2');
320+
src: url('/fonts/Optimistic_Display_Viet_W_Bd.woff2') format('woff2');
356321
font-weight: 700;
357322
font-style: normal;
358323
font-display: swap;
@@ -361,8 +326,7 @@
361326

362327
@font-face {
363328
font-family: 'Optimistic Text';
364-
src: url('https://react.dev/fonts/Optimistic_Text_Viet_W_Rg.woff2')
365-
format('woff2');
329+
src: url('/fonts/Optimistic_Text_Viet_W_Rg.woff2') format('woff2');
366330
font-weight: 400;
367331
font-style: normal;
368332
font-display: swap;
@@ -371,8 +335,7 @@
371335

372336
@font-face {
373337
font-family: 'Optimistic Text';
374-
src: url('https://react.dev/fonts/Optimistic_Text_Viet_W_Md.woff2')
375-
format('woff2');
338+
src: url('/fonts/Optimistic_Text_Viet_W_Md.woff2') format('woff2');
376339
font-weight: 500;
377340
font-style: normal;
378341
font-display: swap;
@@ -381,8 +344,7 @@
381344

382345
@font-face {
383346
font-family: 'Optimistic Text';
384-
src: url('https://react.dev/fonts/Optimistic_Text_Viet_W_Bd.woff2')
385-
format('woff2');
347+
src: url('/fonts/Optimistic_Text_Viet_W_Bd.woff2') format('woff2');
386348
font-weight: 700;
387349
font-style: normal;
388350
font-display: swap;

0 commit comments

Comments
 (0)