import { injectGlobal } from 'styled-components';
import sofiaRegular from '../assets/fonts/sofiapro-regular.otf';
import sofiaBold from '../assets/fonts/sofiapro-bold.otf';
import sofiaBlack from '../assets/fonts/sofiapro-black.otf';
import sofiaExtraLight from '../assets/fonts/sofiapro-extralight.otf';
import sofiaLight from '../assets/fonts/sofiapro-light.otf';
import sofiaMedium from '../assets/fonts/sofiapro-medium.otf';
import sofiaSemiBold from '../assets/fonts/sofiapro-semibold.otf';
injectGlobal`
  @font-face {
    font-family: 'SofiaPro';
    font-weight: normal;
    src: url(${sofiaRegular}) format('truetype');
  }

  @font-face {
    font-family: 'SofiaPro';
    font-weight: 600;
    src: url(${sofiaBold} format('truetype');
  }

  @font-face {
    font-family: 'SofiaPro';
    font-weight: bold;
    src: url(${sofiaBlack}) format('truetype');
  }

  @font-face {
    font-family: 'SofiaPro';
    font-weight: 300;
    src: url(${sofiaExtraLight}) format('truetype');
  }

  @font-face {
    font-family: 'SofiaPro';
    font-weight: 400;
    src: url(${sofiaLight}) format('truetype');
  }

  @font-face {
    font-family: 'SofiaPro';
    font-weight: 500;
    src: url(${sofiaMedium}) format('truetype');
  }

  @font-face {
    font-family: 'SofiaPro';
    font-weight: 600;
    src: url(${sofiaSemiBold}) format('truetype');
  }

  body {
    font-family: 'SofiaPro';
  }
`;