Skip to main content


From CDN#

The easiest way to include fonts is via SCSS:

@import url(",400,500,600,700,800,900");
.text {
font-family: 'Montserrat', sans-serif;

From files#


If you need a tool to generate the @font-face definitions we recommend:

We are working on making fonts easier to import. But at the moment this is how you can import custom fonts.

Grab your custom font as .woff and .woff2 format and place them inside a directory. Let's call that directory /fonts on the root of your repository.
mkdir fonts
โ”‚ ...
โ”œโ”€โ”€ fonts/
โ”‚ โ”œโ”€โ”€ ibm-plex-sans-v7-latin-600.woff2
โ”‚ โ””โ”€โ”€ ibm-plex-sans-v7-latin-regular.woff2
โ”‚ ...

Create a style file and add the corresponding @font-face.
mkdir styles
touch styles/fonts.css
/* ibm-plex-sans-regular - latin */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
src: local('IBM Plex Sans'), local('IBMPlexSans'),
url('../fonts/ibm-plex-sans-v7-latin-regular.woff2') format('woff2');
/* ibm-plex-sans-600 - latin */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
url('../fonts/ibm-plex-sans-v7-latin-600.woff2') format('woff2');

Done! Now you can use your custom fonts.

import React from "react"
import styled from "styled-components"
const Title = styled.h1`
font-family: "IBM Plex Sans",sans-serif;
font-weight: 600;