next.js: CSS @import url for loading fonts doesnt work

What version of Next.js are you using?

12.0.1

What version of Node.js are you using?

17.0.1

What browser are you using?

Firefox, Chrome

What operating system are you using?

Windows 10

How are you deploying your application?

next start

Describe the Bug

App.scss: @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

Loading the font with next dev works but not with next build (next start).

Tested with optimizeFonts: false but with same result.

Expected Behavior

In next 11.0.1 the font was imported correctly

To Reproduce

Inside App.scss @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

next build
next start

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 6
Comments: 16 (3 by maintainers)

Commits related to this issue

add test case (#31691) fixes #30567 — committed to vercel/next.js by sokra 3 years ago
add test case (#31691) fixes #30567 — committed to natew/next.js by sokra 3 years ago

Most upvoted comments

@timneutkens I found the proximate cause: the @import"..." rule that should load the font appears way down in the middle of a CSS chunk. Per the specification:

Any @import rules must precede all other valid at-rules and style rules in a style sheet (ignoring @charset), or else the @import rule is invalid.

Sure enough, if I manually edit the chunk to put this @import rule at the top, the font loads correctly.

Our source file does have the @import rule at the top. So the CSS is being chunked incorrectly.

gthb on Nov 2, 2021

@sveggiani It’s to be released in the 12.0.4 milestone, which is scheduled for November 30. Shouldn’t be too long now.

alizahid on Nov 15, 2021

Same here, I use TailwindCSS and in globals.css I do this:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html,
  body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.8;
  }
  // ...

I see in chrome inspector that computed font is the one I imported, but it doesn’t render as should be

On next 11.1.2 this works fine!

UPDATE:

When I added _document.js file and injected it with <link href="https://fonts.googleapis.com/css2?family=Poppins...." /> as child for <Head> It worked as expected in Next 12.0.2

alaadahmed on Nov 1, 2021

I have the same problem with Google Fonts, the exact same situation as described by @jaemil.

With NextJs version 11.0.1 was working fine, and after upgrading to latest version the fonts are not loading correctly.

I’m using Tailwind CSS and the import is found in globals.css and is also attached in the output file styles.css.

The import:

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700;900&display=swap');

sitoftonic on Oct 28, 2021

Yeah, the workaround of an explicit <link> tag in <Head> in _document.js works for my case as well — but I had to also:

disable font optimization with optimizeFonts: false in next.config.js (else the <link> tag gets its href rewritten to data-href so the browser ignores it)
include rel="stylesheet" in the <link> tag, else it only worked in dev mode, not in the production build (don’t know if that’s for some reason particular to my project)

Thanks to the other commenters here for the help!

gthb on Nov 3, 2021