@font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 300;
   src: url('./300.ttf') format('truetype');
}
@font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 600;
   src: url('./600.ttf') format('truetype');
}
@font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 700;
   src: url('./700.ttf') format('truetype');
}
@font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 800;
   src: url('./800.ttf') format('truetype');
}
@font-face {
   font-family: 'Open Sans';
   font-style: italic;
   font-weight: 300;
   src: url('./300italic.ttf') format('truetype');
}
@font-face {
   font-family: 'Open Sans';
   font-style: regular;
   font-weight: 400;
   src: url('./regular.ttf') format('truetype');
}
@font-face {
   font-family: 'Open Sans';
   font-style: italic;
   font-weight: 400;
   src: url('./italic.ttf') format('truetype');
}
@font-face {
   font-family: 'Open Sans';
   font-style: italic;
   font-weight: 600;
   src: url('./600italic.ttf') format('truetype');
}
@font-face {
   font-family: 'Open Sans';
   font-style: italic;
   font-weight: 700;
   src: url('./700italic.ttf') format('truetype');
}
@font-face {
   font-family: 'Open Sans';
   font-style: italic;
   font-weight: 800;
   src: url('./800italic.ttf') format('truetype');
}