@font-face {
  font-family: 'Area';
  src: local('Area Light'), local('Area-Light'),
    url('Area-Light.woff2') format('woff2'),
    url('Area-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Area';
  src: local('Area Medium'), local('Area-Medium'),
    url('Area-Medium.woff2') format('woff2'),
    url('Area-Medium.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Area';
  src: local('Area Semibold'), local('Area-Semibold'),
    url('Area-Semibold.woff2') format('woff2'),
    url('Area-Semibold.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Area';
  src: local('Area Extrabold'), local('Area-Extrabold'),
    url('Area-Extrabold.woff2') format('woff2'),
    url('Area-Extrabold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Area Extrablack';
  src: local('Area Extrablack'), local('Area-Extrablack'),
    url('Area-Extrablack.woff2') format('woff2'),
    url('Area-Extrablack.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}