آموزش اضافه کردن فونت به سایت ( نصب فونت در وردپرس )
در این مقاله قصد داریم به شما نحوه اضافه کردن فونت به سایت را آموزش دهیم، متوجه شدیم که بسیاری از کاربران، خصوصا کاربرانی که از سیستم وردپرس استفاده می کنند با مشکل تغییر فونت سایت خود و یا نصب فونت در وردپرس مواجه هستند به همین دلیل در این مقاله آمورشی قصد داریم به شما نشان دهیم چگونه یک فونت دلخواه را در سایت، یا سایت وردپرسی خود نصب کنید. اضافه کردن فونت به سایت می تواند تاثیر چشمگیری در زیبایی و ظاهر سایت داشته باشد.
- چه فونت هایی برای وب سایت قابل استفاده است؟
- محبوبترین کتابخانه های فونت رایگان
- آیا فونت ها در تمامی مرورگرها پشتیبانی می شوند؟
هزاران فونت مختلف برای زبان های مختلف موجود است که شما با نصب هرکدام از این فونت ها در سایت خود می توانید جلوه تازهای به سایت خود دهید. درواقع اضافه کردن فونت یا قلم جدید به سایت بسیار ساده بوده و تنها در دو مرحله انجام میگیرد. با توجه به اینکه بسیاری از شما از سیستم وردپرس استفاده می کنید در این مقاله نیز نحوه نصب فونت در وردپرس آموزش داده می شود که البته این آموزش در تمامی CMS ها کاربرد دارد.
چه فونت هایی برای وب سایت قابل استفاده است؟
↑از نظر فنی شما می توانید هر فونتی را در سایت خود نصب کنید و در این خصوص محدودیتی وجود ندارد، اما در هنگام نصب یک فونت یا قلم بهتر است که به حجم ( اندازه به کیلوبایت یا مگابایت ) فونت نیز دقت کنید، یک فونت سنگین میتواند موجب کاهش سرعت سایت شما شود، همانطور که در مقالات قبلی نیز به این مورد اشاره شد سرعت یکی از مهمترین فاکتورهای سئو و بهبود تجربه کاربری برای هر وب سایتی است.
محبوبترین کتابخانه های فونت رایگان
↑
گوگل دارای یک کتابخانه عظیم فونت با بیش از هزاران فونت آماده برای نصب در وب سایت شما است، در این کتابخانه شما به راحتی می توانید فونت دلخواه خود را پیدا و نصب کنید، البته متاسفانه در خصوص فونت های فارسی اینچنین نیست.
آیا فونت ها در تمامی مرورگرها پشتیبانی می شوند؟
↑در حالت کلی بله، مرورگرها از تمامی فونت ها پشتیبانی می کنند اما بهتر است که از یک فونت بهینه استفاده شود. هر فونت می تواند دارای چندین فرمت از جمله 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 فایل خودتون براکت
{}
رو چک کنید کد صحیح باید به این شکل باشهخیلی ممنونم
خواهش می کنم دوست عزیز