Next.js Discord

Discord Forum

Font failure in some DEVICES ?

Unanswered
Giant wood wasp posted this in #help-forum
Open in Discord
Giant wood waspOP
hello, i was setup my project's website.
somehow i noticed on some device, like ipad. the 2nd font (Druk) isn't working while the main font (blenderpro) is still working.
i can understand the issue if in all devices arent working but this inconsistent issue. idk how to identify it

these pictures are from my ipad and my mac, while on my android it seems fine. (on iphone my might have problem too same as ipad)

link: https://pix-landing.vercel.app/

3 Replies

Giant wood waspOP
this is how i setup the fonts:

style.js
@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: "BlenderPro";
  src: url("/fonts/BlenderPro-Medium.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "BlenderPro";
  src: url("/fonts/BlenderPro-Thin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Druk";
  src: url("/fonts/druk/Druk-Wide-Medium.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "BlenderPro", sans-serif;
  scroll-behavior: smooth;
  /* background-color: #0c0c0c; */
}
//on component level
 <motion.div
        variants={staggerContainer}
        initial="hidden"
        whileInView="show"
        viewport={{ once: false, amount: 0.25 }}
        style={{ fontFamily: "Druk" }}
        className={`my-12 lg:my-[64px] !font-druk  `}
      >
        <div className=" lg:grid grid-cols-1 lg:grid-cols-3 gap-5  ">
          <div className="col-span-1 mb-5 lg:mb-0">
            <div className="bg-primary-orange rounded-3xl p-5 ">
              <TiltIcon reverse width={272} height={284} />
            </div>
          </div>

          <div className="col-span-2  space-y-2">
            <div className="bg-primary-orange rounded-3xl p-4  lg:p-9 text-2xl lg:text-[42px] font-bold uppercase leading-10 mb-5">
              <div className="!font-druk">Air drop</div>
              <div className="!font-druk">
                competition <span className="text-white !font-druk">live</span>
              </div>
            </div>
...


i also setup on tailwind
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{html,js,jsx}",
    "./pages/**/*.{html,js,jsx}",
    "./module/**/*.{html,js,jsx}",
    "./components/**/*.{html,js,jsx}",
    "./sections/**/*.{html,js,jsx}",
    "./styles/**/*.{js,jsx}",
  ],
  mode: "jit",
  theme: {
    fontFamily: {
      custom: ["BlenderPro", "sans-serif"],
      druk: ["Druk", "sans-serif"],
    },
Giant wood waspOP
ok update, it seems it is Druk font but shrunken on ipad, imnot sure why only on ipad and ios but not on android and my mac