چگونگی نصب و به کارگیری فونت های فارسی در وبسایت

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

در پوشه fonts شما با مجموعه ای از فونت های اصلاح شده فارسی مواجه می شوید که بسته به سلیقه خود هر کدام از آن ها را که دوست داشتید می توانید در وبسایت تان استفاده کنید. هر کدام از فونت ها دارای سه فایل با فرمت های SVG , WOFF , EOT ( برای نمایش در تمامی مرورگرها ) می باشد. شما می بایست این فونت ها را در فایل css قالب خود تعریف کنید. بهتر است کد زیر را در فایل style.css مربوط به child theme خود وارد کنید تا هنگام بروزرسانی قالب، این تغییرات از بین نروند. در صورتی که این کد را در فایل style.css مربوط به قالب اصلی وارد کنید پس از بروزرسانی می بایست مجددا آن ها را وارد کنید:


@font-face {
font-family: 'نام انگلیسی دلخواه برای فونت';
src: url('eot آدرس فونت با پسوند') format('eot'),
url('woff آدرس فونت با پسوند') format('woff'),
url('ttf آدرس فونت با پسوند') format('truetype');
font-style:normal;
font-weight:normal;
}

به عنوان نمونه برای فونت نسیم با توجه به این نکته که 3 پسوند فونت نسیم در پوشه font میباشد :

@font-face {
font-family: ‘Nasim’;
src: url(‘fonts/Nasim.eot?#’) format(‘eot’),
url(‘fonts/Nasim.woff’) format(‘woff’),
url(‘fonts/Nasim.ttf’) format(‘truetype’);
font-style:normal;
font-weight:normal;
}

حال کافیست در css , هر قسمتی که میخواهیم فونت ما به فونت جدید تغییر پیدا کند , به آن قسمت اتربیوت font-family داده و مقدار ( value ) آن را اسم دلخواهی که قبلا به فونت داده ایم میگذاریم.

به عنوان نمونه میخواهیم تمامی H1 ها از این فونت جدید ( مثلا Nasim ) استفاده نمایند :

h1{
font-family:Nasim;
}

البته بهتر است بعد از فونت جدید , فونت پیش فرض tahoma را هم بنویسیم تا اگر به هر دلیلی فونت جدید اجرا نشد , از فونت tahoma استفاده شود .

یعنی به صورت زیر :

h1{
font-family:Nasim, Tahoma;
}

حال اگر بخواهم به طور خلاصه روش درج فونت فارسی در قالب را توضیح بدهم: در ابتدا فایل فونت‌های مورد نظرتان را در پوشه fonts قرار داده و این پوشه را در محل ذخیره فایل‌های استایل قالب که معمولا در پوشه css قرار دارد آپلود کنید. راه بهتر این است که از زیرپوسته استفاده کنید. اگر قالب شما دارای زیرپوسته هست کافی است پوشه fonts را در درون پوشه اصلی زیرپوسته آپلود کنید و این تکه کد را در فایل rtl.css زیرپوسته وارد کنید (اگر این فایل وجود ندارد آن را ایجاد کنید)

@font-face {

font-family: Nasim;

font-style: normal;

font-weight: normal;

src: url(‘fonts/nasim.eot’);

src: url(‘fonts/nasim.eot?#iefix’) format(’embedded-opentype’),  /* IE6-8 */

url(‘fonts/nasim.woff’) format(‘woff’),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/

url(‘fonts/nasim.ttf’) format(‘truetype’);

}

h1,h2,h3,h4,h5,h6,a,p,td,tr,th,li,b,strong,input, p span, h3 span, h1 span, h2 span {font-family: Nasim !important;}

در کد بالا به جای nasim نام فونت مورد نظر خودتان را قرار دهید و آدرس را هم بر مبنای نام فونت به آدرس صحیح (fonts/font-name.eot) تغییر دهید.

پس از انجام این تغییرات، به سایت مراجعه کرده و بررسی کنید. بهتر است قبل از نصب زیرپوسته، این تغییرات (یعنی قرار دادن پوشه fonts و اضافه کردن کدهای فایل rtl.css) را انجام دهید و سپس زیرپوسته را نصب کنید تا یک قالب بومی شده در اختیار داشته باشد. اگر تغییرات بعد از نصب و بر روی هاست انجام شود نیاز دارید برای اعمال شدن تغییرات یک بار کش مرورگر خود را پاک کنید.

برای این کار به تنظیمات مرورگر رفته و گزینه delete Browsing Data را انتخاب کرده و بر روی دکمه پاک کردن کلیک کنید. در اینجا بهتر است فقط گزینه files and images را انتخاب کنید تا فقط فایل‌ها و تصاویر کش شده پاک شوند و اطلاعاتی مثل رمزهای ذخیره شده پاک نشوند.

همچنین در صورتی که با پاک کردن کش مرورگر هم تغییرات اعمال نشد، در صورتی که از افزونه کش در سایت خود استفاده می‌کنید باید از تنظیمات افزونه نیز کش سایت را پاک کنید. بدین ترتیب فونت سایت شما به فونت فارسی تغییر خواهد یافت.