@use "../vars/type-scale";

@font-face {
  font-display: swap;
  font-family: JosefinSlab;
  font-style: normal;
  font-weight: bold;
  src: url("../../../assets/typography/JosefinSlab-VariableFont.woff2")
      format("woff2-variations"),
    url("../../../assets/typography/JosefinSlab-Bold.woff2") format("woff2"),
    url("../../../assets/typography/JosefinSlab-Bold.woff") format("woff");
}

@font-face {
  font-display: swap;
  font-family: JosefinSlab;
  font-style: normal;
  font-weight: normal;
  src: url("../../../assets/typography/JosefinSlab-VariableFont.woff2")
      format("woff2-variations"),
    url("../../../assets/typography/JosefinSlab-Regular.woff2") format("woff2"),
    url("../../../assets/typography/JosefinSlab-Regular.woff") format("woff");
}

@font-face {
  font-display: swap;
  font-family: JosefinSlab;
  font-style: normal;
  font-weight: 300;
  src: url("../../../assets/typography/JosefinSlab-VariableFont.woff2")
      format("woff2-variations"),
    url("../../../assets/typography/JosefinSlab-Light.woff2") format("woff2"),
    url("../../../assets/typography/JosefinSlab-Light.woff") format("woff");
}

h1 {
  font-size: type-scale.$xxl-font-size;
}

p {
  font-size: type-scale.$small-medium-font-size;
}
