Odoo and WkHtmlToPDF: issue with fonts - css

Question

After googling several hours, I still cannot have custom fonts displayed in PDF generated by Odoo. Help much appreciated, please! Here is the complete story.
I created a custom report inheriting account.report_invoice_document. This is needed as invoices are customized to display extra information (like a Harmonized System Codes summary, for example). I was also asked to use a custom font to customize the layout of our invoices.
In this template, I added an inline style sheet and applied a font-face to the whole document:
<style>
#font-face {
font-family: 'My Font';
font-weight: normal;
font-style: normal;
src: url(data:font/opentype;charset=utf-8;base64,d09GRg<!--[ LONG BASE64 STRING ]-->DN6ag4) format('woff'),
url(data:font/truetype;charset=utf-8;base64,AAEAAA<!--[ LONG BASE64 STRING ]-->moOA==) format('truetype');
}
html, body
{
font-size: 8;
font-family: 'My Font';
}
</style>
Tuning the Invoices report to produce HTML, I'm able to get the expected results on screen in my browser (given the font is not installed on my computer running the browser). Pressing the Print button export the same report as a PDF file through wkhtmltopdf I get my invoice with the correct data, but not the right font family nor size.
Things I tested, without success:
use only WOFF
use only TTF
use both WOFF and TTF
direct PDF generation without primarily HTML display on screen
add a .mytest class in style an apply it to specific html tags
Still the same: OK on screen, not as expected as PDF file.
For experimentation, also tried to include Material Icon as follow:
<style>
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url('data:font/truetype;charset=utf-8;base64,AAEA<!--[ LONG BASE64 STRING ]-->ABc=') format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
</style>
and later adding this somewhere in the template.
<span>TEST <i class="material-icons"></i></span>
Same as above: works well on screen and displays "TEST" + a smiling face icon, works partially on PDF and only displays TEST without the face icon.
I'm stuck there. Could someone help?
Thanks.