Menu
I have Chrome Packaged App written in AngularDart and trying to get some external icons to make the app look nicer, but couldn't find any example over the net. Tried many things along with the below workaround but couldn't get it working. I am adding the @font-face to my css as below :
@font-face {
font-family: 'Icons';
src: url(data:font/ttf;charset=utf-8;base64,<ttf file encoded to base64>) format('truetype'),
url(data:font/woff;charset=utf-8;base64,<woff file encoded to base64>) format('woff'),
url(data:font/svg;charset=utf-8;base64,<svg file encoded to base64>) format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'Icons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-uniF085:before {
content: "\f085";
}
I am trying to avoid CSP (content security policy) issues by converting my icon files: .ttf, .woff, .svg, .eot to base64 and embedding them into my controller CSS but when I run the application all I see in the chromium is the default square box instead of the icon I am referencing (); no error on the console or on the chromium browser. I am wondering if anyone got custom or external icons / fonts working with the Chrome Packaged apps. Please let me know if there is a workaround in anyway.
414
To add a custom font, a user should put the font file with the extension.TTF into the Chrome Operating System font folder. However, to place the custom font into the proper directory, the user should use a command-line interface or CLI while working in the Developer mode.
To find the full list of custom fonts available for use in Power Apps there are a couple of techniques you can use. The fastest way is to search for ‘Font Settings’ in your Windows search bar. This will open up the Fonts menu. You can try any font name from this list to see if it works.
In this tutorial, you will try out examples of loading fonts onto your website. You will use the font stack, a rank ordering of fonts based on availability, to use fonts that may be installed on the user’s device. Then, you will use a font-hosting service, Google Fonts, to find, select, and load custom fonts onto your page.
The Chrome Apps security model disallows external content in iframes and the use of inline scripting and eval (). You can override these restrictions, but your external content must be isolated from the app.
well after some tries, I see the issue here is not embedding the the files into the component, but actually getting the font-face work inside the shadowDOM which doesn't seem to happen, once I disable shadowDOM for my component it can use the global styles and the icons work fine as base64 encoded, but off course disabling shadowDOM masses up the whole component page design which I would need to refactor. I still think there should be a way to use font-face in shadowDOM.
160
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
