website to download fonts

tutorial.txt

url: https://google-webfonts-helper.herokuapp.com/

download the font you want to use, remove the .woff files, leaving only the .woff2 ones. 

Create a /fonts folder in the /public folder and put the .woff2 files there
then, in your global styles, you add this (just an example):
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local(''), url('/fonts/roboto-v29-latin-regular.woff2') format('woff2')
  }

  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: local(''), url('/fonts/roboto-v29-latin-500.woff2') format('woff2'),
  }

  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: local(''), url('/fonts/roboto-v29-latin-700.woff2') format('woff2')
  }