@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 200;
  font-display: fallback;
  src: local('Dosis ExtraLight'), local('Dosis-ExtraLight'), url(~@fonts/Dosis/Dosis-ExtraLight.ttf);
}

@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 300;
  font-display: fallback;
  src: local('Dosis Light'), local('Dosis-Light'), url(~@fonts/Dosis/Dosis-Light.ttf);
}

@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: local('Dosis Regular'), local('Dosis-Regular'), url(~@fonts/Dosis/Dosis-Book.ttf);
}

@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 500;
  font-display: fallback;
  src: local('Dosis Medium'), local('Dosis-Medium'), url(~@fonts/Dosis/Dosis-Medium.ttf);
}

@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 600;
  font-display: fallback;
  src: local('Dosis SemiBold'), local('Dosis-SemiBold'), url(~@fonts/Dosis/Dosis-SemiBold.ttf);
}

@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 700;
  font-display: fallback;
  src: local('Dosis Bold'), local('Dosis-Bold'), url(~@fonts/Dosis/Dosis-Bold.ttf);
}

@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 800;
  font-display: fallback;
  src: local('Dosis ExtraBold'), local('Dosis-ExtraBold'), url(~@fonts/Dosis/Dosis-ExtraBold.ttf);
}