@font-face {
  font-family: "KarloSerif";
  src: url('../font/KarloSerif-Regular/font.woff2') format('woff2'),
       url('../font/KarloSerif-Regular/font.woff') format('woff');
       font-weight: normal;
       font-style: normal;
}

@font-face {
  font-family: "KarloSerif";
  src: url('../font/KarloSerif-Medium/font.woff2') format('woff2'),
       url('../font/KarloSerif-Medium/font.woff') format('woff'),
       url('../font/KarloSerif-Medium/font.otf') format('otf');
       font-weight: 500;
       font-style: normal;
}
@font-face {
  font-family: "KarloSerif";
  src: url('../font/KarloSerif-Bold/font.woff2') format('woff2'),
       url('../font/KarloSerif-Bold/font.woff') format('woff');
       font-weight: 600;
       font-style: normal;
}

@font-face {
  font-family: "KarloSerif";
  src: url('../font/KarloSerif-Light/font.woff2') format('woff2'),
       url('../font/KarloSerif-Light/font.woff') format('woff');
       font-weight: 300;
       font-style: normal;
}

@font-face {
  font-family: "KarloSerif";
  src: url('../font/KarloSerif-ExtraLight/font.woff2') format('woff2'),
       url('../font/KarloSerif-ExtraLight/font.woff') format('woff');
       font-weight: 200;
       font-style: normal;
}

@font-face {
  font-family: "KarloSerif";
  src: url('../font/KarloSerif-Italic/font.woff2') format('woff2'),
       url('../font/KarloSerif-Italic/font.woff') format('woff');
       font-weight: normal 400;
       font-style: italic;
}

@font-face {
  font-family: "KarloSerif";
  src: url('../font/KarloSerif-MediumItalic/font.woff2') format('woff2'),
       url('../font/KarloSerif-MediumItalic/font.woff') format('woff');
       font-weight: medium 500;
       font-style: italic;
}

@font-face {
  font-family: "KarloSerif";
  src: url('../font/KarloSerif-BoldItalic/font.woff2') format('woff2'),
       url('../font/KarloSerif-BoldItalic/font.woff') format('woff');
       font-weight: bold 600 700;
       font-style: italic;
}

@font-face {
  font-family: "KarloSerif";
  src: url('../font/KarloSerif-LightItalic/font.woff2') format('woff2'),
       url('../font/KarloSerif-LightItalic/font.woff') format('woff');
       font-weight: light 300;
       font-style: italic;
}

@font-face {
  font-family: "KarloSerif";
  src: url('../font/KarloSerif-ExtraLightItalic/font.woff2') format('woff2'),
       url('../font/KarloSerif-ExtraLightItalic/font.woff') format('woff');
       font-weight: extralight 200;
       font-style: italic;
}