I have the code below that transforms an html string into a pdf, the problem is when loading the css fonts (which are within the html code), the script cannot load the fonts when generating the pdf, I didn’t find anything when reading the documentation , pyppeteer can’t read css?
the sources folder is in the same directory as my app.py file
import asyncio
from pyppeteer import launch
async def generate_pdf(html_content, pdf_path):
browser = await launch(executablePath="C:/Users/GUILHERME/Documents/chrome-win/chrome-win/chrome.exe")
page = await browser.newPage()
await page.setContent(html_content)
await page.pdf({'path': pdf_path, 'format': 'A4'})
await browser.close()
async def main():
html = """
<html>
<head>
<meta charset="utf-8">
<title>IBPJ</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description">
<meta name="author">
<meta name="robots" content="noindex,nofollow">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style>
h3#SAC {
font-family: "Santander Text W05 Bold" !important;
}
@font-face {
font-family: "Santander Text W05 Regular";
src: url(WebFonts/Santander/Santander.otf);
src: url(WebFonts/Santander/Santander.otf) format("otf"),url(WebFonts/Santander/Santander.woff2) format("woff2"),url(WebFonts/Santander/Santander.woff) format("woff"),url(WebFonts/Santander/Santander.tff) format("truetype")
}
</style>
</head>
<body class="print" style="display: block;">
<div class="container-fluid print ">
<div class="ng-star-inserted">
<div class="ng-star-inserted">
<div class="ng-star-inserted"><ibe-billets-receipts>
<div>
<div class="ng-star-inserted">
<div class="print-container" style="margin-bottom: -70;">
<div
class="row d-flex justify-content-center align-items-center pb-3 ng-star-inserted">
<div class="col-6" style="margin-top: 10px;"><img width="160"
alt="santander-logo"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhE">
</div>
</div><!----><!---->
<div class="row space-t">
<div class="col-6">
<div class="row" style="margin-top: -20;"><label
class="col-6">xxxx</label><label
class="col-3 font-weight-bold">R$ xxxx</label>
</div>
</div>
</div><br>
<div class="row space-t">
<div class="col-1">
<div class="row">
<div class="space-t space-l"><span
class="alert-icon std-ic_circle_attention_fill space-r align-self-center"></span>
</div>
</div>
</div>
<div class="col-11">
</div>
<hr>
<div class="row space-t">
<div class="col-6">
<p class="text-right" style="font-size: 10px !important;"> xxxx</p>
</div>
<div class="col-6">
<div class="bold" style="font-size: 10px !important;">xxxx
</div>
</div>
</div>
<div class="row space-t">
<div class="col-6" style="margin-bottom: 10px;">
<p class="text-right" style="font-size: 10px !important;">
xxxx</p>
</div>
<div class="col-6">
<div class="bold" style="font-size: 10px !important;">
xxxx</div>
</div>
</div><!---->
</div>
</div><!---->
<div class="row space-t" style="margin-bottom: 20px;">
<div class="col-5 text-left"><button id="returnDetailBtn" type="button"
ripple="" class="btn btn-secondary">xxxx</button></div>
<div class="col-7 text-right">
<div class="ibe-toolbar">
<div><span name="print" dssicon="" class="dss-icon-print"
aria-hidden="true"
role="presentation"></span><a>xxxx</a></div>
</div>
<div class="ibe-toolbar">
<div><span name="email" dssicon="" class="dss-icon-email"
aria-hidden="true" role="presentation"></span><a>xxxx</a></div>
</div>
<div><ibe-toolbar-component>
<div class="ibe-toolbar"><!----><!----><!----><!----></div>
<ibe-dialog
class="text-left hide-print email-dialog ng-tns-c27-10 ng-star-inserted"><!----><!----></ibe-dialog>
</ibe-toolbar-component></div>
<div class="ibe-toolbar">
<div><span name="document-pdf" dssicon=""
class="dss-icon-document-pdf" aria-hidden="true"
role="presentation"></span><a>xxxx</a></div>
</div>
</div>
</div>
<div class="ng-star-inserted" style="margin-left: 40px;">
<hr><ibe-comprovante-component>
<div class="row">
<div class="col-6">
<h3 class="bold-head"
style="font-weight: bold !important; font-size: 20px !important;" id="SAC">
xxxx</h3>
</div>
<div class="col-6 atendimento">
<h3 class="bold-head float-left"
style="font-weight: bold !important; font-size: 20px !important;" id="SAC">
SAC
</h3><span class="align-baseline"
style="line-height: 42px; font-size: 10px !important;">-
xxxx</span>
</div>
</div>
<div class="row">
<div class="col-6">
<p style="font-size: 10px !important; margin-top: -10px;">xxxx</p>
</div>
<div class="col-6" style="margin-bottom: 15px;">
<p style="font-size: 10px !important; ">xxxx</p>
</div>
</div>
<div class="row">
<div class="col-6">
<p style="font-size: 10px !important; margin-top: -30px;">xxxx</p>
</div>
<div class="col-6" >
<p style="font-size: 10px !important; ">xxxx</p>
</div>
</div>
<div class="row">
<div class="col-6">
<p style="font-size: 10px !important; margin-top: -35px;">xxxx</p>
</div>
<div class="col-6 atendimento">
<h3 class="bold-head float-left"
style="font-size:18px !important; font-weight: bold;" id="SAC">
Ouvidoria</h3>
<span class="align-baseline"
style="line-height: 42px; font-size: 15px !important; font-size: 10px !important;">-
xxxx</span>
</div>
</div>
<div class="row">
<div class="col-6"> </div>
<div class="col-6">
<p style="font-size: 10px !important;">xxxx</p>
</div>
</div>
<div class="row">
<div class="col-6"> </div>
<div class="col-6">
<p style="font-size: 10px !important; margin-top: -15px;">xxxx</p>
</div>
</div>
</ibe-comprovante-component>
</div><!----><!---->
</div>
</ibe-billets-receipts></div><!---->
</div>
</div><!---->
</div>
<button class="btn btn-primary btn-print d-print-none" onclick="printContent()">Imprimir</button>
</body>
</html>
"""
await generate_pdf(html, 'teste.pdf')
asyncio.run(main())I didn’t put my entire code here because it’s too long, but the part that matters is my @font-face
If I run ONLY THE HTML SCRIPT, the font is recognized, but within my python code the fonts are not recognized