Since you're using the ES6 import syntax you may use the same syntax to import your stylesheet

import './App.css'

Also, you can wrap your class with :global to switch to the global scope (this mean CSS Module won't modulify it, eg: adding a random id next to it)

:global(.myclass) {
  background-color: red;
}

To create global styles we can use createGlobalStyle function. For next.js project, you can do that in _app.js or _app.tsx file, depending on whether you are using typescript.

import type { AppProps } from "next/app";
import { createGlobalStyle } from "styled-components";

import Header from "@/components/Header";

const GlobalStyles = createGlobalStyle`
html,
body {
    padding: 0;
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

* {
    box-sizing: border-box;
}
`;

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <GlobalStyles />
      <Header></Header>
      <Component {...pageProps} />
    </>
  );
}

Of course, if you have more global styles you can export the GlobalStyles from other file, say globalStyle.js.

But then there is nothing out there that stops you from using CSS or SCSS for your global styles. You can always import the .css or .scss or any other supported CSS preprocessor file types as you would normally do.

import '@/styles/global.scss'

And this would work perfectly fine with your Styled Components as well. Though there is a little advantage you get by using createGlobalStyle. You can use all SCSS features without having to add SCSS dependency in your project. And a little drawback is that the auto-complete features of the ide don't work as well with styled-components as they do with .css and .scss files.

I'd import your font.css file when and where you use it (but not exactly the way you suggest, see below) and not just in the root component. I suggest this because when and if you decide to code split, you would only want that CSS to exist in the bundle that uses it.

If the import is in your root component, you might remove all components that are using the fa fa-bandcamp classes but your import remains in the root (because you forget it's there and not alongside your component) and you'd be bundling in CSS that is not even in the chunk that uses it.

On the contrary though, when importing at the component level you could also end up in a situation where you use those classes and forget to import that font.css because ANOTHER component has imported the global CSS already. It looks like it works but if you code split you might find that your chunk does not have the right font because the CSS import is in another chunk. In this case importing it in the root would have solved your issue!

What I would do:

I would argue that any global css is bad and you should be using something like CSS modules. So I'd go one step further and create a <Text/> component that is something like:

import React from 'react'
import '../font.css'
export default ({ className, children, tagName: TagName }) => <TagName className={`fa fa-bandcamp ${className}`>{ children }</TagName>;

Now you can use the <Text tagName="span">Hey!</Text> in all your components safely because:

• You no longer have to import the CSS all the time.
• If you code split, or remove all <Text/> you won't be left with a bundle that contains unused CSS imports in the root that you forgot about.
• It's not possible to use those classes and forget to import the CSS.
• Everything is nice and encapsulated in a modular way and your bundles are as efficient as possible.

I wouldn't employ this kind of strategy for something like a reset.css though. Obviously.

TL;DR Summary

Root level - Potential inefficient code splitting. Harder to maintain as CSS does not live along side the component that uses it.

Individual component level - Pain to import all the time. Fragile as you can end up using a class that doesn't exist in a chunk if forgetting to import the global CSS.

"Text" component - Awesome. Just make sure everybody uses the fa classes via this component and everything is golden. Modular. Easy to maintain. Robust.