Why is the Gotham Pro Light font not recognized on the site?

Question

css

Hello.
There is a problem, I can’t understand why the Gotham Pro Light font is not recognized on the site.
Connected via CSS
The rest of the fonts are displayed and function normally.

@font-face {
    font-family: 'Gotham Pro Light';
    src: url('../fonts/GothamPro-Light.otf?') format('opentype'),
    url('../fonts/GothamPro-Light.eot?') format('eot'),
    url('../fonts/GothamPro-Light.woff') format('woff'),
    url('../fonts/GothamPro-Light.ttf')  format('truetype');
}

Website: https://pipl.ua/bezopasnost-dla-doma/
Example

Answer 1

Most often the answers are in DevTools
Well, I would advise using a slightly different format for using fonts

@font-face {
  font-family: 'GothamPro';
  src: url('../fonts/GothamPro.eot?') format('eot'), 
       url('../fonts/GothamPro.otf')  format('opentype'),
       url('../fonts/GothamPro.woff') format('woff'), 
       url('../fonts/GothamPro.ttf')  format('truetype'),
       url('../fonts/GothamPro.svg#GothamPro') format('svg');
}
@font-face {
    font-family: 'GothamPro';
    src: url('../fonts/GothamPro-Light.otf?') format('opentype'),
    url('../fonts/GothamPro-Light.eot?') format('eot'),
    url('../fonts/GothamPro-Light.woff') format('woff'),
    url('../fonts/GothamPro-Light.ttf')  format('truetype');
    font-weight:300;
}

In this case, you can use only font-weight in the right place