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

26 آبان 1395

129

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

در پوشه 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 میباشد :

<code>

@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;

}

</code>

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

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

<code>

h1{

font–family:Nasim;

}

</code>

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

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

<code>

h1{

font–family:Nasim, Tahoma;

}