Fontawesome warnings: “preload” and “crossorigin attribute”

[dbitouze]

A minimalist sphinx-doc site, with pydata-sphinx-theme (v. 0.14.4) as HTML theme, gives in the DevTools of Firefox and Chromium-browser a lot of warnings related to fontawesome:

• With Firefox:

  downloadable font: Glyph bbox was incorrect (glyph ids 2 3 5 8 9 10 11 12 14 17 19 21 22 32 34 35 39 40 43 44 45 46 47 50 51 52 53 55 56 58 60 61 62 64 65 66 67 68 69 71 72 73 75 78 79 80 81 83 90 93 96 101 103 104 105 108 109 116 117 118 120 123 125 127 135 138 139 141 142 143 144 145 147 148 149 153 154 156 160 161 162 163 164 168 169 172 178 192 194 202 206 207 209 210 213 217 218 222 223 224 226 227 228 229 234 235 236 237 238 239 244 245 246 247 248 249 250 251 252 253 254 255 256 262 263 265 267 274 277 278 279 280 282 285 286 287 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 320 334 337 338 339 341 343 344 345 352 353 355 356 357 358 361 362 364 365 370 373 378 380 381 382 385 388 389 391 392 393 401 402 405 406 417 418 419 423 438 447 448 449 450 453 454 455 456 471 477 479 480 481 484 485 489 490 492 498 499 500 502 505 507 508 514 515 524 525 526 527 531 533 534 541 542 548 549 550 551 553 554 555 559 561 568 570 599 601 602 603 606 608 613 614 616 617 622 636 642 643 644 646 649 650 653 654 661 662 663 664 669 670 671 673 674 678 679 680 681 682 685 697 698 701 707 713 716 717 728 729 731 735 737 742 745 746 751 760 775 778 787 788 789 793 795 797 799 800 801 802 803 805 825 826 827 828 830 837 838 839 840 841 842 843 844 847 848 855 856 861 862 870 872 873 897 906 907 910 912 921 924 927 928 929 930 932 935 936 937 940 941 942 943 944 946 947 948 949 951 957 959 960 961 963 965 968 972 973 976 977 978 980 981 982 988 999 1000 1003 1004 1005 1007 1008 1010 1011 1012 1015 1019 1025 1027 1030 1036 1041 1044 1047 1049 1051 1052 1056 1057 1059 1062 1067 1071 1072 1075 1083 1086 1103 1109 1110 1111 1112 1115 1116 1120 1121 1123 1124 1130 1131 1132 1135 1141 1143 1144 1146 1147 1149 1150 1151 1156 1159 1162 1164 1166 1169 1176 1185 1186 1192 1194 1195 1196 1198 1199 1200 1203 1204 1205 1207 1210 1211 1213 1214 1215 1217 1218 1219 1223 1225 1227 1229 1230 1231 1232 1235 1236 1241 1242 1246 1248 1250 1251 1257 1258 1259 1260 1264 1266 1268 1270 1272 1273 1274 1275 1276 1279 1280 1285 1286 1288 1289 1290 1291 1292 1295 1296 1299 1300 1302 1303 1304 1308 1309 1310 1311 1312 1314 1316 1318 1319 1320 1327 1329 1330 1333 1334 1335 1336 1340 1342 1343 1344 1349 1351 1355 1356 1368 1370 1371 1374 1375 1376 1379 1380 1381 1382 1383 1384 1386) (font-family: "Font Awesome 6 Free" style:normal weight:900 stretch:100 src index:0) source: file:///home/bitouze/test-pydata-sphinx-theme/_build/html/_static/vendor/fontawesome/6.1.2/webfonts/fa-solid-900.woff2
  The resource « file:///home/bitouze/test-pydata-sphinx-theme/_build/html/_static/vendor/fontawesome/6.1.2/webfonts/fa-brands-400.woff2 » was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing. index.html
  The resource « file:///home/bitouze/test-pydata-sphinx-theme/_build/html/_static/vendor/fontawesome/6.1.2/webfonts/fa-regular-400.woff2 » was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing. index.html
  

• With Chromium-browser:

  index.html:1 Access to font at 'file:///home/bitouze/test-pydata-sphinx-theme/_build/html/_static/vendor/fontawesome/6.1.2/webfonts/fa-solid-900.woff2' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
  index.html:27 
          
          
         GET file:///home/bitouze/test-pydata-sphinx-theme/_build/html/_static/vendor/fontawesome/6.1.2/webfonts/fa-solid-900.woff2 net::ERR_FAILED
  index.html:1 Access to font at 'file:///home/bitouze/test-pydata-sphinx-theme/_build/html/_static/vendor/fontawesome/6.1.2/webfonts/fa-brands-400.woff2' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
  index.html:28 
          
          
         GET file:///home/bitouze/test-pydata-sphinx-theme/_build/html/_static/vendor/fontawesome/6.1.2/webfonts/fa-brands-400.woff2 net::ERR_FAILED
  index.html:1 Access to font at 'file:///home/bitouze/test-pydata-sphinx-theme/_build/html/_static/vendor/fontawesome/6.1.2/webfonts/fa-regular-400.woff2' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
  index.html:29 
          
          
         GET file:///home/bitouze/test-pydata-sphinx-theme/_build/html/_static/vendor/fontawesome/6.1.2/webfonts/fa-regular-400.woff2 net::ERR_FAILED
  A preload for '<URL>' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.
  A preload for '<URL>' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.
  A preload for '<URL>' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.
  A preload for '<URL>' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.
  A preload for '<URL>' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.
  A preload for '<URL>' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.
  A preload for '<URL>' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.
  A preload for '<URL>' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.
  A preload for '<URL>' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.
  pydata-sphinx-theme.js:54 [PST]: Changed to dark mode using the dark theme.
  index.html:1 The resource file:///home/bitouze/test-pydata-sphinx-theme/_build/html/_static/vendor/fontawesome/6.1.2/webfonts/fa-brands-400.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
  index.html:1 The resource file:///home/bitouze/test-pydata-sphinx-theme/_build/html/_static/vendor/fontawesome/6.1.2/webfonts/fa-regular-400.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
  index.html:1 The resource file:///home/bitouze/test-pydata-sphinx-theme/_build/html/_static/vendor/fontawesome/6.1.2/webfonts/fa-solid-900.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
  

[12rambau]

I went on the web to undestand this issue and this is what I understaood:

The resource « url » was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing. index.html

means that these 2 fonts are send to the browser and never used in index.html.
In sphinx, extra assets (css or javascripts) are all send to the whole site whitout consideration on their uses. add a single brand icon on your frontpage and this should disapear.

I would ignore this one.

was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

https://stackoverflow.com/questions/56177867/three-warnings-for-font-awesome-in-chrome-namely-integrity-mismatch-appro

it seems adding a "as" statement should solve it.

let me make a PR that you can try.

[electric-coder]

I'm also running into these using Firefox:

The resource at “file:///C:/my_project/docs/build/html/_static/vendor/fontawesome/6.5.1/webfonts/fa-solid-900.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.

Using pydata-sphinx-theme 0.15.2

[12rambau]

@electric-coder can you test against this branch ? https://github.com/12rambau/pydata-sphinx-theme/tree/fontawesome

we lack testing to understand what goes wrong from your side.

[trallard]

@12rambau @electric-coder I also recently opened this PR to try and rework the bundling for PST #1955

I believe this should fix the preload warnings seen here, so could either of you check/build against that branch?

[electric-coder]

I will give those branches a try today or at latest tomorrow @trallard @12rambau

[electric-coder]

@12rambau @trallard I guess there's good news... I installed the branch with pip install git+https://github.com/pydata/pydata-sphinx-theme@trallard/webpack-5 in a clean venv (I decided to test the more recent branch first) using:

Python 3.11.3
Sphinx 8.0.2
Firefox 129.0.1 (64-bit) on Windows 10

After creating a new sphinx-quickstart project with minimal settings and using only autodoc, the preload warnings reported in this thread are gone for me. See the screenshot, on the left side is the new project and on the right side my old production project using pydata-sphinx-theme 0.15.2 that still shows the warnings: (I hope the test is enough since it's being run at the same time on the same machine).

[trallard]

Thanks @electric-coder 🙏🏽 I thought this would get rid of such warnings.
Hopefully someone in the team will be able to review the PR soon ish.