CSS @import url for loading fonts doesnt work #30567

jaemil · 2021-10-28T16:39:05Z

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

The text was updated successfully, but these errors were encountered:

sveggiani · 2021-10-28T16:47:45Z

Hi @jaemil , I just reported the same in #30569. I'm sorry that I didn't see your issue first. I was writing mine when you posted. In our case the Google fonts import works ok but not the one from Typekit.

sitoftonic · 2021-10-28T21:09:02Z

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');

hoangph271 · 2021-10-28T21:23:24Z

I had the same problem with NES.css and google fonts, but I found this workaround:
Comment out urlImports like this:

experimental: {
  concurrentFeatures: true,
  serverComponents: true,
  // urlImports: []
}

And try building again, works on both my ARM macOs and x64 Ubuntu...!

matthoiland · 2021-10-28T23:22:18Z

Same issue with Typekit and Tailwind, but a different workaround:

Instead of:

/* base.css */
@import "https://use.typekit.net/*******.css";

This works for me:

/* base.css */
@import "./fonts.css";

/* fonts.css */
@import "https://use.typekit.net/*******.css";

I need to take a nap thinking about why this works 🤯

alaadahmed · 2021-11-01T14:16:53Z

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

gthb · 2021-11-02T11:20:35Z

@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 · 2021-11-02T13:42:24Z

~~Possibly because the @import"..." statement has been so eagerly minimized as to have no space between the @import and the "'..." but css-loader expects a space?~~

... never mind, that was my bad Github search-fu landing me in some really old code :)

mrodrigues95 · 2021-11-02T23:34:56Z

Adding a custom _document.js and injecting it with the desired font as @alaadahmed suggested fixes it for me as well with v12.0.2.

gthb · 2021-11-03T10:07:36Z

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!

petehl · 2021-11-03T12:42:01Z

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)

Including the rel="stylesheet"was what I was missing as well.

So adding <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins...." /> as child for <Head> in _document.tsx had our fonts rendering again.

sveggiani · 2021-11-15T17:38:22Z

Are there any news or progress on this?

alizahid · 2021-11-15T21:57:17Z

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

zackdotcomputer · 2021-11-18T19:27:27Z

Unfortunately, not fixed in Next 12.0.4 or 12.0.5 canary 3

fixes #30567

edgechurchdev · 2021-12-21T04:02:31Z

Importing Typekit fonts is still broken for me in 12.0.7. Should this issue still be open?

balazsorban44 · 2021-12-21T10:28:35Z

No. Please open a separate issue with a reproduction.

balazsorban44 · 2021-12-21T11:22:14Z

There is a possibility that this is the same as #32645

fixes vercel#30567

jaemil added the bug Issue was opened via the bug report template. label Oct 28, 2021

timneutkens added kind: bug and removed bug Issue was opened via the bug report template. labels Oct 29, 2021

timneutkens added this to the 12.0.x milestone Oct 29, 2021

mattleff mentioned this issue Nov 3, 2021

Fix visual bugs audioverse-org/audioverse-next#111

Merged

styfle modified the milestones: 12.0.x, 12.0.4 Nov 5, 2021

timneutkens removed this from the 12.0.5 milestone Nov 17, 2021

timneutkens added the Webpack Related to Webpack with Next.js. label Nov 17, 2021

timneutkens assigned sokra Nov 18, 2021

sokra mentioned this issue Nov 22, 2021

add test case #31691

Merged

kodiakhq bot closed this as completed in #31691 Nov 22, 2021

kodiakhq bot pushed a commit that referenced this issue Nov 22, 2021

add test case (#31691)

d971262

fixes #30567

vercel locked as off-topic and limited conversation to collaborators Dec 21, 2021

natew pushed a commit to natew/next.js that referenced this issue Feb 16, 2022

add test case (vercel#31691)

92e4433

fixes vercel#30567

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CSS @import url for loading fonts doesnt work #30567

CSS @import url for loading fonts doesnt work #30567

jaemil commented Oct 28, 2021

sveggiani commented Oct 28, 2021 •

edited

Loading

sitoftonic commented Oct 28, 2021 •

edited

Loading

hoangph271 commented Oct 28, 2021

matthoiland commented Oct 28, 2021

alaadahmed commented Nov 1, 2021 •

edited

Loading

gthb commented Nov 2, 2021 •

edited

Loading

gthb commented Nov 2, 2021 •

edited

Loading

mrodrigues95 commented Nov 2, 2021 •

edited

Loading

gthb commented Nov 3, 2021 •

edited

Loading

petehl commented Nov 3, 2021

sveggiani commented Nov 15, 2021

alizahid commented Nov 15, 2021

zackdotcomputer commented Nov 18, 2021

edgechurchdev commented Dec 21, 2021

balazsorban44 commented Dec 21, 2021

balazsorban44 commented Dec 21, 2021

CSS @import url for loading fonts doesnt work #30567

CSS @import url for loading fonts doesnt work #30567

Comments

jaemil commented Oct 28, 2021

What version of Next.js are you using?

What version of Node.js are you using?

What browser are you using?

What operating system are you using?

How are you deploying your application?

Describe the Bug

Expected Behavior

To Reproduce

sveggiani commented Oct 28, 2021 • edited Loading

sitoftonic commented Oct 28, 2021 • edited Loading

hoangph271 commented Oct 28, 2021

matthoiland commented Oct 28, 2021

alaadahmed commented Nov 1, 2021 • edited Loading

UPDATE:

gthb commented Nov 2, 2021 • edited Loading

gthb commented Nov 2, 2021 • edited Loading

mrodrigues95 commented Nov 2, 2021 • edited Loading

gthb commented Nov 3, 2021 • edited Loading

petehl commented Nov 3, 2021

sveggiani commented Nov 15, 2021

alizahid commented Nov 15, 2021

zackdotcomputer commented Nov 18, 2021

edgechurchdev commented Dec 21, 2021

balazsorban44 commented Dec 21, 2021

balazsorban44 commented Dec 21, 2021

sveggiani commented Oct 28, 2021 •

edited

Loading

sitoftonic commented Oct 28, 2021 •

edited

Loading

alaadahmed commented Nov 1, 2021 •

edited

Loading

gthb commented Nov 2, 2021 •

edited

Loading

gthb commented Nov 2, 2021 •

edited

Loading

mrodrigues95 commented Nov 2, 2021 •

edited

Loading

gthb commented Nov 3, 2021 •

edited

Loading