Custom font not loading on Windows OS

Hi all, I am having trouble with displaying a custom font on Windows OS,

everything works fine in Safari, but when I checked on Windows, the custom font doesn't load and it gets replaced by Serif font.
If anyone has some suggestions that would be much appreciated. 

Website: nikaklinec.com
Here is my custom code:
 

@font-face {
font-family: ‘AVENIR’;
src: url('https://static1.squarespace.com/static/62caf31126fd806bbbb688e8/t/62ce78bd9340b878dfae69d3/1657698493858/AvenirNextLTPro-Regular.otf');
}

//ASSIGN AVENIR FONT//
p,h1,h2,h3,h4,h5,h6 {
font-family: 'AVENIR';
}

This is the remaining code: 
 

@font-face {
font-family: 'TAN';
src: url('https://static1.squarespace.com/static/62caf31126fd806bbbb688e8/t/6354107af33a6d596269ba3d/1666453626649/TAN+-+MERINGUE.ttf);');
}

@font-face {
font-family: 'TAN';
src: url('https://static1.squarespace.com/static/62caf39458e53531b1e59492/t/62cc768775ef2d63e829e6b7/1657566855829/TAN+-+MERINGUE.otf');
}

@font-face {
font-family: ‘AVENIR’;
src: url('https://static1.squarespace.com/static/62caf31126fd806bbbb688e8/t/62ce78bd9340b878dfae69d3/1657698493858/AvenirNextLTPro-Regular.otf');
}

//ASSIGN AVENIR FONT//
p,h1,h2,h3,h4,h5,h6 {
font-family: 'AVENIR';
}
 
//.header-nav-item {
//  font-size: 1.25rem;
//}

//ASSIGN TAN FONT//
//{
//font-family: 'TAN';
//}

.newsletter-block .newsletter-form-wrapper--alignLeft .newsletter-form {
text-align: left;
}

.sqs-block-newsletter .newsletter-form-header-description {
 color: #000;
}

.newsletter-form-footnote {
  color: #000;
}

.collection-type-products .grid-title {
  font-size: 1rem;
}

/* home products */
@media screen and (max-width:767px) {
div#page-section-5f29775108f9fc5eade7bb77>.row>.span-3 {
    width: 50% !important;
    float: left !important;
}
}

@media only screen and (max-width:767px) {
.products .list-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.products .grid-item { width: 48%;
}
}

.sqs-announcement-bar-text, .sqs-announcement-bar-text p {
  font-size: 0.8rem;
}


.sqs-add-to-cart-button-inner {
  color: black;
  shadow: yellow;
}

//.sqs-add-to-cart-button-wrapper {
//    display: none !important;
//}

//.product-quantity-input {
//display:none !important;
//}

@tuanphan Thank you very much, this solved it.