Custom font showing on desktop chrome but not showing on desktop safari or mobile (safari/chrome)

[Dermaglowlabs]

Hi there, 

I added a new custom font to be applied to the main product and the featured product titles (i only have one product at the moment), the custom font shows up on desktop chrome but not on safari, it also won't show up on any mobile browser. 

i've read all the discussions here and tried to apply all the fixes but nothing worked. 

for reference, i've uploaded both woff and woff2 in the files section on shopify and not in the assets as one of the experts in the discussions suggested and as you can see below, i've copied the corresponding url for woff and woff2 files and pasted them in the code

here's my coding (this is in base.css file)

// newly installed font start

@font-face {
font-family: 'Buffalo';
font-weight: normal;
font-style: normal;
font-display: swap;
src: url('https://cdn.shopify.com/s/files/1/0776/4387/4610/files/Buffalo.woff2?v=1687306327') format('woff2'),
url('https://cdn.shopify.com/s/files/1/0776/4387/4610/files/Buffalo.woff?v=1687316066') format('woff');
}

.product__title { font-family: 'Buffalo' !important; font-size: calc(var(--font-heading-scale) * 8rem);
}

.product__title h1 { font-family: 'Buffalo' !important; font-size: calc(var(--font-heading-scale) * 8rem);
}

// newly installed font end

can anyone help please?

Thanks in advance