می‌خواهیم فونت وزیر (vazirmatn) را جایگزین فونت پیش‌فرض سایت ساز Hugo قرار بدهیم. همچنین می‌خواهیم این تغییرات وابسته به قالب سایت نباشد؛ یعنی با تغییر قالب، فونت ما همچنان vazirmatn بماند.

  1. فونت وزیر را از گیتهاب دانلود می‌کنیم: GitHub

پوشه وزیرمتن پوشه و فایل‌های مورد استفاده برای این کار:

  • پوشه fonts
  • دو فایل font face
    • vazirmatn-variable-font-face.css
    • vazirmatn-font-face.css
  1. انتقال فونت‌ها به مسیر static/fonts/vazirmatn

static/fonts/vazirmatn

  1. در پوشه assets پوشه‌ی extended را با مسیر css/extended ایجاد می‌کنیم و فایل‌های زیر را در آن قرار می‌دهیم.
  • site.css
  • vazirmatn-variable-font-face.css

مسیر

یک فایل به نام site.css برای ایجاد تنظیمات مورد نظر در داخل آن ایجاد می‌کنیم

/* فونت‌ها */
/*@import url(vazirmatn-font-face.css);*/
@import url(vazirmatn-variable-font-face.css);


/* متغیر سراسری */
html {
  --my-font1: Vazirmatn;
  --my-font2: IRANSansX;
  --main-font: var(--my-font1);
}

body {
  font-family: var(--main-font) !important;
  font-feature-settings: "tnum"; /* عددها هم‌عرض */
}

/* وقتی زبان فارسی است → اعداد فارسی */
html[lang="fa"] body {
  font-feature-settings: "ss01", "tnum";
}

/* تیترها و ورودی‌ها */
h1, h2, h3, h4, h5, h6,
input, textarea {
  font-family: var(--main-font) !important;
}

مسیر داخل font-face باید به قسمت static اشاره کند. بنابراین باید شروع آن با /fonts/vazirmatn باشد.

@font-face {
  font-family: 'Vazirmatn';
  src: url('/fonts/vazirmatn/webfonts/Vazirmatn[wght].woff2') format('woff2 supports variations'),
       url('/fonts/vazirmatn/webfonts/Vazirmatn[wght].woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}