Custom font not working in Stenciljs application

Question

I'm new to Stenciljs and I'm trying to get a custom font to work inside my app. I downloaded the otf file(Not sure if I need an npm package for this) Here's the code:

filestructure:

-src

--components

--assets

---Anurti-Regular.tiff

---Anurti-Regular.ttf

friends-listening.css

@font-face {
  font-family: 'Anurati-Regular';
  src: local('Anurati-Regular'),
   url('../assets/Anurati-Regular.tiff') format("tiff");
}

#home{
  background-color: #C8B7A6;
  height:1000px;
  text-align: center;
  font-family: Anurati-Regular;
}

friends-listening.tsx

<div id="home">
        <h2>Friends-FX app BETA</h2>
        <div id={this.login}>
          <my-component></my-component>
        </div>

        ...
</div>

Any help would be great. Thank you very much for your time, Drew

I expected that the output would be that the font displays correctly on my front-end but no bueno.

Also, there have been a lot of questions around this idea, but no true answer

Answer 1

This is where I was able to find a solution: Why doesn't Font Awesome work in my Shadow DOM?

1. Have a global.css file that includes this:

    @font-face {    
      font-family: 'Anurati-Regular';    
      src: local('Anurati-Regular'),    
      url('/assets/Anurati-Regular.ttf') format('truetype');    
    }
   

2. Have the .ttf file(Font file) downloaded. and inserted into your "assets" folder.

3. Have your assets file located in your "src" directory, but not inside your "components" directory

4. In your component .tsx file, for me (friends-listening.tsx) have "global.css" file referenced in the 'styleUrls' like the below:

    @Component({    
      tag: 'friends-listening',    
      styleUrls:[    
        'friends-listening.css',    
        '../../global.css'    
      ],    
      shadow: true,    
    })    
   

5. Reference in your component's css file(for me friends-listening.css):

    #home{    
      background-color: #C8B7A6;    
      height:1000px;    
      text-align: center;    
      /*the below is the font-family solution*/
      font-family: 'Anurati-Regular';    
    }