آموزش اضافه کردن فونت به سایت ( نصب فونت در وردپرس )

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

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

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

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

• کتابخانه Google Fonts

در حالت کلی بله، مرورگرها از تمامی فونت ها پشتیبانی می کنند اما بهتر است که از یک فونت بهینه استفاده شود. هر فونت می تواند دارای چندین فرمت از جمله TTF/OTF (در تمامی مرورگرها پشتیبانی می شوند) و دیگر فرمت ها از جمله WOFF, WOFF2, SVG و EOT باشد. برای اطلاعات بیشتر در خصوص تفاوت فرمت های مختلف یک فونت می توانید مقاله زیر را مطالعه نمایید:

• تفاوت بین فرمت های مختلف فونت در سایت

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

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

• Child Theme یا قالب فرزند چیست و چه کاربردی دارد؟ ( وردپرس )
• آموزش ساخت Child Theme در وردپرس (قالب فرزند)

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

• دریافت فونت وزیر از صفحه رسمی فونت در Github

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

public_html/wp-content/themes/yourtheme/

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

public_html/wp-content/themes/yourtheme/fonts/Vazir-Regular.eot

پس از آپلود فونت ها در سایت نوبت به فراخوانی فونت ها در فایل 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;
}

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

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

• افزونه وردپرس چیست + کاربرد افزونه ها در وردپرس
• چه تعداد افزونه در وردپرس نصب کنیم؟ تعداد استاندارد افزونه ها در وردپرس
• آموزش خصوصی وردپرس و طراحی سایت

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