Vertical Align & Custom font not working for webviewer

<html> @font-face {
font-family: Montserrat-Reg;
src: url(file:///android_asset/Montserrat-Reg.otf);
}<!--font-size: 17;-->

<head>
<style type="text/css">
.auto-style1 {
	border-collapse: collapse;
	border-style: solid;
	border-width: 2px;
}
.auto-style2 {
	border: 2px solid #808080;
	background-color: #E4FFB7;
}
.auto-style3 {
	border: 2px solid #808080;
	background-color: #EFFFD2;
}
.auto-style4 {
	border: 2px solid #808080;
	background-color: #000080;
}
.auto-style6 {
	text-align: center;
	color: #FFFFFF;
}
</style>
</head>
<body>
<table style="height: 102; width: 80%; margin-left: auto; margin-right: auto;" cellpadding="15" align="center" cellspacing="0" class="auto-style1">
<tbody>
<tr>
<th style="width: 47%; text-align: center; vertical-align: middle;" colspan="2" class="auto-style4">
<h1 class="auto-style6">Akash Ditli</h1>
</th>
</tr>
<tr style="height: 17px;">
<td style="height: 17; text-align: center; width: 47%; vertical-align: middle;" class="auto-style2">
<h1>Date Of Payment</h1>
</td>
<td style="height: 17; width: 52%; vertical-align: middle;" class="auto-style3">
<h1 style="text-align: left;">October 11, 2021</h1>
</td>
</tr>
<tr style="height: 17px;">
<td style="height: 17; text-align: center; width: 47%; font-family: Montserrat-Reg; vertical-align: middle;" class="auto-style2">
<h1>Subjects Paid For</h1>
</td>
<td style="height: 17; width: 52%; vertical-align: middle;" class="auto-style3">
<h1><span style="color: #000000;">Maths, Phy, Chem</span></h1>
</td>
</tr>
<tr style="height: 17px;">
<td style="height: 17; text-align: center; width: 47%; vertical-align: middle;" class="auto-style2">
<h1>Total Fees Paid</h1>
</td>
<td style="height: 17; width: 52%; vertical-align: middle;" class="auto-style3">
<h1><span style="color: #ff0000;">₹ 12000</span></h1>
</td>
</tr>
<tr style="height: 17px;">
<td style="height: 17; text-align: center; width: 47%; vertical-align: middle;" class="auto-style2">
<h1>Dsicount Given</h1>
</td>
<td style="height: 17; width: 52%; vertical-align: middle;" class="auto-style3">
<h1><span style="color: #ff0000;">₹ 50</span></h1>
</td>
</tr>
<tr style="height: 17px;">
<td style="height: 17; text-align: center; width: 47%; vertical-align: middle;" class="auto-style2">
<h1>Enrollment Fee</h1>
</td>
<td style="height: 17; width: 52%; vertical-align: middle;" class="auto-style3">
<h1><span style="color: #ff0000;">₹ 800</span></h1>
</td>
</tr>
<tr style="height: 17px;">
<td style="height: 17; text-align: center; width: 47%; vertical-align: middle;" class="auto-style2">
<h1>Installment Amount&nbsp;</h1>
</td>
<td style="height: 17; width: 52%; vertical-align: middle;" class="auto-style3">
<h1><span style="color: #ff0000;">₹ 200</span></h1>
</td>
</tr>
</tbody></body>
</table></html>

hey, this is my code , i have used the load html block of webviewer, it displays a table, but it does’t use the custom font style as put in the code, and the vertical algin doesnt seem to work as it doesn’t perfectly align the contents vertically

1 Like

Same issue

1 Like