Bravura text font HTML not loading?

I'm trying to convert my icon buttons to HTML using my loaded font 'Bravura.otf'

Here is my HTML code below:

<!doctype html>
<meta charset="utf-8">
<style>
  @font-face {
    font-family: "Bravura";   
    src: url('Bravura.otf');
  }
  .bravura {
    font-family: "Bravura";
    vertical-align: text-top;
  }
</style>
 <span class="Bravura">&#xE1F0;&#xE1F7;&#xE1F2;&#xE1F7;&#xE1F2;&#xE1F7;&#xE1F2;</span> 

I've placed the Bravura.otf in the root of the OSC session file. I've also tried to give it the local file address

src: url('C:\\Windows\\Fonts\\Bravura.otf');

image

However, when I use pseudo elements it works just fine with the code below:

:host:before {
font-family: "Bravura";
content: "\E1D5\0020\EB62";
Font-Size: 300%;
Position: absolute;
top: 50%;
left: 50%;
Transform: translate(-50%, -50%);
z-index: 1;
}

image

Any thoughts on what would be causing the error?