أفضل طريقة لتحميل خطوط Google بكفاءة في Nuxt

عند العمل مع مكونات متعددة تتطلب أوزان خطوط مختلفة من نفس خط Google، يكون الأمر كذلك من المهم تجنب الممارسة المتكررة المتمثلة في استيراد روابط متعددة في Layout.vue.

لمعالجة هذه المشكلة وتحسين تحميل الخطوط في مشاريع NuxtJS، يوصى باستخدام وحدة @nuxtjs/google-fonts. توفر هذه الوحدة أسلوبًا فعالاً ومركزيًا لإدارة عمليات استيراد خطوط Google.

استخدام @nuxtjs/google-fonts Module

1. تثبيت الوحدة:

npm install @nuxtjs/google-fonts

2. أضف الوحدة إلى ملف nuxt.config.js الخاص بك:

export default {
  buildModules: [
    [
      '@nuxtjs/google-fonts',
      {
        families: {
          'Saira Semi Condensed': {
            wght: [600, 800],
          },
        },
        display: 'swap', // Load fonts as soon as possible
        prefetch: false, // Don't prefetch fonts
        preconnect: false, // Don't preconnect to font server
        preload: false, // Don't preload fonts
        download: true, // Download fonts for offline use
        base64: false, // Don't base64 encode fonts
      },
    ],
  ],
}

3. قم باستيراد الخطوط في نمط المكون الخاص بك باستخدام قاعدة @font-face:

@font-face {
  font-family: 'Saira Semi Condensed', sans-serif;
  font-weight: 600;
  font-style: normal;
  src: local('Saira Semi Condensed'), local('SairaSemiCondensed-Wght600'),
  url("https://fonts.gstatic.com/s/sairasemicondensed/v15/E6qS90ZBdhyxr0K917oteYGc.woff2") format('woff2');
}

ملاحظات إضافية:

• إذا لم يتم تنزيل أوزان خطوط معينة، قم بتعيين الكتابة الفوقية: صحيح في تكوين الوحدة أو قم بتحديث الحزمة إلى الإصدار 3.0.0 -1.
• يُفضل بشكل عام استخدام خطوط Google ذاتية الاستضافة بدلاً من استخدام CDN لتحسين الأداء. فكر في استخدام google-webfonts-helper للاستضافة الذاتية.