Why isn't my custom font code working on my sections?

[StephenWatkins]

Hey folks, so it seems like I've done something wrong with installing my custom font because I can't seem to get it to work in my sections even though system fonts work just fine.

Any insight into what I'm doing wrong?  I'm using the Creator theme, but the section I'm using 

is a third party section I added via an app.

Okay here's what I've done:

1) I've uploaded the woff and woff2 font files for Amonos Display Medium into the Assets folder.  The name of the font files are amonosdisplaymedium.woff/woff2

2) I've added the following code to...well everything.  theme.css, theme.liquid, themes-css-variables.liquid, 

 @font-face {

  font-family: 'Amonos Display Medium';

  src: url('amonosdisplaymedium') format('woff'); 

  }

    @font-face {

  font-family: 'Amonos Display Medium';

  src: url('amonosdisplaymedium') format('woff2'); 

  }

3) I've added the following code to the section's CSS code:

h2.dsgn-pck__heading {
  font-family: "Amonos Display Medium" !important;
  font-size: 50px;
}

If I change the font-family CSS for the section to a system font like Chivo, it works just fine.  Any idea what I'm doing wrong?

[dmwwebartisan · Accepted solution]

@StephenWatkins 

Please use following code 

@font-face {
  font-family: 'Amonos Display Medium';

  src: url({{"amonosdisplaymedium" | asset_url }}) format('woff'); 
  }

@font-face {
    font-family: "Amonos Display Medium";

    src: url({{ "amonosdisplaymedium" | asset_url }}) format("woff2");
}

Thanks!

[StephenWatkins]

Thank you so much!