Font not loading in mobile

@layer base {
    @font-face {
        font-family: "AVENIR400";
        src: url('/fonts/AvenirLTStd-Book.otf') format('OpenType');
    }

    @font-face {
        font-family: "AVENIR500";
        src: url('/fonts/AvenirLTStd-Roman.otf') format('OpenType');
    }

    @font-face {
        font-family: "AVENIR600";
        src: url('/fonts/AvenirLTStd-Black.otf') format('OpenType');
    }

    @font-face {
        font-family: "PRISMA";
        src: url('/fonts/Prisma.ttf') format('TrueType');
        src: url('/fonts/Prisma.otf') format('OpenType');

    }
}