node-html-pdf
node-html-pdf copied to clipboard
marcbachmann
unable to apply custom font
...........................server.js..........................................
var accessPath = path.join('file://', __dirname, '/public')
var options={ quality:"75", formaat:"A4", base:accessPath }; pdf.create(pdfTemplate(data),options).toBuffer((err,buffer)=>{ if(err){ res.status(400).send(Promise.reject()) }else{
res.status(200).send(buffer);
}
.................................pdf Template.js..................................................... module.exports=(data)=>{ const startdate=data.Starts.split(" ")[0]; const enddate=data.Ends.split(" ")[0]; const description=(data.Description.length > 200 || data.Description.length ===0)?data.Title :data.Description; return `
<title>Document</title>
<style>
@font-face {
font-family: 'Poppins-ExtraBold';
src: url('\Poppins-Thin.ttf');
}
@font-face {
font-family: PoppinsThin;
src: url("\Poppins-Thin.ttf");
}
@font-face {
font-family: PoppinsSemiBold;
src: url("/Poppins-SemiBold.ttf");
}
@font-face {
font-family: Poppins-ExtraLight;
src: url("/Poppins-ExtraLight.ttf");
}
*{
margin: 0;
padding: 0;
text-align: center;
}
.center {
max-width: 25em;
height: 45em;
margin:0 auto;
position: relative;
border: 2px solid #ec2d30;
display: flex;
justify-content: center;
align-items: center;
}
#rectangle{
height: 100%;
width: 100%;
}
#group {
width: 100%;
position: absolute;
bottom: 0;
right: 0;
z-index: -1;
}
#cupom{
z-index: 2;
position: absolute;
width: 80%;
top: 28%;
left: 10%;
}
#logo{
z-index: 2;
position: absolute;
width: 50%;
top: 10%;
left: 22%;
}
#main{
width:100%;
position: absolute;
top: 32%;
display: -webkit-flex;
-webkit-flex-flow: column;
webkit-justify-content: center;
-webkit-align-items: center;
-webkit-align-content: center;
}
#description{
width: 60%;
overflow-wrap: break-word;
font-size: 25px;
color:black;
font-family: 'Poppins-ExtraBold'!important;
font-weight:700!important;
}
#startend{
margin-top: 20px;
width: 100%;
color:#B7B7B8;
font-weight: lighter;
font-size: 16px;
font-family: PoppinsThin;
font-weight: 400px !important;
}
#bottom{
position: absolute;
display:-webkit-flex;
-webkit-flex-flow: row;
left: 38px;
-webkit-align-items: center;
bottom: 120px;
width: 100%;
}
#code{
min-width:40%;
border:2px solid #ec2d30;
font-family: PoppinsSemiBold;
border-radius: 50px;
padding: 5px;
color: #d82a3c;
font-size: 1.0em;
font-weight: bold;
margin-right: 4px;
overflow-wrap:break-word;
}
</style>
</head>
<body>
<div class="center">
<img src="https://i.ibb.co/4Zfn9gd/Rectangle.png" id="rectangle"/>
<img id="group" src="https://i.ibb.co/mXc2H2H/Group.png" />
<img id="cupom" src="https://i.ibb.co/Y28VBds/CUPOM.png" />
<img id="logo" src="${data.logoUrl}"/>
<div id="main">
<div id="description">${description}</div>
<div id="startend">12/03/2021 - 18/07/2021</div>
</div>
<div id="bottom">
<div id="code">
${data.Code}
</div>
<div style="color: #B7B7B8;font-family: Poppins-ExtraLight;font-size: 12px;width: 25%;">
Copie e vá para a loja
</div>
</div>
</div>
</body>
</html>
`
}
address to your font files are not ok you have to think that the template is serve on a web server and addres it to it
1- Use Google web fonts helper to download web font files. (https://google-webfonts-helper.herokuapp.com/fonts) 2- Include all fonts you need in your CSS file. If you are having issues including your CSS files, a quick workaround is to use styling inside your
tag. 3- Remove all lines with font's src other than woff and woff2In my case I did:
`
/* inter-regular - latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
src: local(''),
url('<%= base %>/fonts/inter-v3-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('<%= base %>/fonts/inter-v3-latin-regular.woff') format('woff'), /* Modern Browsers */
}
/* inter-500 - latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
src: local(''),
url('<%= base %>/fonts/inter-v3-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
url('<%= base %>/fonts/inter-v3-latin-500.woff') format('woff'), /* Modern Browsers */
}
/* inter-600 - latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
src: local(''),
url('<%= base %>/fonts/inter-v3-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
url('<%= base %>/fonts/inter-v3-latin-600.woff') format('woff'), /* Modern Browsers */
}
/* inter-700 - latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
src: local(''),
url('<%= base %>/fonts/inter-v3-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('<%= base %>/fonts/inter-v3-latin-700.woff') format('woff'), /* Modern Browsers */
}
/* inter-800 - latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
src: local(''),
url('<%= base %>/fonts/inter-v3-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
url('<%= base %>/fonts/inter-v3-latin-800.woff') format('woff'), /* Modern Browsers */
}
/* inter-900 - latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 900;
src: local(''),
url('<%= base %>/fonts/inter-v3-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
url('<%= base %>/fonts/inter-v3-latin-900.woff') format('woff'), /* Modern Browsers */
}
`
