skill-assessment-app/app/assets/stylesheets/atoms/_fonts.scss

//HALISR

@font-face {
  font-family: 'HalisR';
  src:local('Halis R Thin'),
      url('../fonts/HalisR-Thin.woff2') format('woff2'), 
      url('../fonts/HalisR-Thin.woff') format('woff'),
      url('../fonts/HalisR-Thin.otf') format('opentype');
  font-weight:100;
}
@font-face {
  font-family: 'HalisR';
  src:local('Halis R Light'),
      url('../fonts/HalisR-Light.woff2') format('woff2'), 
      url('../fonts/HalisR-Light.woff') format('woff'),
      url('../fonts/HalisR-Light.otf') format('opentype');
  font-weight:200;
}

@font-face {
  font-family: 'HalisR';
  src:local('Halis R Book'),
      url('../fonts/HalisR-Book.woff2') format('woff2'), 
      url('../fonts/HalisR-Book.woff') format('woff'),
      url('../fonts/HalisR-Book.otf') format('opentype');
  font-weight:300;
}

@font-face {
  font-family: 'HalisR';
  src:local('Halis R Regular'),
      url('../fonts/HalisR-Regular.woff2') format('woff2'), 
      url('../fonts/HalisR-Regular.woff') format('woff'),
      url('../fonts/HalisR-Regular.otf') format('opentype');
  font-weight:500;
}

@font-face {
  font-family: 'HalisR';
  src:local('Halis R Medium'),
      url('../fonts/HalisR-Medium.woff2') format('woff2'), 
      url('../fonts/HalisR-Medium.woff') format('woff'),
      url('../fonts/HalisR-Medium.otf') format('opentype');
  font-weight:600;
}

@font-face {
  font-family: 'HalisR';
  src:local('Halis R Bold'),
      url('../fonts/HalisR-Bold.woff2') format('woff2'), 
      url('../fonts/HalisR-Bold.woff') format('woff'),
      url('../fonts/HalisR-Bold.otf') format('opentype');
  font-weight:700;
}

@font-face {
  font-family: 'HalisR';
  src:local('Halis R Black'),
      url('../fonts/HalisR-Black.woff2') format('woff2'), 
      url('../fonts/HalisR-Black.woff') format('woff'),
      url('../fonts/HalisR-Black.otf') format('opentype');
  font-weight:900;
}

//LATO

  //regular

@font-face {
  font-family: 'Lato';
  src:local('Lato Hairline'),
      url('../fonts/Lato-Hairline.woff2') format('woff2'), 
      url('../fonts/Lato-Hairline.woff') format('woff'),
      url('../fonts/Lato-Hairline.ttf') format('truetype');
  font-weight:100;
}
@font-face {
  font-family: 'Lato';
  src:local('Lato Light'),
      url('../fonts/Lato-Light.woff2') format('woff2'), 
      url('../fonts/Lato-Light.woff') format('woff'),
      url('../fonts/Lato-Light.ttf') format('truetype');
  font-weight:300;
}

@font-face {
  font-family: 'Lato';
  src:local('Lato Regular'),
      url('../fonts/Lato-Regular.woff2') format('woff2'), 
      url('../fonts/Lato-Regular.woff') format('woff'),
      url('../fonts/Lato-Regular.ttf') format('truetype');
  font-weight:500;
}

@font-face {
  font-family: 'Lato';
  src:local('Lato Bold'),
      url('../fonts/Lato-Bold.woff2') format('woff2'), 
      url('../fonts/Lato-Bold.woff') format('woff'),
      url('../fonts/Lato-Bold.ttf') format('truetype');
  font-weight:700;
}

@font-face {
  font-family: 'Lato';
  src:local('Lato Black'),
      url('../fonts/Lato-Black.woff2') format('woff2'), 
      url('../fonts/Lato-Black.woff') format('woff'),
      url('../fonts/Lato-Black.ttf') format('truetype');
  font-weight:900;
}

  //italicized

@font-face {
  font-family: 'Lato';
  src:local('Lato Hairline Italic'),
      url('../fonts/Lato-HairlineItalic.woff2') format('woff2'), 
      url('../fonts/Lato-HairlineItalic.woff') format('woff'),
      url('../fonts/Lato-HairlineItalic.ttf') format('truetype');
  font-weight:100;
  font-style: italic;
}
@font-face {
  font-family: 'Lato';
  src:local('Lato Light Italic'),
      url('../fonts/Lato-LightItalic.woff2') format('woff2'), 
      url('../fonts/Lato-LightItalic.woff') format('woff'),
      url('../fonts/Lato-LightItalic.ttf') format('truetype');
  font-weight:300;
  font-style: italic;
}

@font-face {
  font-family: 'Lato';
  src:local('Lato Italic'),
      url('../fonts/Lato-Italic.woff2') format('woff2'), 
      url('../fonts/Lato-Italic.woff') format('woff'),
      url('../fonts/Lato-Italic.ttf') format('truetype');
  font-weight:500;
  font-style: italic;
}

@font-face {
  font-family: 'Lato';
  src:local('Lato Bold Italic'),
      url('../fonts/Lato-BoldItalic.woff2') format('woff2'), 
      url('../fonts/Lato-BoldItalic.woff') format('woff'),
      url('../fonts/Lato-BoldItalic.ttf') format('truetype');
  font-weight:700;
  font-style: italic;
}

@font-face {
  font-family: 'Lato';
  src:local('Lato Black Italic'),
      url('../fonts/Lato-BlackItalic.woff2') format('woff2'), 
      url('../fonts/Lato-BlackItalic.woff') format('woff'),
      url('../fonts/Lato-BlackItalic.ttf') format('truetype');
  font-weight:900;
  font-style: italic;
}