Kevin Powell - Community•2y ago

Font not loading in mobile

I've deployed the website. Fonts are loading in desktop but not in mobile. I'm using local fonts, tailwind. This is how my input.css looks like.

@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');

    }
}

@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');

    }
}

site: https://thekimway.com/ code: https://github.com/AhadWeb3/the-kim-way-photography what am i doing wrong

9 Replies

Abdul Ahad⚡•2y ago

Anyone here?

ghostmonkey•2y ago

these fonts are not loading in desktop either just fyi\

ghostmonkey•2y ago

ghostmonkey•2y ago

it's loading the defaults for me and looking at your index.html, you are linking to style.css but not input.css and in style.css, you have html fonts set to system fonts

ghostmonkey•2y ago

Abdul Ahad⚡•2y ago

hey, thank you for taking time to go through the code. I had the font installed in my PC. so it was loading on my device and not on all devices. the path which i gave was wrong. corrected it. Once again, thank you for the help. Means a lot

dysbulic 🐙•2y ago

I'd give conversion to woff a look see. The command in Ubuntu is sfnt2woff. Support is solid and it's generally an ~50% size savings.

Abdul Ahad⚡•2y ago

yep converted it to woff

ghostmonkey•2y ago

nice one, glad you got it worked out, 👍

Gaming

Programming

Font not loading in mobile