Adding custom font isn't working

[ctevan]

I've read several posts about how to do this and have followed them to the letter. I have uploaded two font files, icomoon.woff and icomoon.woff2, to my Assets folder. I have tried putting the following CSS rule in several places, including base.css, theme.liquid, and style-theme.liquid:

  @font-face {
    font-family: 'icomoon';
        src: url({{ "icomoon.woff2" | asset_url }}) format('woff2'),
            url({{ "icomoon.woff" | asset_url }}) format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
  }

then for the element I want the font on:

.icon-shield {
  font-family:'icomoon',sans-serif;
}

I've verified with Chrome devtools that it is reading that css rule. But it isn't loading the font, instead just defaulting to Arial. 

[suyash1]

@ctevan - can you please share this page link where you have applied the font?

[ctevan · Accepted solution]

For those coming from google. Apparently now uploading the font files to the assets folder isn't the way. you now have to add them in Content > Files, then copy the link and use that in the @font-face