چگونه فونت متن وب پیج را تغییر دهیم

بطور پیش فرض در قالب پروتواستار (Protostar template) یک فونت برای عنوان سایت و تیترها و فونت دیگری برای تمامی متن های سایت استفاده می شود و چند استثنا جزئی وجود دارد. فونت وب سایت برای جذب کاربران از اهمیت بالایی برخوردار است زیرا تعیین کننده ظاهر سایت است. فونت های فارسی زیادی در بازار رایگان و پولی اینترنت در دسترس است. در این مقاله طریقه عوض کردن فونت بخش های مختلف وب سایت از جمله فونت متن اصلی، فونت تیترها و غیره بحث می شود.

فونت متن کل سایت در تگ <body> در فایل template.css تعیین می شود.

body {
    margin: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: #333;
    background-color: #fff;
}

برای تغییر این فونت به فونت دیگر، می توانید یک استیل شیت سفارشی (custom.css) برای خودتان بسازید. برای مثال:

body {font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;}

بخاطر داشته باشید که لازم است فونت وب استاندارد مشخص کرده یا فایل های فونت مورد نظر را از گوگل یا منابع دیگر بارگذاری کنید.

برای بارگذاری فونت از منابع دیگر از قبیل فونت های خاصی که در سیستم خود دارید و یا فونت زبان خود، مقاله طریقه اضافه کردن فونت های سفارشی به قالب پروتواستار را بخوانید.

طریقه تغییر فونت عنوان سایت و تگ های تیتر در پروتواستار

به صورت پیش فرض در قالب پروتو استار از کد PHP برای بارگذاری فونت گوگل قید شده در مدیر قالب استفاده می کند؛ اگر گزینه Google Font for Headings در مدیر تمپلیت به Yes ست شده باشد. اگر این گزینه به No ست شود، صفحه از همان سبک فونتی برای عنوان سایت و تگ های هدینگ استفاده می کند که برای مابقی سایت استفاده می شود و در فایل template.css مشخص شده است.

اگر گزینه استفاده از فونت گوگل برای هدینگ به Yes ست شده باشد، پارسر PHP نام فونت گوگل مورد نظر را در بخش <style> در قسمت <head> سند HTML بارگذاری می کند. اگر تلاش کنید و فونتی را در استیل شیت خود مشخص کنید، این تنظیم و پیکربندی مدیر قالب جوملا رونویسی نخواهد شد. سبک تعریف شده در استیل شیت توسط سبک تعریف شده در بخش <style> سند HTML رونویسی می شود. برای تغییر فونت عنوان و هدینگ های قالب، بایستی ابتدا در مدیریت تمپلیت گزینه استفاده از فونت گوگل را به No ست کنید و سپس فونت مورد نظر خود را در یک استیل شیت دلخواه (custom stylesheet) اجرا کنید.

اگر گزینه استفاده از فونت گوگل برای هدینگ به Yes ست شده باشد، پارسر PHP نام فونت گوگل مورد نظر را در بخش <style> در قسمت <head> سند HTML بارگذاری می کند. اگر تلاش کنید و فونتی را در استیل شیت خود مشخص کنید، این تنظیم و پیکربندی مدیر قالب جوملا رونویسی نخواهد شد. سبک تعریف شده در استیل شیت توسط سبک تعریف شده در بخش <style> سند HTML رونویسی می شود. برای تغییر فونت عنوان و هدینگ های قالب، بایستی ابتدا در مدیریت تمپلیت گزینه استفاده از فونت گوگل را به No ست کنید و سپس فونت مورد نظر خود را در یک استیل شیت دلخواه (custom stylesheet) اجرا کنید.

اگر هنوز فایل custom.css یا استیل شیت سفارشی خود را ایجاد نکرده اید، یا مطمئن نیستید که چطور این فایل را ایجاد و به قالب جوملا اضافه کنید، مقاله طریقه اضافه کردن استیل شیت سفارشی به قالب پروتواستار جوملا را بخوانید.

فونت های مورد استفاده در فایل template.css قالب Protostar

فونت مشخص شده در تگ <body> برای هر تکه متن موجود در صفحه استفاده خواهد شد، مگر اینکه جایی دیگر از استیل شیت فونت دیگری تعریف شده باشد. در قالب پروتواستار از فونت خاص و تنظیم font-family برای تگ های <input>، <button>، <select>، <textarea>، <code> و <pre> و برای کلاس کوئری جستجو (.search-query class) استفاده شده است. اگر می خواهید فونت خاصی را استفاده کنید، باید فونت همه این تگ ها را تنظیم کنید.