import React from 'react';
import { Global } from '@emotion/react';
import '@fontsource/open-sans/400.css';
import '@fontsource/open-sans/700.css';

const Fonts = () => (
  <Global
    styles={`
      /* open-sans-cyrillic-400-normal */
      @font-face {
        font-family: 'Open Sans';
        font-style: normal;
        font-display: swap;
        font-weight: 400;
        src: url(./files/open-sans-cyrillic-400-normal.woff2) format('woff2'), url(./files/open-sans-cyrillic-400-normal.woff) format('woff');
        unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
      }
      /* open-sans-cyrillic-700-normal */
      @font-face {
        font-family: 'Open Sans';
        font-style: normal;
        font-display: swap;
        font-weight: 700;
        src: url(./files/open-sans-cyrillic-700-normal.woff2) format('woff2'), url(./files/open-sans-cyrillic-700-normal.woff) format('woff');
        unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
      }
      `}
  />
);

export default Fonts;