آموزش اضافه کردن فونت به وردپرس ( بدون افزونه – قدم به قدم )
در این مقاله قصد داریم به شما نحوه اضافه کردن فونت به وردپرس را آموزش دهیم، متوجه شدیم که بسیاری از کاربران، خصوصا کاربرانی که از سیستم وردپرس استفاده می کنند با مشکل تغییر فونت وردپرس خود و یا نصب فونت در وردپرس مواجه هستند به همین دلیل در این مقاله آمورشی قصد داریم به شما نشان دهیم چگونه یک فونت دلخواه را در سایت، یا سایت وردپرسی خود نصب کنید. اضافه کردن فونت به سایت می تواند تاثیر چشمگیری در زیبایی و ظاهر سایت داشته باشد.
- چه فونت هایی برای وب سایت قابل استفاده است؟
- محبوبترین کتابخانه های فونت رایگان
- آیا فونت ها در تمامی مرورگرها پشتیبانی می شوند؟
هزاران فونت مختلف برای زبان های مختلف موجود است که شما با نصب هرکدام از این فونت ها در سایت خود می توانید جلوه تازهای به سایت خود دهید. درواقع اضافه کردن فونت یا قلم جدید به سایت بسیار ساده بوده و تنها در دو مرحله انجام میگیرد. با توجه به اینکه بسیاری از شما از سیستم وردپرس استفاده می کنید در این مقاله نیز نحوه نصب فونت در وردپرس آموزش داده می شود که البته این آموزش در تمامی CMS ها کاربرد دارد.
چه فونت هایی برای وب سایت قابل استفاده است؟
↑از نظر فنی شما می توانید هر فونتی را در سایت خود نصب کنید و در این خصوص محدودیتی وجود ندارد، اما در هنگام نصب یک فونت یا قلم بهتر است که به حجم ( اندازه به کیلوبایت یا مگابایت ) فونت نیز دقت کنید، یک فونت سنگین میتواند موجب کاهش سرعت سایت شما شود همانطور که در مقالات قبلی نیز به این مورد اشاره شد سرعت یکی از مهمترین فاکتورهای سئو و بهبود تجربه کاربری برای هر وب سایتی است، بهترین فرمت برای اضافه کردن فونت به وردپرس WOFF, WOFF2 میباشد.
محبوبترین کتابخانه های فونت رایگان
↑گوگل دارای یک کتابخانه عظیم با بیش از هزاران فونت آماده برای اضافه کردن فونت به سایت وردپرسی شما است، در این کتابخانه شما به راحتی می توانید فونت دلخواه خود را پیدا و نصب کنید، البته متاسفانه در خصوص فونت های فارسی اینچنین نیست. در حال حاضر تنها فونت فارسی موجود در کتابخانه گوگل فونت محبوب Vazirmatn اثر زنده یاد صابر راستیکردار میباشد.
آیا فونت ها در تمامی مرورگرها پشتیبانی می شوند؟
↑در حالت کلی بله، مرورگرها از تمامی فونت ها پشتیبانی می کنند اما بهتر است که از یک فونت بهینه استفاده شود. هر فونت می تواند دارای چندین فرمت از جمله TTF/OTF (در تمامی مرورگرها پشتیبانی می شوند) و دیگر فرمت ها از جمله WOFF, WOFF2, SVG و EOT باشد. برای اطلاعات بیشتر در خصوص تفاوت فرمت های مختلف یک فونت می توانید مقاله زیر را مطالعه نمایید:
همانطور که در تصویر بالا مشخص است، حتما در وب سایت خود از فرمت های WOFF, OTF استفاده کنید، چرا که در تمامی مرورگرها پشتیبانی می شوند.
اضافه کردن فونت به وردپرس
↑ابتدا فونت دریافتی را در سایت خود آپلود کنید، اگر از سیستم مدیریت محتوای وردپرس استفاده می کنید، برای اضافه کردن فونت به سایت وردپرسی پیشنهاد می کنیم ابتدا یک قالب فرزند نصب کنید و تغییرات مورد نظر را در قالب فرزند سایت خود اعمال کنید تا با انجام بروزرسانی قالب تغییرات اعمالی از بین نروند.
- Child Theme یا قالب فرزند چیست و چه کاربردی دارد؟ ( وردپرس )
- آموزش ساخت Child Theme در وردپرس (قالب فرزند)
آپلود فونت در قالب سایت وردپرس
↑در این آموزش قصد داریم، به احترام زندهیاد صابر راستیکردار از فونت محبوب و رایگان وزیرمتن استفاده کنیم، ابتدا برای دریافت فونت روی یکی از لینکهای زیر کلیک کنید:
پس از ایجاد قالب فرزند یک پوشه به عنوان fonts در قالب ایجاد کنید و فونت های خود را در این پوشه آپلود کنید، اگر نمیخواهید از قالب فرزند استفاده کنید فونت های خود را در مسیر زیر آپلود کنید:
آموزش خصوصی طراحی سایت و وردپرس به صورت آنلاین
جهت مشاوره و کسب اطلاعات بیشتر از طریق واتساپ با شماره ۰۹۹۹۹۹-۱۵۸-۱۱ در تماس باشید.
پروژه محور - ارتباط مستقیم با مدرس
public_html/wp-content/themes/yourtheme/
پس از اضافه کردن فونت وزیر به قالب، مسیر فونت به شکل زیر خواهد بود:
public_html/wp-content/themes/yourtheme/fonts/Vazir-Regular.eot
فراخوانی فونت ها در فایل CSS
↑پس از آپلود فونت ها در سایت نوبت به فراخوانی فونت ها در فایل Style قالب می رسد، فایل style.css
را باز کنید و کدهای زیر را به فایل اضافه کنید:
@font-face {
font-family: Vazir;
src: url('fonts/Vazir-Regular.eot');
src: url('fonts/Vazir-Regular.eot?#iefix') format('embedded-opentype'),
url('fonts/Vazir-Regular.woff2') format('woff2'),
url('fonts/Vazir-Regular.woff') format('woff'),
url('fonts/Vazir-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: Vazir;
src: url('fonts/Vazir-Bold.eot');
src: url('fonts/Vazir-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/Vazir-Bold.woff2') format('woff2'),
url('fonts/Vazir-Bold.woff') format('woff'),
url('fonts/Vazir-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: Vazir;
src: url('fonts/Vazir-Black.eot');
src: url('fonts/Vazir-Black.eot?#iefix') format('embedded-opentype'),
url('fonts/Vazir-Black.woff2') format('woff2'),
url('fonts/Vazir-Black.woff') format('woff'),
url('fonts/Vazir-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: Vazir;
src: url('fonts/Vazir-Medium.eot');
src: url('fonts/Vazir-Medium.eot?#iefix') format('embedded-opentype'),
url('fonts/Vazir-Medium.woff2') format('woff2'),
url('fonts/Vazir-Medium.woff') format('woff'),
url('fonts/Vazir-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: Vazir;
src: url('fonts/Vazir-Light.eot');
src: url('fonts/Vazir-Light.eot?#iefix') format('embedded-opentype'),
url('fonts/Vazir-Light.woff2') format('woff2'),
url('fonts/Vazir-Light.woff') format('woff'),
url('fonts/Vazir-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: Vazir;
src: url('fonts/Vazir-Thin.eot');
src: url('fonts/Vazir-Thin.eot?#iefix') format('embedded-opentype'),
url('fonts/Vazir-Thin.woff2') format('woff2'),
url('fonts/Vazir-Thin.woff') format('woff'),
url('fonts/Vazir-Thin.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}
پس از اضافه کردن کدهای بالا فایل را ذخیره کنید. حال مراحل اضافه کردن فونت به سایت به پایان می رسد و فونت آماده استفاده در سایت هستند.
تغییر فونت سایت (استفاده از فونت جدید در سایت)
↑پس از اضافه کردن فونت به وردپرس برای اعمال فونت در بخش های مختلف قالب نیز می توانید کد زیر را به فایل style.css
اضافه کنید:
html,body,p,a,div,span,
strong,b,h1,h2,h3,h4,h5,h6{
font-family: Vazir, sans-serif !important;
}
کد نمونه فونت تمامی بخش های یک سایت را به وزیر تغییر می دهید، یعنی شما هرگاه فونتی را به سایت خود اضافه کردید و قصد تغییر فونت سایت برای تمامی بخش های وب سایت را داشتید از کد بالا استفاده می کنید، اما در حالتی که شما بخواهید برای یک تگ یا یک کلاس و یا یک ایدی خاص از فونت جدید استفاده کنید به شکل زیر کد خود را اضافه می کنید:
.some-class{
font-family: Vazir, sans-serif !important;
}
#some-id{
font-family: Vazir, sans-serif !important;
}
h2{
font-family: Vazir, sans-serif !important;
}
ممکن است شما فقط برای عناوین خود بخواهید از یک فونت استفاده کنید، با انجام این مراحل، تغییر فونت سایت شما و یا اضافه کردن فونت جدید به وردپرس به پایان می رسد و فونت اضافه شده در سایت نمایش داده میشود.
جمع بندی
↑مراحل نصب فونت در وردپرس و یا اضافه کردن فونت به وردپرس به پایان رسید، و با مشاهده سایت می بینید که فونت وزیر در سایت شما اعمال شده است، برای اضافه کردن فونت به سایت به شما پیشنهاد می کنیم که از همین روش استفاده کرده و از افزونه برای نصب فونت جدید در وردپرس استفاده نکنید. مقالات و مطالب پیشنهادی زیر ممکن است برای شما مفید باشند:
- افزونه وردپرس چیست + کاربرد افزونه ها در وردپرس
- چه تعداد افزونه در وردپرس نصب کنیم؟ تعداد استاندارد افزونه ها در وردپرس
- آموزش خصوصی وردپرس و طراحی سایت
در صورتی که سوالی در خصوص نحوه اعمال فونت ها در سایت دارید و یا فکر می کنید لازم است نکته ای به این مقاله اضافه شود می توانید در بخش نظرات همین مقاله آن را مطرح کنید.
خدمات طراحی سایت
طراحی سایت مطابق با استانداردهای روز برنامهنویسی، به همراه آموزش استفاده و ۶ ماه پشتیبانی رایگان
سلام، وقت بخیر. ممنون از آموزش کاملتون.
من تو خطوط مربوط به وزن فونت، با خطای (expected rbrace at line x col 16) مواجه میشم.
امکانش هست توضیح بدین علت چیه و باید چیکار کرد؟
سلام
خواهش می کنم،
خط 16 فایل خودتون براکت
{}
رو چک کنید کد صحیح باید به این شکل باشهخیلی ممنونم
خواهش می کنم دوست عزیز