Importing a Font to a React Project

importing_font.css

/* FONT_NAME = Your font name, i.e. Arial */
/* PATH_TO_YOUR_FILE = The relative path to your font from index.css */
/* Note: Most of the Google fonts I've seen are .ttf which is the 'truetype' format */

@font-face {
  font-family: 'FONT_NAME';
  src: local('FONT_NAME'),
    url('PATH_TO_YOUR_FILE') format('truetype');
}

/* Optionally you may also set other variables such as 'font-weight' while importing */
/* In the example below the font will be used when you use a weight of '700' */

@font-face {
  font-family: 'FONT_NAME';
  src: local('FONT_NAME'),
    url('PATH_TO_YOUR_FILE') format('truetype');
  font-weight: 700;
}

/* This is how you use the font */
.selector {
 font-family: 'FONT_NAME';
}