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

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

amp وردپرس به عنوان یک پروژه تاثیرگذار از سوی گوگل برای سرعت بخشیدن به دسترسی کاربران اینترنتی به صفحات وب انجام شده که این روزها تعداد سایت‌های استفاده کننده از amp وردپرس روز به روز در حال بیشتر شدن است.

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

  1. با استفاده از تگ <link>
  2.  با استفاده از @font-face ( با این روش هر فونت دلخواهی را می توانید اضافه کنید.)

روش اول :

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

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">

این دستور به شما اجازه می دهد تا فونت ها را فقط از سایت های زیر به سایت خود اضافه کنید:

  • Typography.com: https://cloud.typography.com
  • Fonts.com: https://fast.fonts.net
  • Google Fonts: https://fonts.googleapis.com
  • Typekit: https://use.typekit.net
  • Font Awesome: https://maxcdn.bootstrapcdn.com

روش دوم:

در این روش شما با استفاده از@font-face در برگه استایل حالت AMP سایت خود ، فونت مورد نظر را به سایت اضافه می کند.

  • در ابتدا فونت مورد نظر خود را در سایت آپلود کنید.
  • کد زیر را قبل از تگ body سایت ، در حالت AMP قرار دهید.
<style amp-custom>
  @font-face {
    font-family: "نام دلخواه برای فونت";
    src: url("آدرس فایل فونت");
  }

  body {
    font-family: "نامی که برای فونت انتخاب کرده اید", serif;
  }
</style>

دقت داشته باشید که این کد را در تگ head سایت خود قرار ندهید ، زیرا در هنگام اعتبار سنجی از سایت گوگل دچار مشکل خواهید شد.

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

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

.p{
 font-family: نامی که برای فونت انتخاب کرده اید;
 }

حال با استفاده از این آدرس https://search.google.com/test/amp ، درست بودن ساختار کد های خود را چک کنید.

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