راهنمای استفاده از فونت شبنم؛ قلم فارسی هندسی و رایگان

انتخاب یک فونت خوانا و استاندارد تأثیر مستقیمی بر تجربه کاربری وب‌سایت‌ها و اپلیکیشن‌های موبایل دارد. فونت شبنم (Shabnam) یکی از گزینه‌های محبوب و شناخته‌شده در اکوسیستم طراحی وب فارسی است که بر پایه فونت وزیر توسعه یافته و با ساختار هندسی و متوازن خود، ظاهری مدرن به محیط‌های کاربری می‌بخشد. این پروژه که توسط صابر راستی‌کردار خلق شده، بسته‌ای کامل از وزن‌های مختلف را در اختیار توسعه‌دهندگان قرار می‌دهد تا بتوانند در پروژه‌های مختلف دیجیتال از آن بهره ببرند.

ویژگی‌ها و ساختار فونت شبنم

فونت شبنم با الهام از ساختارهای هندسی و خوانایی بالا در اندازه‌های مختلف طراحی شده است. بسته رسمی این فونت شامل فایل‌های با فرمت‌های مختلف از جمله TTF، WOFF، WOFF2 و EOT است که سازگاری کامل آن را با مرورگرهای مختلف تضمین می‌کند. همچنین درون بسته فشرده، نسخه‌های بدون حروف لاتین و یا تمام ارقام فارسی نیز تعبیه شده است تا طراحان کنترل کامتری روی یکدست بودن متن‌ها داشته باشند. روند تولید این بسته بر مبنای ابزار متن‌باز FontForge و fontbuilder شکل گرفته است.

اگرچه توسعه و نگهداری این پروژه متوقف و بایگانی (Discontinued) شده است، اما همچنان به عنوان یک منبع پایدار، سبک و کاملاً رایگان برای استفاده در پروژه‌های وب و برنامه‌نویسی مورد استفاده قرار می‌گیرد. بخش مشکلات (Issues) مخزن گیت‌هاب پروژه همچنان باز است، اما هیچ به‌روزرسانی جدیدی برای آن ارائه نمی‌شود.

طریقه استفاده از فونت شبنم در صفحات وب (CSS)

برای بارگذاری و استفاده از وزن‌های مختلف فونت شبنم در کدهای وب‌سایت خود، می‌توانید از قانون @font-face در فایل استایل CSS استفاده کنید. کد کامل زیر تمامی وزن‌های استاندارد این فونت شامل Normal، Bold، Thin، Light و Medium را پوشش می‌دهد:

@font-face {
  font-family: Shabnam;
  src: url('Shabnam.eot');
  src: url('Shabnam.eot?#iefix') format('embedded-opentype'),
       url('Shabnam.woff2') format('woff2'),
       url('Shabnam.woff') format('woff'),
       url('Shabnam.ttf') format('truetype');
  font-weight: normal;
}

@font-face {
  font-family: Shabnam;
  src: url('Shabnam-Bold.eot');
  src: url('Shabnam-Bold.eot?#iefix') format('embedded-opentype'),
       url('Shabnam-Bold.woff2') format('woff2'),
       url('Shabnam-Bold.woff') format('woff'),
       url('Shabnam-Bold.ttf') format('truetype');
  font-weight: bold;
}

@font-face {
  font-family: Shabnam;
  src: url('Shabnam-Thin.eot');
  src: url('Shabnam-Thin.eot?#iefix') format('embedded-opentype'),
       url('Shabnam-Thin.woff2') format('woff2'),
       url('Shabnam-Thin.woff') format('woff'),
       url('Shabnam-Thin.ttf') format('truetype');
  font-weight: 100;
}

@font-face {
  font-family: Shabnam;
  src: url('Shabnam-Light.eot');
  src: url('Shabnam-Light.eot?#iefix') format('embedded-opentype'),
       url('Shabnam-Light.woff2') format('woff2'),
       url('Shabnam-Light.woff') format('woff'),
       url('Shabnam-Light.ttf') format('truetype');
  font-weight: 300;
}

@font-face {
  font-family: Shabnam;
  src: url('Shabnam-Medium.eot');
  src: url('Shabnam-Medium.eot?#iefix') format('embedded-opentype'),
       url('Shabnam-Medium.woff2') format('woff2'),
       url('Shabnam-Medium.woff') format('woff'),
       url('Shabnam-Medium.ttf') format('truetype');
  font-weight: 500;
}

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

body {
  font-family: 'Shabnam', sans-serif;
}

نصب و دریافت فونت از طریق پکیج‌منیجرها و CDN

علاوه بر دانلود مستقیم فایل‌های فشرده، توسعه‌دهندگان وب و نرم‌افزار می‌توانند فونت شبنم را از طریق ابزارهای مدیریت بسته یا شبکه‌های توزیع محتوا (CDN) به پروژه‌های خود اضافه کنند. دستورات زیر برای ابزارهای رایج پکیج‌منیجر قابل استفاده هستند:

نصب با NPM

اگر از محیط‌های مبتنی بر نود جی‌اس استفاده می‌کنید، دستور زیر پکیج فونت را به پروژه اضافه می‌کند و فایل‌ها در پوشه npm_modules/shabnam-font/dist قرار می‌گیرند:

npm install shabnam-font --save

نصب با Yarn

برای کاربران پکیج‌منیجر یارن نیز دستور زیر کاربرد دارد:

yarn add shabnam-font --save

استفاده از شبکه توزیع محتوا (CDN)

اگر نمی‌خواهید فایل‌های فونت را روی هاست خود میزبانی کنید، می‌توانید با استفاده از سرویس jsDelivr و درج کد زیر در تگ <head> صفحه HTML، به صورت مستقیم به فایل‌های استایل دسترسی داشته باشید (توجه کنید که به جای [X.Y.Z] باید شماره نسخه دقیق مثل 5.0.1 را وارد کنید):

<link href="https://cdn.jsdelivr.net/gh/rastikerdar/shabnam-font@v[X.Y.Z]/dist/font-face.css" rel="stylesheet" type="text/css" />

پرسش‌های متداول

جمع‌بندی

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

ورود به سایت رسمی