Styling Handoff

Your Handoff site comes with a basic layout with a top menu, a side nav, and a main body content. You can use custom SCSS styles to restyle the generated site.

In your generated site structure, you will see a folder called styles. If you don't have that folder, you can create it. In that folder, create a file called custom.scss. This file will be read at build time, and any styles found here will be applied to the entire application.

For instance, you could change the color scheme of the left sidebar like this

custom.scss
1.c-sidenav {
2  background-color: #faeeee;
3}

Fonts

This file is commonly used for supplying project specific fonts. When we fetch tokens from Figma, we can identify which fonts are used in the project, but we cannot pull the font files directly. These files often have specific licenses. To ensure that the fonts appear correctly on your Handoff site, you should add them to the public directory, and then add CSS to the custom.scss file to map the font family correctly.

Here's how you can use the Roboto google font in your project -

custom.scss
1@import url("https://fonts.googleapis.com/css2?family=Roboto&family=Roboto+Serif:ital,opsz,wght@0,8..144,300;0,8..144,400;0,8..144,500;0,8..144,600;1,8..144,300;1,8..144,400;1,8..144,500;1,8..144,600&display=swap");
2font-family: "Roboto", sans-serif;
3font-family: "Roboto Serif", serif;

Here's how you could use a custom font (SharpSans) in your project. Add the font files to a folder called fonts, in the public directory. Then add this to your custom.scss

custom.scss
1@font-face {
2  font-family: "Sharp Sans";
3  src: url("../public/fonts/SharpSans-Book.woff2") format("woff2"), url("../public/fonts/SharpSans-Book.ttf")
4      format("truetype");
5  font-weight: 300;
6  font-style: normal;
7  font-display: swap;
8}
9@font-face {
10  font-family: "Sharp Sans";
11  src: url("../public/fonts/SharpSans-Bold.woff2") format("woff2"), url("../public/fonts/SharpSans-Bold.ttf")
12      format("truetype");
13  font-weight: 700;
14  font-style: normal;
15  font-display: swap;
16}
17@font-face {
18  font-family: "Sharp Sans";
19  src: url("../public/fonts/SharpSans-Bold.woff2") format("woff2"), url("../public/fonts/SharpSans-Bold.ttf")
20      format("truetype");
21  font-weight: 800;
22  font-style: normal;
23  font-display: swap;
24}