Why isn't my second font applying in code?

[Rose1212]

Hi,

I'm trying to customize my fonts.

I have uploaded the web fonts and the first font works (Butler) but not the second font (Brown). 

Can you please check my code and tell me what's missing?

@font-face {
font-family: "Butler_Regular_Stencil"
;src: url({{ "Butler_Regular_Stencil" | asset_url }}) format("woff");
}
:root{
--font-heading-family: "Butler_Regular_Stencil"
}
h1{
font-family: "Butler_Regular_Stencil"
}
h2{
font-family: "Butler_Regular_Stencil"
}

@font-face {
font-family: "Brown-Light"
;src: url({{ "Brown-Light" | asset_url }}) format("woff2");
}
:root{
--font-heading-family: "Brown-Light"
}
div{
font-family: "Brown-Light"
}
h3{
font-family: "Brown-Light"
}
h4{
font-family: "Brown-Light"
}
h5{
font-family: "Brown-Light"
}
h6{
font-family: "Brown-Light"
}
body{
font-family: "Brown-Light"
}
}

[dmwwebartisan]

@Rose1212 

Please share your store URL!

Thanks!

[Rose1212]

www.afterstory.co

[NomtechSolution]

The code you provided appears to have a couple of issues. Here's the corrected version:

@font-face {
  font-family: "Butler_Regular_Stencil";
  src: url({{ "Butler_Regular_Stencil.woff" | asset_url }}) format("woff");
}

:root {
  --font-heading-family: "Butler_Regular_Stencil";
}

h1,
h2 {
  font-family: var(--font-heading-family);
}

@font-face {
  font-family: "Brown-Light";
  src: url({{ "Brown-Light.woff2" | asset_url }}) format("woff2");
}

div,
h3,
h4,
h5,
h6,
body {
  font-family: "Brown-Light";
}

[Rose1212]

No change.