I'm trying to add a custom font in our help center and have followed all of the advice in this article with no luck. I have an otf font that I've added as an asset and have tried adding it to the document head and stylesheet.

document_head.hbs:

<script type="text/css">
@font-face {
  font-family: "TacticSans";
  src: local ("TacticSans"),
  src: url("{{asset 'TacticSansExd-BlkIt.otf'}}");
  src: url("{{asset 'TacticSansExd-BlkIt.otf'}}") format('otf');
}
</script>

style.css:

@font-face {
  font-family: "TacticSans";
  src: local ("TacticSans"),
    src: url('$assets-tacticsansexd-blkit-otf');
  src: url('$assets-tacticsansexd-blkit-otf') format('otf');
}

.header-inner a {
  color: white;
  text-decoration: none;
  font-family: "TacticSans", serif;
}

I've also tried a simplified version with just the font-family and src url with no change. Any advice to get this corrected would be appreciated!