I am working on existing project currently based on Next.js 11, and I am working to upgrade it to use Next.js 12.

The project uses CSS @import to load custom fonts. However, with 12 the lines in the .css file are ignored — to see the font, I have to add them into an the root level App component.

From style.css

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kalam&display=swap');

The workaround – add it to the tag in the main component.

      <style>
        @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap'); @import
        url('https://fonts.googleapis.com/css2?family=Kalam&display=swap');
      </style>

I assume this is because of the conversion from babel to SWC. Is there some plugin/config I need to provide to SWC? Or is the workaround the best option available?