I can't add custom fonts for h1, h2 and h3

Hi,

I have added custom css as follows as I want to add my own font advio, advio light and advio bold

I think I am missing something ? Please please help

@font-face { 
font-family: 'advio ';
  src: url(https://static1.squarespace.com/static/608b0c3418410c10668c835e/t/608b0eedae3e6753de15e544/1619726061842/Advio.otf); 
   }

@font-face { 
font-family: 'advio light ';
  src:  url(https://static1.squarespace.com/static/608b0c3418410c10668c835e/t/608b13ebf495983e07ab5aa5/1619727339238/Advio+Light.otf);
}
@font-face { 
font-family: 'advio bold ';
  src:  url(https://static1.squarespace.com/static/608b0c3418410c10668c835e/t/608b1203f7d01333461ecee0/1619726851459/Advio+Bold.otf)
}

h1 {
  font-family:'advio';
}
h2 { font-family:'advio light';
}
h3 {font-family: 'advio bold';
}

Hi. The code looks correct. What problem here?