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

آیا می خواهید فونت های شخص ثالث را بدون کاهش سرعت وب سایت خود به وب سایت خود اضافه کنید؟

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

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

چرا فونت ها را به صورت محلی در وردپرس میزبانی کنیم؟

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

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

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

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

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

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

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

OMGF یکی از بهترین افزونه های تایپوگرافی وردپرس است. این روشی برای مبتدیان برای بهبود بهره وری و انطباق با GDPR با میزبانی فونت های Google به صورت محلی ارائه می دهد.

در هنگام فعال سازی باید مراجعه کنید تنظیمات » بهینه سازی فونت های گوگل برای پیکربندی افزونه باید به تب “بهینه سازی فونت ها” نگاه کنید.

به بیانیه زیر عنوان “بهینه سازی فونت های گوگل” توجه کنید که شما باید به سادگی از تنظیمات پیش فرض استفاده کنید تا به طور خودکار فونت های گوگل خود را با کپی های میزبان محلی جایگزین کنید.

این به این معنی است که همانطور که صفحه تنظیمات را به پایین اسکرول می کنید، تنها کاری که باید انجام دهید این است که مطمئن شوید که “Font Display Option” تنظیمات پیش فرض “Swap (توصیه می شود)” را انتخاب کرده باشد.

اکنون تنها کاری که باید انجام دهید این است که روی دکمه “ذخیره و بهینه سازی” در پایین صفحه کلیک کنید.

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

تبریک می گویم! فونت های گوگل شما اکنون به صورت محلی میزبانی می شوند. وب سایت شما سریعتر بارگذاری می شود و خطر شکایت های اروپایی را کاهش داده اید.

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

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

شما باید فونت هایی را که می خواهید استفاده کنید در قالب وب دانلود کنید. مکان‌های زیادی برای یافتن فونت‌های وب رایگان عالی مانند فونت‌های Google، Typekit، FontSquirrel و موارد دیگر وجود دارد.

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

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

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

پس از آپلود فونت، باید فونت را با استفاده از CSS سفارشی در صفحه سبک تم خود بارگذاری کنید. می‌توانید کد را مستقیماً به فایل style.css تم خود اضافه کنید یا با استفاده از بخش CSS اضافی سفارشی‌کننده تم.

شما می توانید این کار را با استفاده از قانون @font-face CSS3 مانند زیر انجام دهید:

@font-face {
    font-family: Arvo;
    src: url(http://example.com/wp-content/themes/twentytwentyone/fonts/Arvo-Regular.ttf);
    font-weight: normal;
}

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

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

h1 {
font-family: Arvo, Arial, sans-serif;
}

همانطور که می بینید، هدر ما قبلاً از فونت Arvo میزبان محلی استفاده می کند.

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

اگر از این مقاله لذت بردید، لطفا در کانال یوتیوب ما برای آموزش های ویدئویی وردپرس مشترک شوید. شما همچنین می توانید ما را در توییتر و فیس بوک