معرفی و آموزش پیش بارگیری فونت در وردپرس - Font Preloading

مسیح دیندار
مدیریت
عضو شده: 2021-04-12 14:23:35
2021-06-10 05:46:00

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

یکی از موارد مهم در این دسته، فونت ها هستند. اگر فقط از یک فونت خاص و غیرسیستمی (فونت های سیستمی مثل Tahoma یا Arial و از این دسته فونت ها که در همه سیستم عامل ها وجود دارد) استفاده کنید، زمانی که کاربر تازه واردی به سایت شما بیاید که قبلا تجربه بازدید از سایتتان را نداشته، متن های سایتتان که با این فونت دلخواه شما طراحی شده اند، تا زمانی که فایل های فونت ها به طور کامل توسط مرورگر کاربر دانلود نشود، متن ها مخفی خواهند بود. و خب اگر سرعت کانکشن سرورشما ضعیف باشد یا در جریان دانلود مشکلی رخ دهد، متن ها همچنان مخفی خواهند بود که جلوه زیبایی ندارد.

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

 

تعریف یک فونت سیستمی و محبوب بعنوان فونت دوم طراحی

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

در این روش باید در دستورات استایل فایل CSS سایتتان، هر گونه font-family که دارید، حداقل دو فونت تعریف کنید. برای مثال تصور کنید ما قصد داریم در سایتمان از فونت IranYekan استفاده کنیم که این فونت یک فونت ایرانی و غیررایگان است و طبیعتا بسیاری از کاربران این فونت را در سیستم عامل خود ندارند. در کنار این می توانیم یا از فونت Tahoma و یا sans-serif برای فونت دوم استفاده کنیم که البته sans-serif نسبت به فونت تاهوما کارایی بیشتری دارد. بنابراین دستورات فونت استایل مربوط به فونت را تماما به این صورت وارد کنید:

.example-class {
     font-family: IranYekan, sans-serif;
}

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

 

اجبار مرورگر کاربر به استفاده از فونت سیستمی تا زمان لود شدن فونت اصلی

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

html, body, h1, h2, 
h3, h4, h5, h6, a, 
p, ol, ul, li, input, div {font-display: auto;}

و بجای auto در کد بالا می توانید از مقادیر دیگری استفاده کنید که این مقادیر به توضیحات زیر هستند:

  • مقدار auto : این مقدار تعیین می کند که تا زمانی که مرورگر، فونت اصلی طراحی ما را دانلود و اعمال نکرده، از فونت پیش فرض و پیشنهادی داخل خودش برای نمایش متن ها استفاده کند که متنی مخفی نماند.
  • مقدار block : با این مقدار، مرورگر کاربر متن ها را مخفی کرده اما فضا و محدوده متن ها را بر اساس پیکسل حفظ می کند تا در زمان لود شدن فونت های ما، طراحی به هم نریزد.
  • مقدار swap : این مقدار مرورگر را مجبور می کند تا سریعا متن ها را ابتدا با فونت پیش فرض نمایش داده و بعد بررسی کند که در صورتی که فونت اصلی ما آماده است، جایگزین فونت پیش فرض خودش کند. این عملیات هر بار که کاربر بازدید می کند اتفاق خواهد افتاد و برای دفعات بعدی شاید برای کاربر آزاردهنده باشد که مدام فونت ها تغییر کنند.
  • مقدار fallback و optional : این دو مقدار عملکردی مشابه دارند. با این مقدار، مرورگر متن هایی که هنوز فونت اصلی آن آماده نشده را به از طریق همرنگ کردن با پس زمینه آن محدوده مخفی می کند. یعنی متن ها در دسترس هستند و با انتخاب کردن آن از طریق موس قابل مشاهده هستند اما تا زمانی که فونت اصلی آماده نشده باشد در این حالت خواهند بود و با دانلود شدن کامل فونت اصلی، رنگ متن هم تغییر خواهد کرد. در این حالت برای متن ها از یک فونت پیش فرض و دم دستی مرورگر استفاده خواهد شد.

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

 

تعریف فایل فونت ها در هیدر سایت

اگر بخواهید فونت های اصلی طراحی خود را هنگام ورود کاربر به سایتتان، برای اون دانلود کنید و مجبورش کنید تا زمانی که لودینگ سایتتان کامل می شود، فونت ها هم دانلود و اعمال شوند، باید فایل فونت ها را به صورت زیر، در فایل header.php قالبتان و یا به طور عمومی در فایلی از قالب یا اسکریپت سایتتان (غیر از وردپرسی ها)، در جایی که تگ </head> وجود دارد قرار دهید و البته دقت کنید این فونت ها را قبل از کدهای مربوط به فراخوانی فایل های استایل قرار دهید تا ابتدا فونت ها شروع به دانلود شوند.

<link rel="preload" href="fonts/IranYekan.ttf" as="font" type="font/ttf" crossorigin="anonymous">
<link rel="preload" href="fonts/IranYekan.woff2" as="font" type="font/woff2" crossorigin="anonymous">

دو فرمت ttf و woff2 برای تعریف کفایت می کند و مابقی فرمت های فونت ها را اجازه دهید همان از طریق فایل های CSS دانلود شوند. این دو فرمت برای متن های سایت کفایت می کند. در کد بالا ما آدرس فونت را به اختصار نوشتیم که شما باید بر اساس پوشه بندی سایتتان آن را اصلاح کنید، اگر در نمایش یا دانلود فونت ها بازهم مشکلی بود، احتمالا آدرس خلاصه ای که وارد کردید اشتباه است و باعث خطای 404 می شود که در چنین حالتی باید آدرس ها را به صورتی لینک مستقیم وارد کنید و با وارد کردن لینک مستقیم فونت ها در مرورگر، مطمئن شوید فونت ها به خوبی دانلود می شوند و آدرس درستی دارند و در نهایت کدبالا را به این صورت اصلاح کنید:

<link rel="preload" href="https://talkina.ir/fonts/IranYekan.ttf" as="font" type="font/ttf" crossorigin="anonymous">
<link rel="preload" href="https://talkina.ir/fonts/IranYekan.woff2" as="font" type="font/woff2" crossorigin="anonymous">

وجود دستور preload و crossorigin در این کد ضروری است پس حذف نکنید!

توجه:

این کد فقط برای یک حالت فونت بود. اگر طراحی سایت شما از انواع فونت دیگه ای مثلا thin و regular و bold و ExtraBold هم استفاده می کند، و در طراحی سایتتان برای عناوین و بخش هایی استفاده کرده باشید، باید همان نوع فونت را هم مانند کد بالا به قالبتان اضافه کنید.

 

نکته دوم:

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

 

راه سوم استفاده از افزونه وردپرسی

افزونه های کش و یا بهینه سازی سایت، این امکان رو به شما جهت پیش بارگیری فونت ها ارائه می کنند که چند نمونه از آنها را برایتان معرفی می کنیم:

  1. https://wordpress.org/plugins/wp-asset-clean-up
  2. https://wordpress.org/plugins/wp-fastest-cache
  3. https://wordpress.org/plugins/autoptimize

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