Why isn't my custom font working properly on popular browsers?

Question

I Downloaded all the formats of this two fonts, the humane one works on mozilla and chrome but not on safari and the Sharp Grotesk font doesn't work in none of the most popular browsers.

In my CSS I have :

:root {
  /*color palette*/
  --color-primario: #305ae2;
  --color-secundario-oscuro: #000111;
  --color-secundario-claro: #f7f7f7;

  /*fonts*/
  --fuente-titulos: "Humane", sans-serif;
  --fuente-cuerpo: "Sharp", sans-serif;
}

@font-face {
  font-family: "Sharp", sans-serif;
  src: url("../fonts/SharpGrotesk-Medium20.woff2") format("woff2"),
    url("../fonts/SharpGrotesk-Medium20.woff") format("woff"),
    url("../fonts/SharpGrotesk-Medium20.ttf") format("truetype"),
    url("../fonts/SharpGrotesk-Medium20.svg") format("svg"),
    url("../fonts/SharpGrotesk-Medium20.eot") format("embedded-opentype"),
    url("../fonts/SharpGrotesk-Medium20.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: "Sharp", sans-serif;
  src: url("../fonts/SharpGrotesk-Book20.woff2") format("woff2"),
    url("../fonts/SharpGrotesk-Book20.woff") format("woff"),
    url("../fonts/SharpGrotesk-Book20.ttf") format("truetype"),
    url("../fonts/SharpGrotesk-Book20.svg") format("svg"),
    url("../fonts/SharpGrotesk-Book20.eot") format("embedded-opentype"),
    url("../fonts/SharpGrotesk-Book20.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: "Humane", sans-serif;
  src: url("../fonts/Humane-Bold.woff2") format("woff2"),
    url("../fonts/Humane-Bold.woff") format("woff"),
    url("../fonts/Humane-Bold.ttf") format("truetype"),
    url("../fonts/Humane-Bold.svg") format("svg"),
    url("../fonts/Humane-Bold.eot") format("embedded-opentype"),
    url("../fonts/Humane-Bold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: "Humane", sans-serif;
  src: url("../fonts/Humane-Regular.woff2") format("woff2"),
    url("../fonts/Humane-Regular.woff") format("woff"),
    url("../fonts/Humane-Regular.otf") format("truetype"),
    url("../fonts/Humane-Regular.svg") format("svg"),
    url("../fonts/Humane-Regular.eot") format("embedded-opentype"),
    url("../fonts/Humane-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--fuente-titulos) !important;
  font-family: "Humane", sans-serif !important;
  font-weight: 600;
  line-height: 1;
}

p {
  font-family: "Sharp", sans-serif !important;
}

p,
a,
h6 {
  font-family: var(--fuente-cuerpo) !important;
  font-family: "Sharp", sans-serif;
  font-weight: 300;
}

I wanted to make an compatible and good looking website with custom fonts that didn't come to reality with one font half working and and other one that doesn't work at all.

I will appreciate if someone could give me a solution to this problem since I have tried by all possible means (even gpt) and I have not been able to fix it.