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

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

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

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

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

چرا باید فونت سایت خود را تغییر دهیم؟

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

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

بیشتر بخوانید: رپورتاژ خود را کجا منتشر کنیم؟ راهنمای انتخاب بهترین سایت رپورتاژ آگهی

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

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

1- نحوه تغییر سایز فونت عناوین در وردپرس

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

نحوه اضافه کردن عنوان در ویرایشگر گوتنبرگ

برای انجام اینکار در ابتدا وارد یک پست یا صفحه دلخواه خود شوید و آن را با استفاده از ویرایشگر گوتنبرگ باز کنید. پس از اینکه وارد ویرایشگر صفحه دلخواه خود شدید، روی دکمه «+» در گوشه سمت چپ بالای صفحه کلیک تا منوی بلوک برای شما باز شود. حال از این قسمت باید بلوک عنوان را پیدا کرده و به صفحه یا پست خود اضافه کنید.

به صورت پیش‌فرض، بلوک روی عنوان 2 تنظیم می‌شود.

حال اگر قصد دارید که عنوان را تغییر دهید، کافیست به سادگی روی منوی کشویی «H2» کلیک تا اندازه دیگری را برای ان انتخاب کنید.

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

نحوه اضافه کردن عنوان در ویرایشگر کلاسیک

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

با این حال، به خاطر داشته باشید که ویرایشگر کلاسیک به شما اجازه نمی‌دهد اندازه و رنگ فونت سبک‌های مختلف عنوان را تغییر دهید. اگر قصد دارید که این کار را انجام دهید، شما باید تغییراتی را در صفحه استایل قالب خود (style.css) ایجاد کنید. در نهایت بعد از انجام تغییرات روی دکمه بروزرسانی کلیک کنید.

بیشتر بخوانید: نکات مهم برای بهینه سازی URL سایت

2- آموزش تغییر سایز فونت سایت وردپرس در ویرایشگر گوتنبرگ

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

شما می‌توانید با توجه به نیاز خود اندازه فونت خود را روی بزرگ، متوسط و … تنظیم کنید.

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

به غیر از آن، همچنین این امکان برای شما فراهم است تا با استفاده از همان منوی کشویی، سرپوش، حروف، فاصله، ظاهر و موارد دیگر را نیز اضافه کنید. پس از انجام تغییرات تنها کافیست روی دکمه به‌روزرسانی کلیک کنید.

بیشتر بخوانید: آموزش افزودن فونت فارسی به افزونه Revolution Slider

3- نحوه تغییر فونت در وردپرس با افزونه

یکی دیگر از بهترین روش های تغییر اندازه فونت سایت وردپرس، استفاده از یک افزونه ورد پرس است. خوشبختانه افزونه‌های مختلفی در این خصوص ارائه شده است که بی‌تردید یکی از بهترین و محبوب‌ترین آنها افزونه Advanced Editor Tools است.

این افزونه به صورت رایگان در مخزن وردپرس به ثبت رسیده و هم اکنون دارای بیش از 2 میلیون نصب فعال است. برای استفاده از آن، در اولین قدم شما باید آن را در سایت خود نصب و فعال کنید. برای اینکار وارد پیشخوان وردپرس خود شوید و سپس از بخش “افزونه‌ها” روی گزینه “افزودن” کلیک کنید. سپس نام افزونه را در باکس بالای صفحه وارد و سرچ کنید. پس از اینکه افزونه برای شما نمایان شد کافی است آن را نصب و فعال کنید. همچنین اگر با طریقه نصب افزونه آشنایی ندارید به شما پیشنهاد می‌کنم که مطلب “چگونه در وردپرس افزونه اضافه کنیم؟ راه های نصب پلاگین در وردپرس” را مشاهده کنید.

نحوه تغییر سایز فونت در وردپرس با این افزونه به این صورت است که هنگامی که افزونه را فعال کردید، از پنل و از بخش “تنظیمات” روی گزینه “Advanced Editor Tools” کلیک کنید. پس از آن، می‌توانید به راحتی ویژگی‌های قالب‌بندی را از بخش “دکمه‌های استفاده نشده” به بلوک «پاراگراف کلاسیک» بکشید و رها کنید. این ویژگی‌ها عبارتند از اندازه فونت، خانواده فونت، کپی، اشتراک، شکلک‌ها، کد منبع و … .

پس از انجام این کار، به قسمت “Options” بروید و گزینه “اندازه‌های فونت” را علامت بزنید تا بتوانید اندازه‌‌های فونت مختلفی را نیز مشاهده کنید. در نهایت، به سادگی روی دکمه “ذخیره تغییرات” کلیک تا تنظیمات شما ذخیره شود.

بیشتر بخوانید: پوش نوتیفیکیشن چیست و چطور آن را در وردپرس فعال کنیم؟

4- آموزش نحوه تغییر اندازه فونت در وردپرس با کدنویسی

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

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

پس از فعال شدن افزونه، وارد پیشخوان خود شده و سپس از بخش Code Snippets روی گزینه + Add Snippets کلیک کنید. پس از آن، روی گزینه Use Snippet در زیر بخش ‘Add Your Custom Code کلیک نمائید.

پس از ان وارد صفحه اضافه کردن کد سفارشی می‌شوید. پس از آن، گزینه «CSS Snippet» را از منوی کشویی «Code Type» در گوشه سمت راست صفحه انتخاب کنید.

در مرحله بعد، باید کد CSS سفارشی زیر را کپی کرده و در بخش “پیش‌نمایش کد” درج کنید:

p {

font-size:16px;

}

پس از انجام این کار، کافیست اندازه متن مورد نظر خود را در کنار خط “اندازه فونت” در کد CSS اضافه کنید:

پس از آن، به بخش « Insertion » بروید و حالت « Auto Insert » را انتخاب کنید. اکنون کد شما پس از فعال‌سازی به صورت خودکار در سایت شما اجرا می‌شود.

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

واحدهای اندازه‌گیری فونت و مقایسه کاربرد آن‌ها

در طراحی سایت وردپرس، وقتی می خواهیم اندازه نوشته ها را تغییر دهیم، باید با واحدهای اندازه گیری فونت آشنا باشیم. این واحدها تعیین می کنند که متن در مرورگر و در دستگاه های مختلف چگونه نمایش داده شود. چند واحد معروف برای تنظیم اندازه فونت وجود دارد که شامل  px ،em ،rem و vw هستند. هر کدام از این واحدها کاربرد و ویژگی خاصی دارند.

– واحد px

واحد px که به معنی پیکسل است، یکی از پرکاربردترین روش ها برای تعیین اندازه متن است. وقتی از px استفاده می کنیم، اندازه فونت ثابت است و در دستگاه های مختلف تغییر نمی کند. مثلا اگر اندازه فونت را 16px  بگذاریم، متن در هر صفحه دقیقا با همین اندازه نمایش داده می شود.

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

– واحد em

واحد em یک واحد نسبی است و اندازه آن نسبت به فونت بخش بالاتر یا همان والد حساب می شود. مثلا اگر اندازه فونت والد 16px باشد و اندازه فونت بخش داخلی را 1.5em بگذاریم، نتیجه برابر با 24px خواهد بود.

مزیت em این است که باعث انعطاف و هماهنگی بیشتر در طراحی می شود، چون اندازه فونت ها نسبت به هم تغییر می کنند. اما اگر بخش های زیادی داخل هم باشند، محاسبه اندازه ها سخت می شود و گاهی باعث بزرگ شدن یا کوچک شدن زیاد فونت ها می شود.

– واحد rem

واحد rem هم شبیه em است، اما فرقش در این است که به جای والد، نسبت به ریشه سایت یا همان تگ html حساب می شود. یعنی اندازه همه فونت ها بر اساس اندازه اصلی سایت تنظیم می شود. مثلا اگر اندازه پایه سایت 16px باشد، و در یک بخش اندازه فونت را 1.25rem بگذاریم، اندازه نهایی آن 20px خواهد بود.

مزیت rem این است که اندازه فونت ها در تمام بخش ها ثابت و قابل پیش بینی است. بیشتر قالب های جدید وردپرس از rem استفاده می کنند تا طراحی سایت تمیزتر و هماهنگ تر باشد.

– واحد vw

واحد vw یعنی درصدی از عرض صفحه نمایش. مثلا اگر اندازه فونت را 3vw بگذاریم، اندازه آن بر اساس 3 درصد از عرض صفحه مرورگر محاسبه می شود.

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

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

افزونه های امنیتی و سرعتی: افزونه وردفنس | افزونه آیتم سکوریتی پرو | افزونه  ssl | افزونه راکت

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

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

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

بیشتر قالب های وردپرس گزینه ای برای تنظیم فونت پیش فرض دارند. با رفتن به بخش نمایش > سفارشی سازی و سپس قسمت Typography یا فونت ها می توان فونت عنوان ها، نوشته ها و سایر بخش ها را تغییر داد. این روش ساده ترین و مطمئن ترین راه برای تغییر فونت در کل سایت است، چون تغییرات از طریق خود قالب انجام می شود و نیاز به کدنویسی ندارد.

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

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

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

تغییر فونت برای دستگاه های مختلف و طراحی واکنش گرا در وردپرس

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

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

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

روش دوم: استفاده از افزونه برای تغییر فونت در دستگاه های مختلف

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

• Responsive Font Size

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

• YellowPencil

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

اضافه کردن فونت سفارشی یا Google Fonts در وردپرس

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

ساده ترین و سریع ترین روش برای اضافه کردن فونت سفارشی، استفاده از افزونه های مخصوص فونت است. این افزونه ها به شما کمک می کنند بدون نیاز به کدنویسی، فونت دلخواه خود را بارگذاری و روی بخش های مختلف سایت اعمال کنید. در ادامه چند افزونه معروف در این زمینه معرفی شده است:

– Use Any Font

این افزونه یکی از پرطرفدارترین ابزارها برای افزودن فونت سفارشی در وردپرس است. کافی است فایل فونت خود را با فرمت هایی مانند TTF یا WOFF در افزونه آپلود کنید و سپس آن را به بخش های مختلف سایت مثل نوشته ها، تیترها یا منو اختصاص دهید. مزیت اصلی این افزونه این است که فونت به صورت مستقیم روی هاست شما ذخیره می شود و نیازی به استفاده از فونت های بیرونی ندارد.

– Easy Google Fonts

اگر قصد دارید از فونت های گوگل استفاده کنید، این افزونه بهترین گزینه است. پس از نصب آن، تمام فونت های Google Fonts در بخش سفارشی سازی قالب نمایش داده می شوند و می توانید برای هر بخش سایت فونت دلخواه را انتخاب کنید

– Fonts Plugin | Google Fonts Typography

این افزونه ترکیبی از فونت های سفارشی و فونت های گوگل را در اختیار شما می گذارد. با استفاده از آن می توانید برای تیترها، بدنه نوشته ها و منوها فونت جداگانه تعیین کنید. همچنین گزینه ای برای تنظیم وزن فونت (ضخامت حروف) و استایل های مختلف دارد.

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

سوالات متداول

جمع‌بندی: نحوه تغییر فونت در وردپرس

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

منبع: wpbeginner