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

علی شفیعی

مدیرعامل

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

۱۴۰۰/۰۴/۰۷

اشتراک گذاری مطلب

آموزش افزودن فونت دلخواه در وردپرس افزودن فونت دلخواه در وردپرس به نوشته های سایت باعث خوانایی بیشتر مطالب در سایت می شود که تاثیر بسزایی در UI و شاهر سایت دارد به صورتی که تغییر آن باعث زیبای ظاهری سایت می شود.

 به طوری که که یک تغییر کوچک  باعث زیرو رو شدن سایت و زیبایی آن می شود. 

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

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

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

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

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

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

دیگر خبری از ابعاد کوچک نیست و می‌توانید تا ساعت‌ها به خواندن در این سایت‌ها بپردازید.

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

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

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

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

ده ها افزونه برای استفاده از فونت در وردپرس وجود دارند که یکی از بهترین آنها استفاده از افزونه MW Font Changer است

که تا این لحظه بیش از ۱۰ هزار نصب فعال را به خود اختصاص داده است.

در این افزونه از فونت‌های رایج وب فارسی که می‌توانید در وردپرس از آنها استفاده کنید استفاده شده است.

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

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

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

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

فونت دلخواه خود را انتخاب کنید. در نهایت پس از انتخاب فونت، روی دکمه ذخیره تغییرات که کلیک کنید،

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

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

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

بنابراین ابتدا کدهای زیر را در یک برنامه ویرایشگر متن مانند notepad کپی کرده و ان را شخصی سازی می‌کنیم.

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

ابتدا وارد پوشه قالب فعال خود شوید و یک پوشه با نام 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 استفاده می‌شوند از یک فونت ضخیم مانند فونت لاله زار و در سایر بخش‌های سایت از فونت مد نظرتان استفاده کنید. پیشنهاد می‌کنید مقاله راهنمای استفاده از تگ های هدینگ در وردپرس را نیز از دست ندهید.

نتیجه گیری:

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

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

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

در صورتی که مشکلی در استفاده از فونت فارسی در وردپرس دارید،

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

همچنین در نظر داشته باشید که حتما به نکاتی که در خصوص استفاده از فونت فارسی در وردپرس ذکر کردم،

چه نکات مربوط به استفاده بهینه و چه نکاتی که برای رعایت کپی رایت وجود دارند، توجه لازم را داشته باشید.

گردآوری: نایس کدرز

دیدگاه ها

کامنتی برای این پست وجود نداره

چند مطلب دیگه

آخرین مطالب

افزودن دیدگاه


ارسال
بیخیال
shakhe 1 shakhe 2