Steps to reproduce the issue

I have installed a template where I enable/disable Font Awesome:

Expected result

When I enable Font Awesome, the URL for Font Awesome coming from media/system/css/joomla-fontawesome.css should be generated correctly and the font being loaded correctly.

Actual result

A lot of error messages in web console:

Solicitud de origen cruzado bloqueada: La misma política de origen no permite la lectura de recursos remotos en http://media/vendor/fontawesome-free/webfonts/fa-solid-900.woff2. (Razón: Solicitud CORS sin éxito). Código de estado: (null).

downloadable font: download failed (font-family: "Font Awesome 5 Free" style:normal weight:900 stretch:100 src index:1): bad URI or cross-site access not allowed source: http://media/vendor/fontawesome-free/webfonts/fa-solid-900.woff2
Solicitud de origen cruzado bloqueada: La misma política de origen no permite la lectura de recursos remotos en http://media/vendor/fontawesome-free/webfonts/fa-brands-400.woff2. (Razón: Solicitud CORS sin éxito). Código de estado: (null).

downloadable font: download failed (font-family: "Font Awesome 5 Brands" style:normal weight:400 stretch:100 src index:1): bad URI or cross-site access not allowed source: http://media/vendor/fontawesome-free/webfonts/fa-brands-400.woff2
Solicitud de origen cruzado bloqueada: La misma política de origen no permite la lectura de recursos remotos en http://media/vendor/fontawesome-free/webfonts/fa-regular-400.woff2. (Razón: Solicitud CORS sin éxito). Código de estado: (null).

downloadable font: download failed (font-family: "Font Awesome 5 Free" style:normal weight:400 stretch:100 src index:1): bad URI or cross-site access not allowed source: http://media/vendor/fontawesome-free/webfonts/fa-regular-400.woff2
Solicitud de origen cruzado bloqueada: La misma política de origen no permite la lectura de recursos remotos en http://media/vendor/fontawesome-free/webfonts/fa-solid-900.woff. (Razón: Solicitud CORS sin éxito). Código de estado: (null).

downloadable font: download failed (font-family: "Font Awesome 5 Free" style:normal weight:900 stretch:100 src index:2): bad URI or cross-site access not allowed source: http://media/vendor/fontawesome-free/webfonts/fa-solid-900.woff
Solicitud de origen cruzado bloqueada: La misma política de origen no permite la lectura de recursos remotos en http://media/vendor/fontawesome-free/webfonts/fa-brands-400.woff. (Razón: Solicitud CORS sin éxito). Código de estado: (null).

downloadable font: download failed (font-family: "Font Awesome 5 Brands" style:normal weight:400 stretch:100 src index:2): bad URI or cross-site access not allowed source: http://media/vendor/fontawesome-free/webfonts/fa-brands-400.woff
Solicitud de origen cruzado bloqueada: La misma política de origen no permite la lectura de recursos remotos en http://media/vendor/fontawesome-free/webfonts/fa-regular-400.woff. (Razón: Solicitud CORS sin éxito). Código de estado: (null).

downloadable font: download failed (font-family: "Font Awesome 5 Free" style:normal weight:400 stretch:100 src index:2): bad URI or cross-site access not allowed source: http://media/vendor/fontawesome-free/webfonts/fa-regular-400.woff
Solicitud de origen cruzado bloqueada: La misma política de origen no permite la lectura de recursos remotos en http://media/vendor/fontawesome-free/webfonts/fa-solid-900.ttf. (Razón: Solicitud CORS sin éxito). Código de estado: (null).

The error starts from the line 6129:

@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../../../media/vendor/fontawesome-free/webfonts/fa-regular-400.eot");
  src: url("../../../media/vendor/fontawesome-free/webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../../../media/vendor/fontawesome-free/webfonts/fa-regular-400.woff2") format("woff2"), url("../../../media/vendor/fontawesome-free/webfonts/fa-regular-400.woff") format("woff"), url("../../../media/vendor/fontawesome-free/webfonts/fa-regular-400.ttf") format("truetype"), url("../../../media/vendor/fontawesome-free/webfonts/fa-regular-400.svg#fontawesome") format("svg");
}

And similar code lines being found in the same CSS file.

In addition to it, the website starts to load so slow because the browser tries to load the fonts with the incorrect URL.

System information (as much as possible)

PHP: 7.4.21
Joomla version: 4.1.3

Additional comments

Based on #30793 and tested in my local website (disabled font awesome from the template at production).