How to Efficiently Load Google Fonts with Multiple Weights in a Nuxt Project?

Efficient Loading of Google Fonts in Nuxt

You're encountering issues applying different font weights to your Google fonts in a Nuxt project. The problem arises from importing multiple font links for the same font with varying weights, which introduces redundancy.

Recommendation:

The optimal solution is to avoid using a CDN for font loading. Self-hosting or proxying Google fonts through the page origin is a more efficient approach. To facilitate this, consider utilizing the @nuxtjs/google-fonts module.

Module Configuration:

In your nuxt.config.js file, add the following code:

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

This configuration specifies that both font weights (600 and 800) should be loaded for the 'Saira Semi Condensed' font family.

CSS Configuration:

In your Layout.vue, import the font family once:

<code class="css">@import url('https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed');</code>

Ensure you also add CSS rules to apply the specific font weights in the respective components:

ComponentA.vue:

<code class="css">footer {
  font-weight: 600;
}</code>

ComponentB.vue:

<code class="css">footer {
  font-weight: 800;
}</code>

Note:

If specific font weights fail to download, update the @nuxtjs/google-fonts package to v3.0.0-1 or set overwriting: true in the module configuration.

The above is the detailed content of How to Efficiently Load Google Fonts with Multiple Weights in a Nuxt Project?. For more information, please follow other related articles on the PHP Chinese website!