नेक्स्ट में Google फ़ॉन्ट्स को कुशलतापूर्वक लोड करने का सबसे अच्छा तरीका

कई घटकों के साथ काम करते समय जिन्हें एक ही Google फ़ॉन्ट से अलग फ़ॉन्ट वजन की आवश्यकता होती है, यह है Layout.vue में एकाधिक लिंक आयात करने की निरर्थक प्रथा से बचना महत्वपूर्ण है।

इस समस्या का समाधान करने और NuxtJS परियोजनाओं में फ़ॉन्ट लोडिंग को अनुकूलित करने के लिए, @nuxtjs/google-fonts मॉड्यूल का उपयोग करने की अनुशंसा की जाती है। यह मॉड्यूल Google फ़ॉन्ट आयात को प्रबंधित करने के लिए एक कुशल और केंद्रीकृत दृष्टिकोण प्रदान करता है।

@nuxtjs/google-fonts मॉड्यूल का उपयोग करना

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');
}

अतिरिक्त नोट्स:

• यदि विशिष्ट फ़ॉन्ट भार डाउनलोड नहीं किया जा रहा है, तो मॉड्यूल कॉन्फ़िगरेशन में ओवरराइटिंग: सत्य सेट करें या पैकेज को v3.0.0 पर अपडेट करें -1.
• प्रदर्शन अनुकूलन के लिए सीडीएन का उपयोग करने की तुलना में स्वयं-होस्टिंग Google फ़ॉन्ट्स आमतौर पर बेहतर होता है। स्वयं-होस्टिंग के लिए google-webfonts-helper का उपयोग करने पर विचार करें।