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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@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 به صورت محلی استفاده می کند.

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

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