I use pdf-creator-node package to generate PDF from HTML. But, when its displayed, my text are always shown italic even though I do not set it to font-style:italic. I tried to set with font-style:normal !important; to my body and HTML, but it still didn't work. Anyone know to solve this problem? Thank you sir, appreciate it very much.
EDIT:
This is my css
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500&family=Sacramento&display=swap" rel="stylesheet">
<style>
body,
html {
margin: 0;
padding: 0;
height: 100%;
font-family: 'Playfair Display', serif;
font-style: normal !important;
}
body {
color: black;
display: table;
font-size: 24px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
}
.container {
width: 900px;
display: table-cell;
vertical-align: middle;
background-image: linear-gradient(45deg, #f4f4ff, #eee);
padding: 3rem;
position: relative;
}
.container img.bg-sertifikat {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
}
.container .front{
position: relative;
z-index: 1;
}
.logo {
color: #5A8DEE;
margin-bottom: 3rem;
}
.marquee {
color: #000;
font-size: 48px;
margin: 20px;
font-weight: bold;
}
.assignment {
margin: 20px;
}
.person {
border-bottom: 1px solid #000000;
font-size: 3rem;
padding-bottom: .5rem;
font-family: 'Sacramento', cursive;
font-weight: normal;
}
.class-name {
margin-top: 2rem;
font-weight: bold;
font-size: 1rem;
font-weight: 400;
}
.info {
margin-top: 3rem;
font-family: 'Playfair Display', serif;
padding: 1rem 5rem;
}
.info .date-wrapper{
float: left;
margin-top: 1rem;
}
.info .signature-wrapper{
float: right;
}
.info .date-wrapper,
.info .signature-wrapper {
display: flex;
flex-direction: column;
font-size: 1rem;
}
.info .date-wrapper div:nth-child(1),
.info .signature-wrapper img {
border-bottom: 1px solid #000;
padding-bottom: .5rem;
}
.info .date-wrapper div {
margin: .2rem 0;
}
.info .signature-wrapper div {
margin: .2rem 0;
}
</style>
</head>
Inside your stylesheet, import Google Open Sans font
Then, use this as your primary font-family option