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

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

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

چرا باید از فونت فارسی در وردپرس استفاده کنیم؟

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

یکی از موضوعاتی که باعث خروج کاربران از سایت می‌شود، استفاده از فونت نامناسب است. احتمالا اگر شما هم دو سه سال قبل را به یاد بیاورید، وقتی وارد سایت‌های خبرگزاری بزرگ می‌شدیم خاطرتان هست که متن اخبار با فونت tahoma نمایش داده میشد. موضوع وقتی بدتر میشد که از اندازه درستی نیز برای متن استفاده نشده بود و در خواندن متن خبرها دچار مشکل بودیم.

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

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

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

روش اول: افزونه تغییر فونت وردپرس

در این روش شما می‌توانید به کمک یک افزونه فونت دلخواه را در وردپرس استفاده کنید. ده ها افزونه برای استفاده از فونت در وردپرس وجود دارند که یکی از بهترین آنها استفاده از افزونه MW Font Changer است که تا این لحظه بیش از ۱۰ هزار نصب فعال را به خود اختصاص داده است. در این افزونه از فونت‌های رایج وب فارسی که می‌توانید در وردپرس از آنها استفاده کنید استفاده شده است.

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

دانلود افزونه فونت فارسی وردپرس

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

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

روش دوم: افزودن فونت فارسی به وردپرس با کدنویسی

برای این منظور شما می‌توانید از طریق افزودن کدهای CSS که به فایل style.css یا فایل rtl.css در صورت موجود بودن، فونت دلخواه خود را فراخوانی کنید. بنابراین ابتدا کدهای زیر را در یک برنامه ویرایشگر متن مانند notepad کپی کرده و ان را شخصی سازی می‌کنیم.

/* add custom font in wordpress by Abbas Sadeghi */
@font-face {
    font-family: 'vazir';
    src: url('fonts/vazir.eot?#') format('eot'),
    url('fonts/vazir.woff') format('woff'),
    url('fonts/vazir.woff2') format('woff2'),
    url('fonts/vazir.ttf') format('truetype');
}
body{
        font-family: vazir;
}

حالا به کدهای بالا به دقت توجه کنید و بر اساس توضیحاتی که در ادامه داده می‌شود، آن را شخصی سازی کنید.

• ابتدا وارد پوشه قالب فعال خود شوید و یک پوشه با نام fonts به پوشه قالب اضافه کنید. سپس فایل فونت‌های خود را در این پوشه آپلود کنید. دقت کنید که اگر قالب خود را آپدیت کنید این پوشه و کدهای بالا که به فایل استایل اضافه می‌کنید، از بین خواهند رفت، بنابراین سعی کنید از قالب چایلد تم برای این کار استفاده کنید. شما می‌توانید با قرار داردن کدهای بالا در پوشه قالب فرزند، از این کار جلوگیری کنید و نیازی نباشد که هر بار که قالب آپدیت می‌شود کار افزودن فونت فارسی به وردپرس را تکرار کنید. قالب فرزند پوشه‌ای در داخل پوشه themes است که نام آن با نام پوشه قالب یکی بوده و در انتهای آن یک child اضافه می‌شود. به عنوان نمونه اگر از قالب jannah استفاده کنید، پوشه تم فرزند آن با نام jannah-child در پوشه themes وردپرس قرار دارد.
• سپس کدهای بالا را به فایل rtl.css چایلد تم یا style.css قالب اصلی اضافه کنید. سعی کنید این کدها در خط ابتدایی باشند تا پیش از هر چیزی در هنگام لود سایت، فونت سایت شروع به لود شدن کند.

حال باید بر اساس توضیحاتی که در ادامه در مورد تگ‌های استفاده شده در این کد وجود دارد فونت خود را شخصی سازی کنید.

• تگ font-family که در خط دوم می‌بینید مربوط به انتخاب یک فونت به عنوان خانواده فونت است. این نام را بر اساس نام فونت انتخاب کنید. شما با استفاده از این نام می‌توانید مشخص کنید که فونت هر بخش از سایت با چه فونتی نمایش داده شود.
• خط چهارم تا هفتم مربوط به لود فایل‌های فونت است که اگر به آنها دقت کنید، ابتدا مشخص شده که در مسیر فعلی فایل css ما یک پوشه با نام fonts قرار دارد. باید وارد این پوشه شده و فایل فونت را که با نام و فرمت‌های مختلف مشخص کردیم لود کند.
• در نهایت در خط نهم که با تگ body می‌بینید مشخص کردیم که فونت کل سایت با فونت دلخواه ما نمایش داده شود.

در صورتی که قالب شما تنظیماتی برای انتخاب فونت در بخش‌های مختلف داشته باشد، می‌توانید با تنظیم کردن نام فونت روی نامی که در خط دوم مشخص کردید تعیین کنید که هر بخش با چه فونتی نمایش داده شوند.

نکاتی در خصوص استفاده از فونت سفارشی وردپرس

نکته اول: شاید مهم‌ترین نکته‌ای که در خصوص افزودن فونت دلخواه در وردپرس باید آن را ذکر کنم، استفاده از فرمت مناسب فونت است. همانطور که می‌دانید ما با چهار فرمت otf، ttf، woff و woff2 در طراحی فونت سر و کار داریم. در گذشته به این دلیل که برخی مرورگرها با برخی از این فونت‌ها سر ناسازگاری داشتند، مجبور بودیم که از همه ۴ فرمت یا لااقل از سه فرمت آنها استفاده کنیم.

اما امروزه دیگر با گذشت ورژن تمامی مرورگرها از مرز ۵۰، نیازی نیست که از همه این فرمت‌ها استفاده کنید. چرا که استفاده از همه این فرمت‌ها موجب افزایش تعداد درخواست HTTP و به دنبال آن کاهش سرعت سایت خواهد شد. خصوصا اینکه فونت‌ها در چندین نسخه مختلف همچون light، bold، regular و… نیز در دسترس هستند.

بنابراین پیشنهاد می‌کنم فقط از فرمت woff2 استفاده کنید که نسبت به سایر فرمت‌ها کمترین حجم ممکن را دارد. اگر این فرمت وجود نداشت می‌توانید از فرمت woff یا سایر فرمت‌ها استفاده کنید.

نکته سوم: برای اینکه از روشی استاندارد برای افزودن فونت دلخواه به وردپرس استفاده کنید، پیشنهاد می‌کنم حتما از روش دوم که با کد نویسی انجام می‌گیرد فونت دلخواه خود را اضافه کنید. شما می‌توانید با قرار دادن کدهای فونت در فایل style.css یا rtl.css از فونت دلخواه در فایل مناسب استفاده کنید. اهمیت استفاده از این روش به دلیل تاثیر آن در سرعت سایت است.

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

جمع بندی و کلام آخر

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

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