Home > Article > Web Front-end > How to Efficiently Load Google Fonts with Multiple Weights in a Nuxt Project?
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!