Nuxt•4d ago

@nuxt/fonts layout shift

@kapa.ai i'm seeing a layout shift when force- reloading a project that uses @nuxt/fonts and the font "inter" with ctrl+f5 on a production package. Shouldn't @nuxt/fonts prevent this on common fonts? what could be reasons for this?

3 Replies

kapa.ai•4d ago

Hi @xmatthias. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You're experiencing a layout shift when force-reloading your Nuxt project with @nuxt/fonts and the Inter font. This is a common issue related to font loading and rendering. Possible reasons for the layout shift 1. Font optimization issues: While @nuxt/fonts is designed to provide plug-and-play font optimization, there might be issues with how the font is being loaded or applied in your specific setup. 2. Missing font metrics: The layout shift could be happening because the browser initially renders text with a fallback font before the custom font (Inter) is loaded, causing the layout to shift when the actual font is applied. Solutions 1. Use Fontaine for font metric fallbacks One of the recommended solutions is to use Fontaine, which provides font metric fallbacks to reduce Cumulative Layout Shift (CLS):

// Install Fontaine module
// npm install @nuxt/fontaine
// or
// yarn add @nuxt/fontaine

// Install Fontaine module
// npm install @nuxt/fontaine
// or
// yarn add @nuxt/fontaine

Then add it to your Nuxt configuration:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxt/fontaine',
    // other modules
  ]
})

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxt/fontaine',
    // other modules
  ]
})

As mentioned in the Nuxt documentation:

We would recommend using Fontaine to reduce your CLS.

Styling - Font Advanced Optimization 2. Check your font declaration Make sure you're properly declaring your font in your CSS:

@theme {
  --font-sans: 'Inter', sans-serif;
}

@theme {
  --font-sans: 'Inter', sans-serif;
}

3. Scroll restoration settings If the layout shift is related to scrolling behavior on reload, you might want to adjust the scroll restoration:

onMounted(() => {
    if (process.client && window) {
        window.history.scrollRestoration = 'auto';
    }
})

onMounted(() => {
    if (process.client && window) {
        window.history.scrollRestoration = 'auto';
    }
})

And add smooth scrolling CSS:

html {
    scroll-behavior: smooth;
}

html {
    scroll-behavior: smooth;
}

Stack Overflow - Prevent scroll jumping 4. Check for font conflicts In one case, a user found that their font choice was causing layout issues:

Finally I found the problem from the font type that I use, which is Tajwal, when I change it to other font, everything work well.

Stack Overflow - Font issue If you continue experiencing issues, you might want to try a different font or check if there are any specific issues with the Inter font in your implementation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

<@691298202577666099> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

xmatthiasOP•4d ago

not really helping - considering i'm seeing this on both my project, as well as on ui.nuxt.com and fonts.nuxt.com ... which i suppose are made using best practices

Gaming

Programming

@nuxt/fonts layout shift

Did you find this page helpful?