اضافه کردن فونت به وردپرس

آیا می خواهید فونت های سفارشی را در وردپرس اضافه کنید؟

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

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

در این مقاله نحوه افزودن فونت های سفارشی در وردپرس را با استفاده از فونت های گوگل، TypeKit و روش CSS3 @Font-Face به شما نشان خواهیم داد.

توجه: بارگذاری بیش از حد فونت ها می تواند سرعت وب سایت شما را کاهش دهد.

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

ما همچنین به شما نشان خواهیم داد که چگونه آنها را بدون کاهش سرعت وب سایت خود به درستی بارگذاری کنید.

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

اضافه کردن فونت به وردپرس

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

فونت ها قبلاً گران بودند، اما دیگر نه. مکان های زیادی برای یافتن فونت های وب رایگان عالی مانند فونت های گوگل، Typekit، FontSquirrel و fonts.com وجود دارد.

اگر نمی‌دانید چگونه فونت‌ها را با هم ترکیب کنید، فونت جفت را امتحان کنید. این به طراحان کمک می کند فونت های زیبای گوگل را با هم جفت کنند.

همانطور که فونت های خود را انتخاب می کنید، به یاد داشته باشید که استفاده از فونت های سفارشی زیاد باعث کندی وب سایت شما می شود.

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

با این گفته، بیایید نگاهی به نحوه اضافه کردن فونت های سفارشی در وردپرس بیندازیم. این چیزی است که در این آموزش به آن خواهیم پرداخت:

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

⦁ اضافه کردن فونت های سفارشی در وردپرس با استفاده از Typekit

⦁ افزودن فونت های سفارشی در وردپرس با استفاده از CSS3 @font-face

اضافه کردن فونت به وردپرس

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

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

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

اضافه کردن فونت به وردپرس

روش 1: اضافه کردن فونت های گوگل با استفاده از افزونه وردپرس

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

اولین کاری که باید انجام دهید این است که افزونه Google Fonts Typography را نصب و فعال کنید.

برای جزئیات بیشتر، راهنمای گام به گام ما در مورد نحوه نصب افزونه وردپرس را ببینید.

نکته:

اگر می‌خواهید نسخه پریمیوم افزونه را دریافت کنید، مطمئن شوید که از کوپن Google Fonts for WordPress برای 30٪ تخفیف استفاده کنید.

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

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

در مرحله بعد، باید بر روی Fonts Plugin » Customize Fonts در نوار کناری admin کلیک کنید.

این به طور خودکار شما را به مشتری قالب وردپرس می برد و به طور خودکار بخش جدید “افزونه فونت” را باز می کند.

در اینجا می‌توانید فونت‌های پیش‌فرض وب‌سایت خود را در بخش «تنظیمات پایه» و فونت‌های بخش‌های خاص وب‌سایت خود را در «تنظیمات پیشرفته» انتخاب کنید.

بیایید با کلیک بر روی “تنظیمات پایه” شروع کنیم. در اینجا می توانید فونت ها، سرفصل ها و دکمه ها و فیلدهای خود را انتخاب کنید.

منوهای کشویی “Font Family” به شما امکان می دهد فونت جدیدی را انتخاب کنید.

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

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

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

شما باید روی دکمه پیکان برگشتی در سمت چپ بالای صفحه کلیک کنید و سپس روی بخش “تنظیمات پیشرفته” کلیک کنید.

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

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

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

اضافه کردن فونت به وردپرس

انتخاب فونت های سفارشی برای منطقه محتوا

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

به سادگی روی دکمه برگشت کلیک کنید و تنظیمات “Sidebar” را وارد کنید.

در آنجا منوهای کشویی برای انتخاب فونت برای عنوان و محتوای نوار کناری خود خواهید یافت.

هنگامی که از انتخاب فونت سفارشی خود راضی هستید، فراموش نکنید که روی دکمه “انتشار” کلیک کنید تا تغییرات خود را ذخیره کنید.

اضافه کردن فونت به وردپرس

روش 2: اضافه کردن فونت گوگل به صورت دستی در وردپرس

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

اگر قبلاً این کار را انجام نداده اید، راهنمای ما در مورد نحوه کپی و جایگذاری کد در وردپرس را ببینید.

ابتدا از کتابخانه Google Fonts دیدن کنید و فونتی را که می خواهید استفاده کنید انتخاب کنید.

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

در صفحه فونت، سبک های موجود برای آن فونت را خواهید دید.

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

اضافه کردن فونت به وردپرس

لینک جاسازی فونت را دریافت کنید

در مرحله بعد، برای کپی کردن کد جاسازی، باید به تب “Embed” در نوار کناری بروید.

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

ابتدا می توانید فایل header.php تم خود را ویرایش کنید و کد را قبل از تگ قرار دهید.

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

به سادگی افزونه WPCode را نصب و فعال کنید.

برای جزئیات بیشتر، راهنمای گام به گام ما در مورد نحوه نصب افزونه وردپرس را ببینید.

پس از فعال‌سازی، به صفحه Code Snippets » Header & Footer بروید و کد جاسازی شده را در کادر «Header» قرار دهید.

فراموش نکنید که برای ذخیره تغییرات روی دکمه “ذخیره تغییرات” کلیک کنید.

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

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

.h1 site-title {
font-family: ‘Open Sans’, Arial, sans-serif;
}

اضافه کردن فونت به وردپرس

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

Typekit توسط Adobe Fonts یکی دیگر از منابع رایگان و ممتاز برای فونت های عالی است که می توانید در پروژه های طراحی خود از آن استفاده کنید.

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

به سادگی برای یک حساب Adobe Fonts ثبت نام کنید و به بخش “مرور فونت ها” مراجعه کنید.

از اینجا باید بر روی دکمه کلیک کنید تا یک فونت انتخاب کنید و یک پروژه ایجاد کنید.

در مرحله بعد، کد جاسازی شده را با شناسه پروژه خود خواهید دید.

همچنین به شما نشان می دهد که چگونه از فونت در CSS تم خود استفاده کنید.

شما باید این کد را کپی کرده و در قسمت وب سایت خود قرار دهید.

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

ابتدا می توانید فایل header.php تم خود را ویرایش کنید و کد را قبل از تگ قرار دهید.

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

اضافه کردن فونت به وردپرس

به سادگی افزونه WPCode را نصب و فعال کنید.

پس از فعال‌سازی، به صفحه Code Snippets » Header & Footer بروید و کد جاسازی شده را در کادر «Header» قرار دهید.

سپس، روی دکمه «ذخیره تغییرات» کلیک کنید.

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

h1 .site-title {
font-family: gilbert, sans-serif;
}

اضافه کردن فونت به وردپرس

افزودن فونت های سفارشی در وردپرس با استفاده از CSS3 @font-face

مستقیم ترین راه برای افزودن فونت های سفارشی در وردپرس، افزودن فونت ها با استفاده از روش CSS3 @font-face است.

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

ابتدا باید فونت مورد نظر خود را در قالب وب دانلود کنید.

اگر فرمت وب فونت خود را ندارید، می توانید آن را با استفاده از FontSquirrel Webfont generator تبدیل کنید.

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

بهترین مکان برای آپلود فونت‌ها، داخل یک پوشه جدید “fonts” در پوشه تم است.

برای آپلود فونت می توانید از FTP یا File Manager سی پنل خود استفاده کنید.

هنگامی که فونت را آپلود کردید، باید با استفاده از قانون CSS3 @font-face، فونت را در شیوه نامه تم خود بارگذاری کنید:

@font-face {
font-family: Arvo;
src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);
فونت-وزن: عادی;
}

فراموش نکنید که نوع فونت و URL را با قلم خود جایگزین کنید.

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

.h1 site-title {
font-family: “Arvo”, Arial, sans-serif;
}

بارگیری مستقیم فونت ها با استفاده از CSS3 @font-face همیشه بهترین راه حل نیست.

برای مثال، اگر از فونت Google Fonts یا Typekit استفاده می‌کنید، بهتر است فونت را مستقیماً از سرور آن‌ها برای عملکرد بهینه ارائه کنید.

امیدواریم این آموزش به شما کمک کرده باشد که چگونه فونت های سفارشی را در وردپرس اضافه کنید.

همچنین شما میتوانید مطالبی از قبیل وبمستر گوگل&95Y8H1 ، آموزش افزایش سرعت وردپرس ، آموزش کاملWHMCS و… را مطالعه نمایید.

جهت آموزش های بیشتر اینستاگرام آژانس مدلین را فالو داشته باشید.