New approaches for Stenciljs --- 2023 update
If you are using Stenciljs and want to ship the fonts directly with your bundle and use it everywhere than one of the two options is for you:
First Option: Use global style sheet. https://stenciljs.com/docs/styling#global-styles. In the global style sheet you can import your fonts like you usually do:
@font-face {
font-family: 'special-font';
src: url('/assets/fonts/special-font.ttf') format('truetype');
}
h1,h2,h3,h4,h5 {
font-family: 'special-font' !important;
}
This would apply the font to all titles on your page (web-components but also all elements on your normal page). Everything is served through your stencil package. Take care not to accidentally overwrite styles of your normal website.
Second option: Create a new component like <ci-styling></ci-styling> and insert all your styles in this component. Than you just have to set shadow: false in the @Component decorator. With this the component isn't using the shadow dom anymore and the styles are available everywhere like in the first option. With this approach you can always decide per page individually if you want e.g. the fonts or not by simply loading or not loading this component.
@Component({
tag: 'ci-styles',
styleUrls: ['ci-styles.scss'],
shadow: false,
})
Original Answer Below from 2019 (still valid)
Third option: After hours of struggle and the answer from @Intervalia I was able to fix it.
The problem is that the browser doesn't load the font files when they are only included in the shadow dom (your custom web component). This means that the fonts also has to be included in the normal html file (aka light DOM) so that the browser can detect and load them in order to make them available in the shadow dom.
In my case I didn't use Font awesome instead it was a custom font but I tried it a second time with font awesome and a clean Stenciljs project. The solution is always the same doesn't matter which custom font you need.
Step 1: Move the font into your project. I created a seperate "assets" folder inside the "src" folder to have access from all the components. In this example I downloaded font awesome for web environment https://fontawesome.com/download. (I wouldn't recommend "npm install" since you have to use it in the index.html too)
Step 2: Prepare your web component (in this case my-component.tsx). You can import multiple css files using the styleUrls property. Just import the fontawesome css from your assets directory.
import { Component, Prop, h } from '@stencil/core';
@Component({
tag: 'my-component',
styleUrls: [
'my-component.css',
'../../assets/fontawesome/css/all.css'
],
shadow: true
})
export class MyComponent {
@Prop() first: string;
render() {
return <div> <i class="fas fa-question-circle"></i> </div>;
}
}
Step 3 prepare the file where you want to use the component (in this case index.html). The important line is the "link" tag. This includes the "font awesome css" again and force the Browser to really download the fonts.
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>Stencil Component Starter</title>
<link rel="stylesheet" type="text/css" href="./assets/fontawesome/css/all.css">
</head>
<body>
<my-component first="Stencil" last="'Don't call me a framework' JS"></my-component>
</body>
</html>
I know it feels wrong and looks weird but it is not enough to include font awesome only in the index html or in the web component. It must really be included in both files. That doesn't mean the Browser will load it multiple times - it will only be loaded once.
That means that you can't deliver the font with the web component - as far as i know. This isn't a stenciljs bug this is a general problem of the browsers. Please let me know if you have better solutions.
Just for fun here is a screenshot that shows that the browser doesn't load the fonts when it is only included in one file. http://prntscr.com/p2f9tc
Update 05.10.2019:
If you want to use your font inside your web-component the explanation above is correct and still necessary. But you can also use the slot tag inside the web-component. Than you automatically bypass the font from outside (the html) into the web-component. But notice it only works for the stuff you write between the tags of your web component.
That means you can use <my-component> <i class="your-font"/> </my-component>. In this case you don't have to import the font into the web components.
