next.js – Fonts are not loaded on IOS with @font-face

I’m aware such question already exists on StackOverflow but it didn’t help me

Question

I have 3 fonts in my Next.js 14.0.4 project which are stored in public/fonts/ folder.

NOTE: Only Avenir is being used on the site for now. Avenir has .ttf, .woff, and .woff2 extensions

I’m using TailwindCSS for styling and fonts are set up there in a following way:

theme: {
        extend: {
            fontFamily: {
                capitanaBlack: ['Capitana Black', 'sans-serif'],
                capitanaBold: ['Capitana Bold', 'sans-serif'],
                capitanaLight: ['Capitana Light', 'sans-serif'],
                capitanaMedium: ['Capitana Medium', 'sans-serif'],
                capitanaRegular: ['Capitana Regular', 'sans-serif'],
                capitanaSemiBold: ['Capitana SemiBold', 'sans-serif'],
                capitanaThin: ['Capitana Thin', 'sans-serif'],
                avenirBlack: ['Avenir Black', 'sans-serif'],
...

After that I call font in css:

.className {
   @apply font-avenirBlack;
}

Here is fonts.css which is located in @/app/ directory

and here is a photo of fonts in the folder:

Fonts work fine on desktop version and on android but not a one font is loaded on IOS both in Chrome or Safari