آموزش افزودن فونت فارسی به قالب وردپرس

افزودن فونت فارسی به قالب وردپرس یکی از نیازهای اساسی هر وبسایت وردپرسی است. با استفاده از فونت دلخواه در وردپرس، شکل و ظاهر سایت ما بصورت کلی تغییر خواهد کرد و با استفاده از آن می توانید ظاهری بهتر در سایت خودتان ایجاد کنید. بخصوص زمانی که از فونت‌های محبوبی مثل ایران سنس، بی یکان و ایران سنس دست نویس استفاده کنید. این فونت‌ها جزو محبوب‌ترین فونت ها در وب فارسی به حساب می آیند که در بسیاری از سایت‌ها با این فونت‌ها مواجه شده‌اید. همانطور که می دانید وقتی ما از قالب‌هایی که از تم فارست خریداری می‌کنیم یا اینکه اقدام به نصب قالب وردپرس از طریق مخزن وردپرس می‌کنیم این قالب‌ها معمولا با فونت‌های Tahoma ، Arial و … هستند. بنابراین محتوای سایت ما از نظر فونت طراحی بصری خوبی نخواهد داشت. لازم است در ابتدا فونت دلخواه خودمان را تهیه کرده و سپس اقدام به نصب فونت در وردپرس کنیم. در این آموزش قصد دارم تا به نحوه نصب فونت در وردپرس و افزودن فونت فارسی به قالب وردپرس بپردازم که با استفاده از آن می توانید فونت سایت خودتون را تغییر داده و ظاهر سایت را صرفا با یک فونت زیرورو کنید.

آموزش افزودن فونت فارسی به قالب وردپرس

قبل از نصب فونت در وردپرس باید ابتدا فونت دلخواه خودتان را در سه فرمت تهیه کنید. این فرمت ها که برای وبسایت مورد استفاده قرار میگیرند شامل eot، ttf و woff هستند. معمولا فونت با فرمت ttf با همه مرورگرها سازگاری دارد و نسبت به سایر فونت‌ها بیشتر مورد استفاده قرار میگیرد. پس برای استفاده از فونت دلخواه خودتان (فونت رایگان) کافیست در گوگل جستجو کرده و فونت دلخواه را دانلود کنید. اما اگر فونت شما تجاری هست حتما باید آن را خریداری کنید.

حال بعد از اینکه فونت را با فرمت ttf و سایر فرمت‌ها تهیه کردید نوبت به نصب فونت در وردپرس می رسد. اگر فونت شما به گونه‌ای است که فرمت‌های دیگر برای آن ساخته نشده مشکلی نیست و می توانید به راحتی با استفاده از ابزار آنلاین اقدام به تبدیل فرمت کنید! برای اینکار کافیست تا عباراتی مثل convert ttf to eot و convert ttf to woff را جستجو کرده و از این سایت‌ها برای تبدیل فرمت فونت به فرمت های woff و eot استفاده کنید.

روش اول: نصب فونت در قالب وردپرس با کدنویسی

حالا برای نصب فونت در قالب وردپرس ابتدا وارد هاست خود شده و سپس بر روی File Manager کلیک کنید تا به محیط فایل منیجر هاست هدایت شوید. سپس به پوشه قالب وردپرس مراجعه کنید. یعنی به مسیر /public_html/wp-content/themes/ مراجعه کرده و در نهایت وارد پوشه قالب شوید. حال در این مرحله لازم است فونتی که تهیه کرده اید را در پوشه fonts آپلود کنید. اگر پوشه‌ای با این نام در پوشه قالب ندارید می توانید یک پوشه بسازید و سپس فایل‌های فونت که با سه فرمت ttf، eot و woff هستند را در این پوشه آپلود کنید.

در اینجا من قصد دارم از فونت ایران سنس دست نویس برای سایت خودم استفاده کنم که مشابه تصویر، فونت‌ها با نام iransansdn خریداری و در پوشه fonts قالب آپلود شده است. حال بعد از اینکه فونت خودتون را آپلود کردید به پوشه قبل یعنی مسیر اصلی پوشه قالب خودتان برگردید و به دنبال فایل style.css قالب بگردید. بعد از اینکه فایل استایل را پیدا کردید روی اون راست کلیک کرده و گزینه Edit را انتخاب کنید تا به صفحه ویرایشگر این فایل مراجعه کنید. بعد از مراجعه به صفحه ویرایشگر فایل خواهید دید که در خطوط ابتدایی این فایل مشابه تصویر زیر کدهای css برای افزودن فونت در قالب وردپرس وجود دارند که لازم است آنها را شخصی سازی کنید.

حال همانطور که در تصویر می بینید در اینجا من از فونت با فرمت‌های woff و ttf استفاده کردم. حال برای استفاده از فونت دلخواه خودتان، شما هم می توانید با قرار دادن کد زیر در این فایل فونت دلخواه را قرار دهید. دقت کنید که اگر از قبل کدهایی مثل زیر وجود دارد باید آنها را ویرایش کنید.

@font-face {
	font-family: 'iransansdn';
	src: url('fonts/iransansdn.eot?#') format('eot'),
	url('fonts/iransansdn.woff') format('woff'), 
	url('fonts/iransansdn.ttf') format('truetype');
}

همانطور که در خط دوم کد می بینید ابتدا باید برای فونت خودمان یک اسم انتخاب کنیم. چون من از فونت ایران سنس دست نویس استفاده می‌کنم از اسم iransansdn استفاده می‌کنم و خانواده فونت خودم را در قالب با این اسم قرار می‌دهم تا در هر بخش از کلاس قالب که گفته شده بود فونت آن بخش با این نام باشد، این فونت‌ها برای آن بخش لود شوند. سپس در خطوط سوم تا پنجم مسیری که فونت‌ها در اون قرار دارد به همراه نام و فرمت فونت‌ها مشابه نمونه وارد کنید. در اینجا fonts نام پوشه است که بعد از یک / iransansdn قرار دارد که عبارت است از نام فونت به همراه فرمت فونت. در نهایت نام خانواده فونت خودمان را که با iransansdn قرار دادیم را در بخش‌های مختلف کلاس قالب استفاده کنید.

برای این منظور کل فایل استایل را بررسی کنید و هر کجا که کد font-family مشاهده کردید بررسی کنید، اگر از فونت دیگری در مقابل نام آن به غیر از iransansdn استفاده شده بود به این معنی است که باید نام آن را تغییر دهید. به عنوان نمونه تمامی کلاسی که در فایل استایل شما قرار دارد باید بصورت زیر باشد.

font-family: iransansdn;

اگر هم احیانا در جایی دیدید که به شکلی هست که چندین نام در مقابل آن قرار دارد برای اینکه اولویت با فونت سفارشی شما باشد باید اولین نام را با iransansdn وارد کنید.

font-family: 'iransansdn', 'Helvetica Neue', sans-serif;

در نهایت بعد از ذخیره فایل فونت سایت شما تغییر خواهد کرد. دقت داشته باشید که فایل RTL.css را هم بررسی کنید که اگر فونت‌ها در این فایل با فرمت و نام جداگانه بودند به همین ترتیب آنها را هم باید در این فایل تغییر بدهید. برای تغییر فونت وردپرس در فایل rtl.css لازم است تا به همین ترتیب عمل کنید و اگر که فونت‌ها در این فایل به صورت جداگانه لود می شوند هم اصلاح شده و نام خانواده فونت را هم برای کلیه کلاس‌های فونت قالب تغییر دهید.

روش دوم: استفاده از افزونه فونت دلخواه وردپرس

یک راه ساده دیگر، استفاده از افزونه فونت دلخواه وردپرس است که در این روش با نصب یک افزونه می توانید فونت دلخواه خودتان را به قالب وردپرس اضافه کنید. در این روش کافیست فایل فونت و نام خانواده فونت رو انتخاب کنید و بعد از اضافه کردن داخل افزونه کاری کنید که قالب سایت با این فونت نمایش داده شود. افزونه فونت دلخواه وردپرس که قصد دارم معرفی کنم با نام Use Any Font در مخزن وردپرس به ثبت رسیده و تا به امروز توانسته بیش از 100.000 نصب فعال را به خودش اختصاص داده و از این تعداد نصب امتیاز 4.7 را دریافت کند. برای استفاده از این افزونه روی دکمه زیر کلیک کنید تا به صفحه افزونه هدایت شوید و بعد با استفاده از آموزش نحوه نصب و کار کردن با افزونه ها در وردپرس اقدام به نصب و فعال کردن افزونه کنید.

بعد از نصب و فعال سازی افزونه مشابه تصویر زیر منویی با نام Use Any Font اضافه می شود که با رفتن به این منو می توانید فونت دلخواه خودتان را در وردپرس اضافه کنید.

همانطور که در تصویر می بینید ابتدا لازم است یک API Key از سایت سازنده افزونه برای استفاده از فونت دلخواه در وردپرس تهیه کنید. بنابراین روی لینکی که در کادر قرمر می بینید و با نام HERE قرار دارد کلیک کنید تا به سایت سازنده هدایت شوید.

مشابه تصویر بالا در فرم با استفاده از نوار کشیدنی ابتدا آن را به سمت چپ بکشید تا به حالت رایگان برای افزودن فونت در وردپرس برسید. سپس اطلاعات شخصی خودتان که شامل نام، نام خانوادگی و ایمیل می شود را در فرم پر کنید و در نهایت روی دکمه سبز رنگ SUBMIT کلیک کنید.

حال همانطور که می بینید کد API KEY مختص برای شما ساخته شده و می توانید با استفاده از این کلید API قابلیت استفاده از این افزونه برای افزودن فونت دلخواه در وردپرس را داشته باشید. کد را کپی کرده و در صفحه تنظیمات افزونه وارد کنید.

حال بعد از قرار دادن کد api روی دکمه verify کلیک کنید تا اعتبار سنجی انجام گیرد و امکان افزودن فونت دلخواه در وردپرس در این افزونه برای شما فعال شود که در صورت درست بودن این مرحله باید پیغامی مثل تصویر زیر را مشاهده نمایید.

حال روی دکمه Add Fonts کلیک کنید تا فونت دلخواه برای استفاده در وردپرس را اضافه نمایید. با کلیک روی این دکمه فرم زیر نمایش داده می شود که باید اسم خانواده فونت را در فیلد Font Name وارد کنید و سپس فایل فونت را هم با یکی از فرمت‌های ttf، otf، woff و با حداکثر حجم 15 مگابایت انتخاب کنید. در نهایت روی دکمه Upload کلیک کنید تا فایل فونت آپلود شده و به لیست فونت‌های قابل استفاده در افزونه اضافه شود.

حال بعد از اینکه فونت آپلود شد مشابه تصویر زیر روی دکمه Assign Font کلیک کنید تا فرم زیر نمایش داده شود تا بتوانید برای انواع مختلفی از تگ‌های HTML و کلاس دلخواه که در سایت استفاده می‌کنید تعریف کنید که برای نمایش آنها از این فونت استفاده شود.

Select Font: ابتدا از این قسمت فونتی که در مرحله قبل با نام دلخواه ساختید را انتخاب کنید.

Select elements to assign: از این بخش انواع تگ‌های HTML که قادر به استفاده از این فونت هستید را انتخاب کنید. در اینجا من قصد دارم روی همه برچسب‌های html که توسط این افزونه مشخص شده از فونت ایران‌سنس استفاده کنم. پس تیک همه این گزینه‌ها را فعال می‌کنم.

Custom Elements: از این کادر هم می توانید نام کلاس دلخواه قالب که می خواهید فونت این کلاس‌ها هم با این فونت نمایش داده شود را انتخاب کنید. این گزینه زمانی کاربرد دارد که اگر در برخی از جاهای سایت فونت نمایش داده نشد، بتوانید با قرار دادن کلاس CSS آن بخش داخل این فیلد نمایش فونت دلخواه را فراهم کنید. در نهایت روی دکمه Assign Form کلیک کنید تا تنظیمات ذخیره شود.

حال همانطور که در تصویر می بینید امکان استفاده از فونت دلخواه در وردپرس فراهم شده و تمام بخش‌های قالب با استفاده از افزونه فونت دلخواه وردپرس نمایش داده خواهند شد.

روش سوم: استفاده از افزونه فونت ماندگار

یکی دیگه از افزونه‌های پرطرفدار که امکان استفاده از فونت دلخواه در وردپرس را می دهد یک افزونه فارسی است که داخل این افزونه فونت‌های پرطرفدار فارسی مثل ایران سنس، بی یکان، وزیر و… قرار داده شده‌اند که این افزونه هم امکان استفاده از فونت‌های مشخص شده را به شما می دهد. برای استفاده از این افزونه هم می توانید به آموزش تغییر فونت در قالب وردپرس رفته و راهنمای استفاده از افزونه فونت ماندگار را مشاهده کنید.