[SOLVED] Issues with embedded icon fonts as base64

I need to embed my font file in-line which contains the 31-ish icons that I use for my app.

As webview only takes a single html string to render the view, I cannot load external files and therefore decided to base 64 encode my font file. The icon font was generated using icomoon, leading to the following font-face definition.

@font-face {
    font-family: 'icons';
    src:  url('icons/icons.eot?nyqxuh');
    src:  url('icons/icons.eot?nyqxuh#iefix') format('embedded-opentype'),
        url('icons/icons.ttf?nyqxuh') format('truetype'),
        url('icons/icons.woff?nyqxuh') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

All icons appear as desired (in a web-browser) using the original files.

Then after this, I picked up the truetype font, and ran it through Font Squirrel WebFont generator, to with base64encode enabled, now my css definitions look like this.

@font-face {
    font-family: 'icons';
    src: 
        url(data:font/truetype;charset=utf-8;base64,AAEAAAAQAQAABAAAR....) format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

The icons no longer render however and the 'missing icon' appears instead.

Here is the complete base64 for reference.

url(data:font/truetype;charset=utf-8;base64,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) format('truetype');

PS: I am using the edge back end for webview, so I am quite sure it should work.