@font-face {
  font-family: 'cl-extralight';
  src: url("fonts/woff2/claralegal-extralight.woff2") format("woff2"),
        url("fonts/ttf/claralegal-extralight.ttf") format("truetype");
}

@font-face {
  font-family: 'cl-light';
  src: url("fonts/woff2/claralegal-light.woff2") format("woff2"),
        url("fonts/ttf/claralegal-light.ttf") format("truetype");
}

@font-face {
  font-family: 'cl-regular';
  src: url("fonts/woff2/claralegal-regular.woff2") format("woff2"),
        url("fonts/ttf/claralegal-regular.ttf") format("truetype");
}

@font-face {
  font-family: 'cl-semibold';
  src: url("fonts/woff2/claralegal-semibold.woff2") format("woff2"),
        url("fonts/ttf/claralegal-semibold.ttf") format("truetype");
}

@font-face {
  font-family: 'cl-bold';
  src: url("fonts/woff2/claralegal-bold.woff2") format("woff2"),
        url("fonts/ttf/claralegal-bold.ttf") format("truetype");
}

@font-face {
  font-family: 'cl-extrabold';
  src: url("fonts/woff2/claralegal-extrabold.woff2") format("woff2"),
        url("fonts/ttf/claralegal-extrabold.ttf") format("truetype");
}

@font-face {
  font-family: 'cl-black';
  src: url("fonts/woff2/claralegal-black.woff2") format("woff2"),
        url("fonts/ttf/claralegal-black.ttf") format("truetype");
}

@font-face {
  font-family: 'cl-extrablack';
  src: url("fonts/woff2/claralegal-extrablack.woff2") format("woff2"),
        url("fonts/ttf/claralegal-extrablack.ttf") format("truetype");
}