How to add fonts to chrome extension properly? - google-chrome-extension

Question

Fonts are not visible for my custom script chrome extension.
Folder structure:
assets
-fonts
content-app
manifest.json
manifest.json:
(...)
"content_scripts": [
{
"all_frames": false,
"js": ["/content-app/runtime.js", "/content-app/polyfills.js", "/content-app/styles.js", "/content-app/main.js"],
"matches": ["https://*/*"],
"match_about_blank": true,
"run_at": "document_idle"
}
],
"web_accessible_resources": [
"assets/fonts/icons.ttf",
"assets/fonts/icons.eot",
"assets/fonts/icons.svg",
"assets/fonts/icons.woff"
],
scss:
$icomoon-font-family: 'icons' !default;
$icon-equalizer: '\e912';
#font-face {
font-family: '#{$icomoon-font-family}';
src: url('chrome-extension://__MSG_##extension_id__/assets/fonts/#{$icomoon-font-family}.eot?64agaf');
src: url('chrome-extension://__MSG_##extension_id__/assets/fonts/#{$icomoon-font-family}.eot?64agaf#iefix') format('embedded-opentype'),
url('chrome-extension://__MSG_##extension_id__/assets/fonts/#{$icomoon-font-family}.ttf?64agaf') format('truetype'),
url('chrome-extension://__MSG_##extension_id__/assets/fonts/#{$icomoon-font-family}.woff') format('woff'),
url('chrome-extension://__MSG_##extension_id__/assets/fonts/#{$icomoon-font-family}.svg?64agaf##{$icomoon-font-family}') format('svg')
format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
[class^='icon-'],
[class*=' icon-'] {
font-family: '#{$icomoon-font-family}' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-equalizer {
&:before {
content: $icon-equalizer;
}
}
If I open chrome url with: chrome-extension://xxxxx/assets/fonts/icons.ttf, the file will be downloaded properly so it seems ok, but when I add some code to my content script like:
<span class="icon-equalizer"></span>
then nothing happens (I can see '' only). Any idea?
Because of many reasons I use shadow-root, and you can find the code from that element:
#shadow-root
<style>
#font-face{font-family:"icons";src:url("chrome-extension://__MSG_##extension_id__/assets/fonts/icons.eot?64agaf");src:url("chrome-extension://__MSG_##extension_id__/assets/fonts/icons.eot?64agaf#iefix") format("embedded-opentype"),url("chrome-extension://__MSG_##extension_id__/assets/fonts/icons.ttf?64agaf") format("truetype"),url("chrome-extension://__MSG_##extension_id__/assets/fonts/icons.woff") format("woff"),url("chrome-extension://__MSG_##extension_id__/assets/fonts/icons.svg?64agaf#icons") format("svg") format("svg");font-weight:normal;font-style:normal;font-display:block}[class^='icon-'],[class*=' icon-']{font-family:"icons" !important;speak:never;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-equalizer:before{content:""}
(...)
</style>