افزودن فونت فارسی به گانتری ۵

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

اموزش موجود در مستندات گانتری به شدت گیچ کننده هست و اگر بخوایم طبق مستندات گانتری پیش بریم، متاسفانه با مشکلات زیادی رو به رو میشیم و احتمالا از ادامه کار و اضافه کردن فونت، نا امید میشیم.
از طرفی هیچ اموزش فارسی در نت برای این کار پیدا نکردم و این نکته برای من جالب بود که با وجود گذشت چند ماه از معرفی نسخه جدید گانتری ۵ و انتشار چند قالب با گانتری ۵ توسط راکت تم، هنوز هیچ سایتی اقدام به فارسی سازی این قالب ها نکرده!
این موضوع باعث شد تا خودم دست به کار بشم و یک فونت فارسی رو با ازمون و خطا و با کمک راهنمای گانتری به قالب پیشفرض و رایگان این فریمورک اضافه کنم و روش انجام این کار رو با شما به اشتراک بزارم.

افزودن فونت به گانتری ۵ در چهار مرحله:

۱- نصب قالب و فریمورک

برای افزودن فونت در مرحله اول لازمه یک قالب طراحی شده با فریمورک گانتری ۵ داشته باشیم. برای این کار، اول پکیج گانتری و قالب Hydrogen رو از سایت Gantry.org دریافت و روی یک جوملا نصب می کنم.
بعد از نصب قالب ، مثل اموزش های قبلی، چند منو و متن نمونه رو فارسی میکنم تا بعد از اضافه کردن فونت، تغییرات قابل مشاهده باشند.

۲- دریافت فونت و انتقال به پوشه قالب

در ابتدا فونت یکان رو از اینجا دانلود کنید. حالا به مسیر نصب قالب templates/g5_hydrogen  رفته و وارد پوشه custom بشید و یک پوشه جدید با نام fonts ایجاد کنید (اگر قبلا ایجاد نشده).
حالا یک پوشه به نام  font-folder-name در پوشه fonts ایجاد کنید و فونتی رو که دانلود کرده بودید رو در این پوشه کپی کنید.

۳- معرفی به Font Picker در قالب

برای این که بتونیم فونت رو در قسمت مدیریت قالب داشته باشیم و بتونیم از قسمت Font Picker فونت دلخواه رو انتخاب کنیم باید فونت رو به theme.yaml معرفی کنیم.
از پوشه اصلی قالب به پوشه Gnatry رفته و فایل theme.yaml رو با یک ویرایشگر کد باز کنید.
عبارت Font: رو جستجو کنید (در قالب Hydrogen حدود خط ۴۱) و خط زیر رو طبق تصویر اضافه کنید.

font-name:
   ۴۰۰: 'gantry-theme://fonts/font-folder-name/font-file-name'

دقت کنید که font-name، نامیست که برای فونتمون انتخاب کردیم و فونت با این نام فراخوانی خواهد شد.  font-folder-name نام پوشه فونت و font-file-name نام فایل فونت ما است.
عدد ۴۰۰ که در ابتدای خط نوشته شده، برای تعیین حجم فونت استفاده میشه که ۴۰۰ به معنی سایز نرمال هست.
خوب حالا می تونید در قسمت font Picker در مدیریت قالب، فونت یکان رو ببینید.

اما حتی در صورت انتخاب فونت اضافه شده به لیست، به عنوان پیشفرض، تغییری در سایت ایجاد نخواهد شد و فونت یکان لود نمی شود.

۴- معرفی و لود فونت

به پوشه custom  برگردید و یک پوشه جدید به نام SCSS ایجاد کنید. حالا وارد این پوشه بشید و یک فایل با نام custom.scss ایجاد کنید (در صورتی که قبلا ایجاد نشده).
فایل custom.scss رو با یک ویرایشگر کد باز کنید و خطوط زیر رو اضافه کنید:

/* Adding Font yekan */
@import "vendor/bourbon/bourbon";
@include font-face('font-name', 'gantry-theme://fonts/font-folder-name');

در اینجا  font-folder-name به پوشه فونت یکان اشاره دارد.
خوب تمام شد. شما موفق شدید یک فونت جدید به گانتری ۵ اضافه کنید. حالا برای استفاده، به مدیریت قالب برید و از Font Picker ، فونت یکان رو در حالت انتخاب قرار بدید و قالب رو ذخیره کنید.

حالا صفحه اول رو رفرش کنید تا تغییرات رو ببینید.