آموزش قرار دادن فونت فارسی در طراحی وب

آموزش وردپرس

آموزش قرار دادن فونت فارسی در طراحی وب

با سلام. دوستان و بازدیدکنندگان عزیز امروز نحوه قرار دادن فونت فارسی در صفحات وب رو به شما آموزش میدم. یکی از نیازهایی که اکثر طراحان و مدیران وب با آن روبرو می شوند استفاده از فونت فارسی برای وب هست. برای همین تصمیم گرفتم تا یک روش از دو روش موجود برای این کار را به صورت خلاصه و مفید به شما آموزش بدم تا بتوانید سایت خود را زیباتر از قبل کنید. این روش که از طریق Font Face هست نسبت به روش دیگر راحت تر و پرکاربرد ترست. ابتدا شما به اینجا رفته و فونت فارسی دلخواه خود برای استفاده در قالب را از مجموعه ۴۰ فونت فارسی اصلاح شده انتخاب کنید. پیش نمایش فونت ها را wedesign تهیه کرده است. پر کاربردترین فونت های فاسی در طراحی وب فونت های B Yekan و B Koodak هستند. بعد از انتخاب فونت دلخواه و دریافت آن، شما باید یک پوشه در پوشه پوسته خود با نام دلخواه بسازید. و بعد شما باید فونت مورد نظر رو به پوشه ساخته شده منتقل کنید.

حال شما باید فونت مورد نظر رو در فایل CSS قالب خود با استفاده از کد زیر فراخوانی کنید.

@font-face { font-family: 'BYekan'; 
	src: url('fonts/BYekan.eot?#') format('eot'),  /* IE6–۸ */ 
	url('fonts/BYekan.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ 
	url('fonts/BYekan.ttf') format('truetype');  /* Saf3—۵, Chrome4+, FF3.5, Opera 10+ */ 
}

حالا شما در هر قسمت از پوسته خود خواستید از فونت فارسی استفاده کنید باید در کد CSS آن در قسمت font-family آن را فراخوانی کنید. به عنوان مثال:

H1 {font-family: 'BYekan';}

نکته اول: همونطور که در خط دوم کد CSS میبینید من فونت BYekan رو انتخاب کردم و در هر قسمت که خواستم از آن استفاده کنم باید در قسمت فونت فمیلی BYekan را وارد کنم. نکته دوم: همونطور که در انتهای خط های سوم، چهارم و پنجم میبینید نام و ورژن مرورگر هایی که از آن کد استفاده پشتیبانی میکنند قرار گرفته پس برای نمایش در همه مرورگر ها باید هر سه فرمت از یک فونت را استفاده کنید.

سوالات و مشکلات خود را در دیدگاه ها بیان کنید، حتما پاسخ خواهیم داد.

دیدن این مطالب رو به شما پیشنهاد میکنیم...

۸ دیدگاه برای این مطلب ارسال شده است

  1. گاهی وقت ها شده همه ی این مراحل رو انجام میدیم اما باز هم فونت لود نمیشه
    دلیلش چی می تونه باشه
    ممنون میشم راهنمایی کنید.
    گاهی وقت ها هم میشه که وقتی فونتی رو میزاریم کاراکترها به صورت جدا نمایش داده می شود

  2. با سلام
    من فونت یکان رو روی سرور آپلود کردم وتمامی مراحل بالا رو هم رفتم ( وبسایتم قالب وردپرس داره ) ولی ارور زیر رو می ده :
    downloadable font: rejected by sanitizer (font-family: "B yekan" style:normal weight:normal stretch:normal src index:2) source:
    لطفا راهنمایی کنید چطور این مشکل رو رفع کنم
    ممنون

  3. سلام
    فونتی که خودتون طراحی کرده و یا خریده اید رو چطوری میشه تو سایت استفاده کرد که همه بتونن ببیننش و باهاش به مشکل نخورن؟
    هم بروزر های جدید هم قدیمی
    ممنون بابت پاسخ گویی
    با تشکر آرایش عروس

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *