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

Format `tiff`? I think it should be `url('../assets/Anurati-Regular.ttf') format("truetype")` in your `@font-face` rule — herrstrietzel, Feb 27 '23 at 21:10
I tried that as well. Neither worked. Thank you for youre response though. Also, I had a slight typo, the file type in the file structure is .tiff @herrstrietzel — Drew Y, Mar 01 '23 at 15:50

Drew Y · Accepted Answer · 2023-03-01T18:41:36.053

2

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

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');    
 }

Have the .ttf file(Font file) downloaded. and inserted into your "assets" folder.
Have your assets file located in your "src" directory, but not inside your "components" directory

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,    
 })

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';    
 }

edited Mar 01 '23 at 18:41

answered Mar 01 '23 at 18:40

Drew Y

21
3

`url('/assets/Anurati-Regular.ttf')` - like I said, your original relative path was invalid. – G. Tranter Mar 01 '23 at 20:55
righto captain. Thanks for your help. – Drew Y Mar 01 '23 at 22:01
You are welcome. Please thank by upvoting - it helps other readers know what might help them. – G. Tranter Mar 02 '23 at 19:16
Thanks for the credits @Drew Y. I updated my original post from 2019 since there are two alternative solutions that weren't possible when I wrote it back in the day - sepcifically for StencilJS they might be worth checking out. Cheers – Christian Meyer May 26 '23 at 13:12

score 0 · Answer 2 · answered Mar 01 '23 at 16:23

0

How are you deploying Anurati-Regular.tiff? The path ../assets/Anurati-Regular.tiff is relative to your CSS source code, but when running, your source code path is not relevant. That path needs to point to the location of the font file on your server, and your Stencil config needs to make sure that file is included when built.

There are multiple ways to deploy the font file or any other asset. You can include a copy task as part of your 'www' build - see https://stenciljs.com/docs/copy-tasks. Or you can include it by using the assetsDir feature in the friends-listening component - see https://stenciljs.com/docs/assets#making-assets-available. You could also deploy separately and point your CSS to an absolute url e.g. url('https://my-server.com/assets/fonts/Anurati-Regular.ttf').

In any case, the url() value needs to point to the served location of the font file, not the source location.

answered Mar 01 '23 at 16:23

G. Tranter

16,766
1
48
68

So my "assets" folder in my "www" folder is in the same relative location as the "src" folder. It may have to do with Stencil not accepting the ttf file type or the otf file type. So I tried the tiff file type, but haven't found any documentation on that file type yet. Its just that the Tiff file type just the only font file type that StencilJS references in the documentation. – Drew Y Mar 01 '23 at 17:52
Not really - `../assets/Anurati-Regular.tiff` relative to `http://localhost:3333` is invalid I think - equates to `http://localhost:3333/../assets/Anurati-Regular.tiff`. Once again - how **and where** have you **deployed** the file? – G. Tranter Mar 01 '23 at 18:04
Thank you for your help, @G. Tranter OI actually figured out the solution. I'll answer below. – Drew Y Mar 01 '23 at 18:17
Also, that had something to do with the Shadow DOM not being abel to translate that message effectively for some reason – Drew Y Mar 01 '23 at 22:04

Custom font not working in Stenciljs application

2 Answers2