فونت وریبل، نسخۀ توسعه‌یافتۀ فونت های کنونی(Static) است که می‌تواند حالات مختلف یک تایپ‌فیس را در یک فایل شامل باشد و کاربر بجای استفاده از چند فونت، تنها از یک فونت با تنظیمات مختلف استفاده کند.

کافیست تصور کنید سایتی که بخواهد تنها سه وزن از فونتی را استفاده کند، چه حجم، و تعداد درخواست بیشتری دارد. فونت وریبل تنها یک فایل است، حجم آن به‌شدت کمتر است، و حالات بیشتری را دارد.

فونت وریبل می‌تواند بین وزن های مختلف یک فونت، به صورت پیوسته حرکت کند که هم در وبسایت ها برای زیبایی بیشتر، هم در کاربرد های مختلف می‌تواند استفاده شود.

فراموش نکنید که با وجود فونت وریبل، شما می‌توانید هر ضخامتی از فونت را انتخاب کنید.

فونت های وریبل سطح پیشرفته‌تری از فونت ها هستند و پشتیبانی از آنها، به کاربرد و برنامۀ مورد استفاده بستگی دارد. اگر از برنامه‌ای استفاده می‌کنید، لازم است در مورد پشتیبانی آن از فونت های متغیر(وریبل) تحقیق و جستجو کنید.

بیشتر مرورگر ها از چند سال پیش، از فونت های متغیر پشتیبانی می‌کنند، به همین دلیل استفاده از فونت های وریبل در مرورگر ها امن تر است، اما برای مرورگر های قدیمی هم راه حلی وجود دارد که در سوال های بعدی توضیح داده می‌شود.

فونت های وریبل نصب مشابهی با فونت های عادی دارند و استفاده از آنها در نرم‌افزار به پشتیبانی آنها از فونت های وریبل مربوط است.

برای تعریف فونت:

@font-face {
  font-family: 'Arad-VF';
  src: url('fonts/variable/Arad-VF.woff2') format('woff2 supports variations'),
       url('fonts/variable/Arad-VF.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
            

برای استفاده در css:

body {
    font-family: Arad-VF;
    font-weight: 400;
}

h4 {
    font-weight: 700;
}

یا:

body {
    font-family: Arad-VF;
    font-variation-settings: "wght" 400;
}

h4 {
    font-variation-settings: "wght" 700;
}

برای تغییر نقاط از کد زیر بهره بگیرید:

  body {
    font-family: Arad-VF;
    font-variation-settings: "wght" 400, "DSTY" 2; /* برای تغییر حالت نقاط، DSTY اضافه شده */
}

h1 {
    font-variation-settings: "wght" 900, "DSTY" 2; /* برای تغییر حالت نقاط، DSTY اضافه شده */
}

روش پشتیبانی حداکثری

اگر می‌خواهید پشتیبانی مرورگر های قدیمی را هم شامل شود، از روش زیر استفاده کنید. این روش در وبسایت پروژه هم استفاده می‌شود.

برای تعریف فونت:

@font-face {
  font-family: 'Arad-VF';
  src: url('fonts/variable/Arad-VF.woff2') format('woff2 supports variations'),
       url('fonts/variable/Arad-VF.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Arad";
  src: url("Arad-Regular.woff2");
  font-display: fallback;
}

@font-face {
  font-family: "Arad";
  src: url("Arad-Bold.woff2");
  font-weight: 700;
  font-display: fallback;
}
            

برای استفاده در css:

body {
    font-family: Arad;
    font-weight: 400;
}

h4 {
    font-weight: 700;
}

@supports (font-variation-settings: normal) {
  body, h4 {
  font-family: "Arad-VF", "Arad";
  }
}

نکتۀ مهم آن است که اگر از font-variation-settings استفاده می‌کنید، باید آن را در قسمت @support بنویسید.

مثال:

body {
    font-family: Arad;
    font-weight: 400;
}

h4 {
    font-weight: 700;
}

@supports (font-variation-settings: normal) {
  body, h4 {
  font-family: "Arad-VF", "Arad";
  }

  body {
    font-family: Arad;
    font-variation-settings: "DSTY" 2;
}

h4 {
    font-variation-settings: "DSTY" 2;
}

}