آموزش وردپرسطراحی سایت

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

0
(0)

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

تغییر فونت سایت در سفارشی ساز قالب وردپرس

حتما شما هم پس از خرید هاست وردپرس و راه‌اندازی اولیه سایت وردپرسی خود کنجکاو هستید که بدانید اولین روش تغییر فونت سایت وردپرس چیست؟ در اولین روش، از بخش سفارشی ساز قالب وردپرس برای تغییر فونت سایت استفاده می‌کنیم. در واقع، یکی از ساده‌ترین راه‌های تغییر فونت‌ها در قالب وردپرس انجام این کار از قسمت سفارشی ساز است. تغییر فونت‌ها در قالب وردپرس از بخش سفارشی ساز، به شما اجازه می‌دهد ظاهر وبسایت خود را تغییر دهید و در همان لحظه یک پیش‌نمایش هم از آن مشاهده کنید.

برای این آموزش، ما از سرور مجازی برای میزبانی و همینطور قالب Astra استفاده می‌کنیم. با این حال، بسته به قالب وردپرسی که شما در سایت خود استفاده می‌کنید، ممکن است گزینه‌ها متفاوت باشند. همچنین می‌توانید یکی از گزینه‌های «فونت» یا «تایپوگرافی» را در سفارشی ساز قالب جستجو کنید. به عنوان اولین قدم برای تغییر فونت سایت وردپرس می‌توانید به بخش Appearance و سپس Customize مراجعه کنید که در تصویر زیر مشخص شده است.

change site font

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

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

change site font

 

در صفحه بعدی، گزینه‌هایی مانند تایپوگرافی، رنگ‌ها و دکمه‌ها را خواهید دید. از بین این موارد، باید روی گزینه Typography کلیک کنید.

change site font

از اینجا می‌توانید فونت‌های مختلفی را در بخش پیش‌تنظیمات (Presets) انتخاب کنید. مواردی که در این قسمت وجود دارند، فونت‌های پیش‌فرض قالب هستند. با انتخاب هر یک از آن‌ها فونت کل وب سایت شما تغییر خواهد کرد.

change site font

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

change site font

علاوه بر این، گزینه‌های دیگری هم برای تغییر اندازه فونت، وزن، نوع و موارد دیگر مرتبط با فونت وجود دارند. زمانی که کار شما برای تغییر فونت‌ها در قالب وردپرس به اتمام رسید، فراموش نکنید که روی دکمه انتشار (Publish) کلیک کنید.

اکنون می‌توانید یک بار دیگر سایت خود را رفرش کنید و فونت جدیدی که طبق دستورالعمل فوق انتخاب کردید را مشاهده نمایید. به عنوان مثال، ما در سایت آزمایشی خود فونت بدنه را به Roboto و فونت عنوان را به Helvetica تغییر داده‌ایم.

نکته حائز اهمیت این است که همه قالب‌های وردپرس ویژگی‌ها و قابلیت‌های سفارشی سازی که در قالب Astra وجود دارد را ارائه نمی‌کنند. اگر قالب مورد استفاده شما هم جزو این دسته است و گزینه‌هایی که نام برده شد در آن وجود ندارد، به خواندن این مطلب ادامه دهید تا از روش‌های دیگری که برای تغییر فونت سایت آموزش می‌دهیم استفاده کنید.

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

بسیاری از ویرایشگرهای کامل سایت وردپرس به طور پیشفرض شامل فونت‌های متنوعی هستند. تم‌هایی مثل  Blockbase، Emulsion، Aino و Twenty Twenty-Two  امکان تغییر فونت را در ویرایشگر تم فراهم می‌کنند. به عنوان نمونه: استفاده از تم Blockbase .

وارد داشبورد وردپرس شوید و به قسمت Theme و سپس Editor بروید.

full site editor in wordpress

روی آیکون مشخص شده کلیک کنید.

full site editor in wordpress

برای تغییر فونت Typography  را انتخاب کنید.

full site editor in wordpress

به قسمت Text بروید تا علاوه بر فونت متن، فونت لینک‌ها را نیز تغییر دهید.

full site editor in wordpress

در منوی  Font family فونت دلخواه‌تان را انتخاب کنید. سپس سایز، ارتفاع خط و ظاهر فونت را تنظیم نمایید و ذخیره کنید.

full site editor in wordpress

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

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

1.استفاده از سفارشی‌ساز تم (Theme Customizer) برای تغییر دادن فونت‌ها

با توجه به تم مورد استفاده در وبسایت‌تان، گزینه‌های متفاوتی برای تغییر فونت در اختیار دارید. به عنوان مثال در تم Genesis فونت پیش‌فرض می‌تواند تغییر کند. همچنین این تم از فونت‌های گوگل به صورت پیش‌فرض پشتیبانی می‌کند:

به داشبورد وردپرس خود بروید.

روی Appearance و سپس Customize کلیک کنید.

use the theme customizer

 

در صفحه  Customize گزینه Typography را انتخاب نمایید.

 

در ادامه با کلیک بر روی  Font Managerمنوی دراپ داون باز می‌شود.

در این منو، فونت مورد نظر خود را جستجو و انتخاب کنید و برای اضافه کردن آن به وبسایتتان روی دکمه Add Font کلیک نمایید.

 

use the theme customizer

 

از طریق گزینه  Add Typography می‌توانید فونت‌های اضافه شده را به بخش‌های مختلف سایت مانند هدر، فوتر و بدنه متن اختصاص دهید.

در این قسمت، شما می‌توانید تغییرات مد نظر را بر روی فونت‌های وبسایتتان اعمال کنید:

  • ابتدا بخشی که می‌خواهید فونت آن را تغییر دهید را انتخاب کنید.
  • سپس فونت مورد نظرتان را از قسمت Font Family انتخاب نمایید.
  • فونت و text transformation را بر اساس نیاز خود تنظیم کنید.
  • در آخر، سایز فونت، ارتفاع خطوط، فاصله بین حروف و مارجین پایین را متناسب با نیاز خود تنظیم نمایید.

use the theme customizer

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

با کمک ویرایشگر بلوک‌وار، تنظیماتی از جمله تغییر ظاهر فونت‌ها، انتخاب رنگ متن و پس‌زمینه (۱ و ۲) و تنظیم سایز فونت‌ها (۳) امکان‌پذیر هست.

گزینه appearance معمولاً شامل انتخاباتی مانند font-weight بر اساس فونت انتخابی است.

بخش‌هایِ متنی بلوک‌ها حاوی تنظیماتِ بیشتری مانند اعمال bold و italic بر روی متن یا تنظیم ترتیب قرارگیری متن هستند.

using the block editor

آپشن‌های اضافی شامل برجسته کردن متن، قراردادن کد و تصویر در متن و strikethrough می‌شود. همچنین افزودن حالت‌های subscript و superscript به متن نیز ممکن است.

using the block editor

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

افزودن دستی فونت به سایت وردپرس مشکل بزرگی ایجاد نخواهد کرد، فقط نیاز به ویرایش فایل‌های تم خواهید داشت. بهتر است این تغییرات را روی یک child theme  انجام دهید تا از بروز مشکلات احتمالی جلوگیری کنید.

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

گام اول: انتخاب فونت

ابتدا به وبسایت Google Fonts بروید و فونت Roboto را جستجو کنید. پس از آن، سبک مورد نظر خود از این فونت را که مایلید در سایت خود استفاده نمایید، انتخاب کنید.

font selection

گام دوم: کپی لینک فونت

لینک مربوط به فونت Roboto را کپی کنید، لینک به شکل زیر خواهد بود:

https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap

گام سوم: اتصال با FileZilla

– FileZilla را باز کنید و با استفاده از پروتکل FTP به سایت خود متصل شوید. به مسیر زیر در سایت خود بروید:

public-html/wp-content/themes/yourthemechild/functions.php

مطمئن شوید که yourthemechild را با نام دقیق child theme خود جایگزین کرده باشید.

connect with filezilla

گام چهارم: ویرایش فایل functions.php

فایل  functions.php را باز کرده و کد زیر را به کدهای موجود اضافه نمایید:

function add_my_font()

wp_enqueue_style( ‘add_my_font’, ‘https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap’, false );

add_action( ‘wp_enqueue_scripts’, ‘add_my_font’ )

گام پنجم: تعریف مکان استفاده فونت در وردپرس

برای تعیین مکان‌های استفاده از فونت Roboto در وبسایت، کد CSS زیر را به فایل  style.css متعلق به child theme خود اضافه کنید:

body, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: ‘Roboto’, sans-serif; }

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

تغییر فونت وردپرسی با استفاده از افزونهFonts Plugin | Google Fonts Typography

برای کاربران وبسایت‌های وردپرسی که از تم‌های عمومی و رایگان استفاده می‌کنند، امکان تغییر فونت از طریق افزونه‌هایی مانند فونت ماندگار یا Fonts Plugin | Google Fonts Typography  وجود دارد. این مطلب شیوه نصب، تنظیمات و نهایتا استفاده از افزونه برای تغییر فونت‌ها را به شما آموزش می‌دهد.

در داشبورد وردپرس به قسمت Plugins بروید و روی Add New کلیک کنید.

changing the wordpress font using a plugin

در قسمت جستجو، عبارت Fonts Plugin | Google Fonts Typography را تایپ کنید.

پس از یافتن افزونه (۴) روی دکمه Install Now کلیک کنید.

برای فعال‌سازی افزونه، دکمه activate را فشار دهید.

changing the wordpress font using a plugin

به بخش Appearance و سپس Customize بروید تا صفحه بارگذاری شود. در ادامه یک منوی جدید به نام Fonts Plugin ظاهر خواهد شد که شما باید وارد آن شوید.

changing the wordpress font using a plugin

در تنظیمات افزونه، بخش‌های  font loading، advanced settings، basic settings و debugging را خواهید دید.

در  basic settings از میان بیش از ۱۴۰۰ فونت گوگل می‌توانید فونت پیش‌فرض را انتخاب کنید. همچنین امکان انتخاب فونت برای هدینگ‌ها، دکمه‌ها و ورودی‌ها وجود دارد.

changing the wordpress font using a plugin

 

در بخش  Advanced Settingsمی‌توانید فونت عنوان و شعار سایت، فونت منوی ناوبری، فونت بدنه اصلی متون و هدینگ‌ها را مجزا تنظیم کنید.

changing the wordpress font using a plugin

 

 

در بخش Content و قسمت Content Typography می‌توانید فونت بدنه اصلی متون (۱) و عنوان و هدینگ‌ها (۲) را بصورت مجزا انتخاب کنید.

changing the wordpress font using a plugin

 

زبانه‌های Sidebar و Footer اجازه تغییر فونت هدینگ‌ها و بدنه متن این بخش‌ها را می‌دهند. در قسمت Load Fonts Only، می‌توانید فونت‌های مختلف را بدون تغییر فونت سایت بارگذاری و مشاهده کنید.

changing the wordpress font using a plugin

قسمت Debugging به شما کمک می‌کند تا در صورت عدم نمایش صحیح فونت‌ها، علت را شناسایی و رفع کنید.

با فعال کردن گزینه  disable editor controlsکنترل‌های فونت از صفحات ویرایشگر حذف می‌شوند.

در منوی  Font displayبا چهار گزینه  optional، fallback، block و swap روبرو هستید که بسته به سلیقه و نیاز خود می‌توانید یکی از آن‌ها را انتخاب کنید. با دنبال کردن این گام‌ها می‌توانید به آسانی و بدون نیاز به ویرایش کد، فونت‌های وبسایت وردپرسی‌تان را تغییر دهید.

changing the wordpress font using a plugin

چرا تغییر دادن فونت‌ها در وردپرس چرا اهمیت دارد؟

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

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

دسته‌بندی فونت‌های وردپرس

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

1.فونت Serif

فونت‌های Serif با تزئینات کوچکی در انتهای حروف‌هایشان مشخص می‌شوند که به آن‌ها Serif گفته می‌شود. از این فونت‌ها معمولاً در متن بدنه استفاده می‌شوند. همچنین Times New Roman و Georgia از جمله فونت‌های معروف این دسته هستند.

serif font

2.فونت Sans Serif

فونت‌های  Sans Serifیعنی فونت‌هایی که فاقد تزئینات Serif هستند، ظاهری ساده‌تر و منحنی‌تر دارند و اغلب در متن‌های بدنه به کار برده می‌شوند. Arial و Calibri  نیز از فونت‌های شناخته شده‌ این دسته هستند.

sans serif font

3.فونت Script

فونت‌های Script به حروفی شباهت دارند که دست‌نوشته و به یکدیگر متصل هستند و برای به کاربردن در عنوان‌ها مناسب هستند. Lucida Handwriting و Mistral  نمونه‌هایی از فونت‌های این دسته به‌شمار می‌روند.

script font

4.فونت Display

این فونت‌ها که به آن‌ها دکوراتیو یا تزئینی هم گفته می‌شود، بیشتر در بخش‌های عنوان و هدر سایت‌ها به کار می‌روند. فونت‌های Allegro و Stencil مثال‌هایی از این دسته فونت‌ها هستند.

display font

مزایا و معایب تغییر فونت های وردپرسی

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

تغییر فونت سایت وردپرسی با استفاده از افزونه تعییر فونت سایت وردپرسی بدون استفاده از افزونه
راحتی در استفاده برای تازه کارها کمی پیچیده است
بدون نیاز به کدنویسی نیازمند آشنایی با کدهای  css
استفاده از خط کدهای متعدد به جای چند کد در وردپرس بدون نیاز به استفاده از کدهای اضافی در وردپرس
نیازمند نصب افزونه بدون نیاز به افزونه
راهکار غیرحرفه ای روشی کاملا حرفه ای
کاهش سرعت وب سایت عدم کاهش سرعت وب سایت

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

در پایان، لازم است با افزونه‌ای که به عنوان بهترین گزینه برای تغییر فونت فارسی در وبسایت‌های وردپرسی شناخته شده است آشنا شوید؛ افزونه فونت ماندگار. این پلاگین مناسب برای وبسایت‌هایی است که نیازمند تغییر فونت به زبان فارسی هستند و با بسیاری از قالب‌های استاندارد وردپرس سازگار است. افزونه فونت ماندگار طیف گسترده‌ای از فونت‌های فارسی، بیش از ۳۰ نوع را دربرمی‌گیرد و امکان تغییر فونت پیشخوان و ظاهر سایت را فراهم می‌کند. این افزونه همچنین با مرورگرهای پرکاربرد نظیر فایرفاکس، گوگل کروم و اینترنت اکسپلورر به خوبی کار می‌کند. میان فونت‌های دردسترس در این افزونه می‌توان به فونت‌های معتبری نظیر:

  • بی میترا
  • بی یکان
  • ایران سنس
  • ساحل
  • Arial
  • تاهوما اشاره کرد.

سخن پایانی

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

چقدر این پست مفید بود؟

روی یک ستاره کلیک کنید تا به آن امتیاز دهید!

میانگین امتیاز 0 / 5. تعداد آرا: 0

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

دیدگاهتان را بنویسید

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

دکمه بازگشت به بالا