From an existing Pro Reports template I created a custom one. I linked the Dosis Google font to the head of my template and referenced it in the CSS.
All looked good in the preview, but in the sent .pdf all the headers including table headers were back to Lato. Only the body text was the Dosis font.
I have played about a bit with adding some custom selectors and adding !important, but I can’t seem to stop it printing Lato.
Any ideas?
Hey David, it’s a very strange issue. Are you able to share your custom report code here so I can try to duplicate the problem in my test setup?
Thanks Bodgan,
This has been more of a “fiddle” document to see what breaks so I am not sure the state of this one, but here is the code.
<?php
/*
Template Name: David's Custom Template
Description: Custom template for the MainWP.
Version: 1.0
Author: David Waumsley
Screenshot URI: ../wp-content/uploads/2020/01/template-my-custom.png
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
} // Exit if accessed directly
$config_tokens = array(
0 => '[hide-if-empty]',
1 => '', // show report data
2 => '[hide-section-data]'
);
$default_config = array(
'wp-update' => 0,
'plugins-updates' => 0,
'themes-updates' => 0,
'uptime' => 0,
'security' => 0,
'backups' => 0,
'ga' => 0,
'matomo' => 0,
'pagespeed' => 0,
'maintenance' => 0
);
$showhide_values = @json_decode($report->showhide_sections, 1);
if (!is_array($showhide_values))
$showhide_values = array();
$showhide_values = array_merge($default_config, $showhide_values);
?>
<html>
<head>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Dosis&display=swap');
@page { margin:0px; }
.page-break { page-break-after: always; }
body {
font-size: 16px;
font-family: 'Dosis', sans-serif;
}
a {
text-decoration: none;
}
p {
font-family: 'Dosis', sans-serif!important;
}
table {
border:0px;
width:100%;
}
table th {
padding: 10px;
font-family: 'Dosis', sans-serif!important;
color: #fff;
}
table td {
padding:10px;
background: #fafafa;
border-bottom: 1px solid #eee;
font-family: 'Dosis', sans-serif;
}
table tr:nth-child(even) td {
background: #fff;
}
table.left-th tr td:nth-of-type(2) {
text-align: right;
}
h1 {
font-family: 'Dosis', sans-serif !important;
font-size:38px;
text-align:center;
}
h2 {
font-family: 'Dosis', sans-serif!important;
font-size:32px;
margin-bottom: 45px;
text-align:center;
}
#ga-chart img {
width: 100%;
}
header {
padding: 40px;
background-color:#2D192A;
text-align: left;
}
<!-- My CSS -->
H1.report-heading
{
text-transform: uppercase;
color: #FFFFFF;
font-weight: 600;
font-size: 35px;
background-color: #FAFAFA;
padding: 23px;
color: #2D192A;
font-family: 'Dosis', sans-serif!important;
}
.date-range
{
text-align: center;
font-size: 19px;
color: #2D192A;
padding: 20px;
font-family: 'Dosis', sans-serif!important;
}
MAIN H2
{
color: #2D192A;
font-weight: bold;
font-family: 'Dosis', sans-serif!important;
}
TD SPAN
{
font-weight: 400 !important;
color: #2D192A !important;
}
<!-- My CSS End -->
</style>
</head>
<body>
<header>
<img src="[logo.url]" alt="logo" style="width:156px;height:auto;"/>
</header>
<!-- End of Header -->
<main>
<div style="margin:0;">
<div style="padding:45px;">
<h1>WEBSITE CARE REPORT</h1>
<h2 class="report-heading"> <?php echo esc_html( $heading ); ?></h2>
<div class="date-range">[report.daterange]</div>
</div>
<div style="width:100%;text-align:center;margin:20px 0 0 0;">
<img src="[header.image.url]"/>
</div>
<div class="page-break"></div>
<div style="padding:0px;">
<div style="padding:60px;">
<p><?php echo MainWP_Pro_Reports_Utility::esc_content( $intro ); ?></p>
</div>
</div>
<div class="page-break"></div>
<!-- Overview section -->
<div style="padding:0px;">
<div style="padding:60px;">
<h2>Overview</h2>
<table cellspacing="0" class="left-th">
<thead>
<tr>
<th><?php echo __( 'Date Range:', 'mainwp-pro-reports-extension' ); ?> [report.daterange]</th>
<th></th>
</tr>
</thead>
<tbody>
<tr><td><?php echo __( 'Website', 'mainwp-pro-reports-extension' ); ?></td><td><a href="[client.site.url]" target="_blank">[client.site.url]</a></td></tr>
[config-section-data]
<?php echo $config_tokens[$showhide_values['uptime']]; ?>
[remove-if-empty]
<tr><td><?php echo __( 'Website Uptime', 'mainwp-pro-reports-extension' ); ?></td><td>[aum.alltimeuptimeratio]</td></tr>
[/remove-if-empty]
[/config-section-data]
[config-section-data]
<?php echo $config_tokens[$showhide_values['security']]; ?>
<tr><td>Security Scans </td><td>Daily</td></tr>
[/config-section-data]
[config-section-data]
<?php echo $config_tokens[$showhide_values['plugins-updates']]; ?>
[remove-if-empty]
<tr><td><?php echo __( 'Plugins Updated', 'mainwp-pro-reports-extension' ); ?></td><td>[plugin.updated.count]</td></tr>
[/remove-if-empty]
[/config-section-data]
[config-section-data]
<?php echo $config_tokens[$showhide_values['themes-updates']]; ?>
[remove-if-empty]
<tr><td><?php echo __( 'Themes Updated', 'mainwp-pro-reports-extension' ); ?></td><td>[theme.updated.count]</td></tr>
[/remove-if-empty]
[/config-section-data]
[config-section-data]
<?php echo $config_tokens[$showhide_values['backups']]; ?>
[remove-if-empty]
<tr><td><?php echo __( 'Backups Created', 'mainwp-pro-reports-extension' ); ?></td><td>[backup.created.count]</td></tr>
[/remove-if-empty]
[/config-section-data]
[config-section-data]
<?php echo $config_tokens[$showhide_values['maintenance']]; ?>
[remove-if-empty]
<tr><td><?php echo __( 'Database Optimizations', 'mainwp-pro-reports-extension' ); ?></td><td>[maintenance.process.count]</td></tr>
[/remove-if-empty]
[/config-section-data]
[config-section-data]
<?php echo $config_tokens[$showhide_values['pagespeed']]; ?>
[remove-if-empty]
<tr><td><?php echo __( 'Average Pagespeed', 'mainwp-pro-reports-extension' ); ?></td><td>[pagespeed.average.desktop] / 100</td></tr>
[/remove-if-empty]
[/config-section-data]
</tbody>
</table>
</div>
</div>
<!-- Updates Data -->
<?php do_action( 'mainwp_pro_reports_before_updates' ); ?>
[config-section-data]
<?php echo $config_tokens[$showhide_values['wp-update']]; ?>
<div class="page-break"></div>
<div style="padding:30px;">
<div style="padding:30px;">
<h2><?php echo __( 'WordPress Updates', 'mainwp-pro-reports-extension' ); ?></h2>
<table cellspacing="0">
<thead>
<tr>
<th><?php echo __( 'Updated on', 'mainwp-pro-reports-extension' ); ?></th>
<th><?php echo __( 'Old Version', 'mainwp-pro-reports-extension' ); ?></th>
<th><?php echo __( 'New Version', 'mainwp-pro-reports-extension' ); ?></th>
</tr>
</thead>
<tbody>
[section.wordpress.updated]
<tr>
<td>[wordpress.updated.date]</td>
<td><span style="font-weight:bold;<?php echo esc_html( $accent_color ); ?>">[wordpress.old.version]</span></td>
<td><span style="font-weight:bold;<?php echo esc_html( $accent_color ); ?>">[wordpress.current.version]</span></td>
</tr>
[/section.wordpress.updated]
</tbody>
</table>
</div>
</div>
[/config-section-data]
[config-section-data]
<?php echo $config_tokens[$showhide_values['plugins-updates']]; ?>
<div class="page-break"></div>
<div style="padding:30px;">
<div style="padding:30px;">
<h2><?php echo __( 'Plugins Updates', 'mainwp-pro-reports-extension' ); ?></h2>
<table cellspacing="0">
<thead>
<tr>
<th><?php echo __( 'Updated on', 'mainwp-pro-reports-extension' ); ?></th>
<th><?php echo __( 'Plugin', 'mainwp-pro-reports-extension' ); ?></th>
<th><?php echo __( 'Version', 'mainwp-pro-reports-extension' ); ?></th>
</tr>
</thead>
<tbody>
[section.plugins.updated]
<tr>
<td>[plugin.updated.date]</td>
<td><span style="font-weight:bold;<?php echo esc_html($accent_color); ?>">[plugin.name]</span></td>
<td>From [plugin.old.version] to <span style="font-weight:bold;<?php echo esc_html($accent_color); ?>">[plugin.current.version]</span></td>
</tr>
[/section.plugins.updated]
</tbody>
</table>
</div>
</div>
[/config-section-data]
[config-section-data]
<?php echo $config_tokens[$showhide_values['themes-updates']]; ?>
<div class="page-break"></div>
<div style="padding:30px;">
<div style="padding:30px;">
<h2><?php echo __( 'Themes Updates', 'mainwp-pro-reports-extension' ); ?></h2>
<table cellspacing="0">
<thead>
<tr>
<th><?php echo __( 'Updated on', 'mainwp-pro-reports-extension' ); ?></th>
<th><?php echo __( 'Theme', 'mainwp-pro-reports-extension' ); ?></th>
<th><?php echo __( 'Version', 'mainwp-pro-reports-extension' ); ?></th>
</tr>
</thead>
<tbody>
[section.themes.updated]
<tr>
<td>[theme.updated.date] </td>
<td><span style="font-weight:bold;<?php echo esc_html( $accent_color ); ?>">[theme.name]</span></td>
<td>From [theme.old.version] to <span style="font-weight:bold;<?php echo esc_html( $accent_color ); ?>">[theme.current.version]</span></td>
</tr>
[/section.themes.updated]
</tbody>
</table>
</div>
</div>
[/config-section-data]
<?php do_action( 'mainwp_pro_reports_after_updates' ); ?>
<!-- End Updates Data -->
<!-- Backups Data -->
<?php if ( is_plugin_active( 'mainwp-backwpup-extension/mainwp-backwpup-extension.php' )
|| is_plugin_active( 'mainwp-backupwordpress-extension/mainwp-backupwordpress-extension.php' )
|| is_plugin_active( 'mainwp-buddy-extension/mainwp-buddy-extension.php' )
|| is_plugin_active( 'mainwp-updraftplus-extension/mainwp-updraftplus-extension.php' )
|| is_plugin_active( 'mainwp-time-capsule-extension/mainwp-time-capsule-extension.php' )
) : ?>
[config-section-data]
<?php echo $config_tokens[$showhide_values['backups']]; ?>
<div class="page-break"></div>
<div style="padding:30px;">
<div style="padding:30px;">
<h2><?php echo __( 'Backups', 'mainwp-pro-reports-extension' ); ?></h2>
<?php do_action( 'mainwp_pro_reports_before_backups' ); ?>
<table cellspacing="0">
<thead>
<tr>
<th><?php echo __( 'Backup Date', 'mainwp-pro-reports-extension' ); ?></th>
<th><?php echo __( 'Backup Type', 'mainwp-pro-reports-extension' ); ?></th>
</tr>
</thead>
<tbody>
[section.backups.created]
<tr>
<td>[backup.created.date]</td>
<td><span style="font-weight:bold;<?php echo esc_html($accent_color); ?>">[backup.created.type]</span></td>
</tr>
[/section.backups.created]
</tbody>
</table>
<?php do_action( 'mainwp_pro_reports_after_backups' ); ?>
</div>
</div>
[/config-section-data]
<?php endif; ?>
<!-- End Backups Data -->
<!-- Maintenance Data -->
<?php if ( is_plugin_active( 'mainwp-maintenance-extension/mainwp-maintenance-extension.php') ) : ?>
[config-section-data]
<?php echo $config_tokens[$showhide_values['maintenance']]; ?>
<div class="page-break"></div>
<div style="padding:30px;">
<div style="padding:30px;">
<h2><?php echo __( 'Maintenance', 'mainwp-pro-reports-extension' ); ?></h2>
<?php do_action( 'mainwp_pro_reports_before_maintenance' ); ?>
<table cellspacing="0">
<thead>
<tr>
<th><?php echo __( 'Date', 'mainwp-pro-reports-extension' ); ?></th>
<th><?php echo __( 'Details', 'mainwp-pro-reports-extension' ); ?></th>
</tr>
</thead>
<tbody>
[section.maintenance.process]
<tr>
<td>[maintenance.process.date]</td>
<td>WordPress database optimized. Junk and spam comments removed</td>
</tr>
[/section.maintenance.process]
</tbody>
</table>
<?php do_action( 'mainwp_pro_reports_after_maintenance' ); ?>
</div>
</div>
[/config-section-data]
<?php endif; ?>
<!-- End Maintenance Data -->
<div class="page-break"></div>
<div style="padding:30px;">
<div style="padding:30px;">
<p><?php echo MainWP_Pro_Reports_Utility::esc_content( $outro ); ?></p>
</div>
</div>
</div>
</main>
<footer></footer>
</body>
</html>
Did you get a chance to look at this template yet? Is it me being stupid?
Hi David, I am working on this right now. I will get back to you as soon as I find something.
Hi again, I am still not 100% sure, but I think that the problem comes from the DOMPDF php library that extension uses for generating PDF files. It could be that this library is forcing default font for Headings for some reason, but I found a good workaround.
I think that the best approach is to simply replace <h1> and <h2> tags with <div> and use custom CSS rule to define font-size. For example, this report, I replaced the
<h1>WEBSITE CARE REPORT</h1>
with
<div class="my-h1">WEBSITE CARE REPORT</div>
and just use custom CSS to style the element
.my-h1 {
font-family: 'Dosis', sans-serif;
font-size: 38px;
text-align:center;
}
Thank you so much. I really appreciate this.
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.