Fonts

From CDN#

The easiest way to include fonts is via SCSS:

styles/style.scss
@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800,900");
.text {
font-family: 'Montserrat', sans-serif;
}

From files#

note

If you need a tool to generate the @font-face definitions we recommend: https://google-webfonts-helper.herokuapp.com/

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.

Terminal.app
mkdir fonts
PROJECT-NAME/
โ”‚ ...
โ”œโ”€โ”€ 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.

Terminal.app
mkdir styles
touch styles/fonts.css
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.

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