I have been diligently following various tutorials on incorporating a webfont into my Chrome extension, but unfortunately, none of them seem to be working for me. Despite all my efforts, the font remains unchanged and still appears as the default ugly font.
I downloaded the desired font as a zip file () and saved Raleway-Regular.ttf under assets/fonts/
In addition, I made sure to add the font file to the list of web accessible resources:
"web_accessible_resources": [
"assets/fonts/Raleway-Regular.ttf"
]
Within the style.css file, I included the following code at the top:
@font-face {
font-family: 'UniqueNameFont';
font-style: normal;
font-weight: 700;
src: url('chrome-extension://<id_hidden>/assets/fonts/Raleway-Regular.ttf');
}
* {
font-family: 'UniqueNameFont';
box-sizing: border-box;
}
I have double-checked the path to the file and ensured that there are no error messages in the console log.
However, despite successfully styling other elements, the font face seems unaffected by these changes within the shadow dom of my extension. Could dynamically adding content be the cause of this issue, even though other styles are applied correctly?
I also experimented with using the @import function provided by Google Fonts and observed that the file was loaded in the Networks tab, yet inexplicably, it had no impact on the actual font display.