How to load Google Fonts with different weights efficiently in NuxtJS?

How to efficiently load Google fonts in Nuxt

Problem Statement

You are encountering difficulties in loading Google fonts with different font weights in a NuxtJS application. You have imported multiple links for the same font with varying weights, but only the base font is applying, leading to a lack of desired font weight customization.

Solution

The recommended approach for loading Google fonts in Nuxt is to avoid using a CDN and instead self-host the fonts or proxy them through your page origin. To accomplish this, consider utilizing the @nuxtjs/google-fonts module, which provides a hassle-free solution for self-hosting Google Fonts.

Nuxt Module Configuration (nuxt.config.js)

<code class="javascript">export default {
  buildModules: [
    [
      '@nuxtjs/google-fonts',
      {
        families: {
          'Saira Semi Condensed': {
            wght: [600, 800],
          },
        },
        subsets: ['latin'],
        display: 'swap',
        download: true,
      },
    ],
  ],
}</code>

This configuration will download the 600 and 800 font weights of the 'Saira Semi Condensed' font family and make them available for use in the application.

CSS Usage

Once the fonts are downloaded, you can reference them in your CSS using the @font-face rule.

<code class="css">@font-face {
  font-family: 'Saira Semi Condensed';
  src: url('/fonts/SairaSemiCondensed-Regular.woff2') format('woff2'),
       url('/fonts/SairaSemiCondensed-Regular.woff') format('woff'),
       url('/fonts/SairaSemiCondensed-Regular.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Saira Semi Condensed';
  src: url('/fonts/SairaSemiCondensed-Bold.woff2') format('woff2'),
       url('/fonts/SairaSemiCondensed-Bold.woff') format('woff'),
       url('/fonts/SairaSemiCondensed-Bold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}</code>

Replace /fonts with the directory where you downloaded the font files.

Usage in Components

In your Vue components, you can set the font-family and font-weight properties to apply the desired font:

<code class="html"><template>
  <h1 style="font-family: 'Saira Semi Condensed', sans-serif; font-weight: 600;">I am Component A</h1>
</template></code>

<code class="html"><template>
  <h1 style="font-family: 'Saira Semi Condensed', sans-serif; font-weight: 800;">I am Component B</h1>
</template></code>

By following these steps, you can efficiently load and customize Google fonts with different font weights in your NuxtJS application.

The above is the detailed content of How to load Google Fonts with different weights efficiently in NuxtJS?. For more information, please follow other related articles on the PHP Chinese website!