There are many ways to style your website. They can roughly be grouped into three styling approaches (Global CSS, Modular Stylesheets, CSS-in-JS), all of which Gatsby supports (in addition to CSS extensions).
Gatsby doesn’t have an opinion about which styling approach you choose. Almost every possible option is supported through official and community plugins.
Global CSS is the traditional way to style a website. CSS rules are declared globally and styles are applied depending on specificity and inheritance.
Sass is an extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more. In Gatsby, Sass code can be translated to well-formatted, standard CSS using a plugin.
Emotion is a performant and flexible CSS-in-JS library. It allows you to style apps quickly with string or object styles.
If you have custom fonts hosted on your computer, Gatsby supports their use in your project
Hosting your fonts within a Gatsby project increases your site’s speed by up to ~300 milliseconds on desktop and 1+ seconds on 3G connections.