Add custom Fonts to WooCommerce PDF Files

Viewed: 22

Using custom fonts in MPDF generated post or product exports give your PDF files a personal touch. All our PDF plugins for WooCommerce or WordPress allows you to add custom fonts via a filter hook functionality. We show you how.

The Filters

In order to render a custom font file, you need to use WP filters. What exact filter you have to use depends on the plugin you use. Below you see all config filters for our 4 extensions:

WooCommerce PDF Catalog
woocommerce_pdf_catalog_mpdf_config

WooCommerce Cart PDF
woocommerce_cart_pdf_mpdf_config WooCommerce Print Products woocommerce_print_products_mpdf_config

WooCommerce PDF Invoices
woocommerce_pdf_invoices_mpdf_config WordPress Print Posts wordpress_print_posts_mpdf_config WordPress PDF Catalog wordpress_pdf_catalog_mpdf_config

Depending on the plugin you use, please copy the filter name above.

Upload Font Files

Next you need to upload your font files.

  1. Open a FTP program and connect to your site
  2. Move to /wp-content/themes/YOUR-CHILD-THEME/
  3. Create a new folder called “fonts” for example
  4. Upload your font files (TTF) to that folder

Add files to the PDF Config

Now you have to add these added PDF file names to the available PDF configuration. Below is an example for our WooCommerce print products plugin.

add_filter('woocommerce_print_products_mpdf_config', function($config) {

    $config['fontDir'][] = get_stylesheet_directory() . '/fonts/';
    $config['fontdata']['myfontname'] = array(
        'R'     => 'MYFONTNAME_Regular.ttf',
        'I'     => 'MYFONTNAME_Italic.ttf',
        'B'     => 'MYFONTNAME_Bold.ttf',
        'BI'    => 'MYFONTNAME_BoldItalic.ttf',
    );

    return $config;

}, 20, 1);

The first config line will add your child theme folder to the fonts directory. The next lines will list the font file names (ttf) and their styles. You can remove styles if you not have them.

Add this code to your functions.php file inside your child theme. Then you can use “myfontname” inside PDFs.

Use the Font in PDF

Last step is to add the new font name you defined in the array key above to the PDF. To do this, go into our advanced settings. Then past the following custom CSS:

body, table,
h1,h2,h3,h4,h5,h6 {
    font-family: "myfontname", sans;
}

Make sure you change “myfontname” with the name you set in your functions.php file.

Supported Plugins

All our PDF plugins support custom fonts. The list below shows all:

-34%
$18.00

Export your blog posts as PDF with ease. Give your readers the opportunity to read your blog offline or printed. Complete export or just post categories – you can choose.

WooCommerce Plugins

WooCommerce Cart to PDF

$39.00

Let your customers export their WooCommerce cart with our unique plugin. Set a custom cover, add additional texts before or after the cart items or hide / show cart item data with ease.

$49.00

Automatically create PDF Invoices for your WooCommerce Order with our plugin. Attach invoices to order emails, show in order details or on the thank you page. And the best? The invoice data, layout and everything is fully customizable.

-20%
$39.00

Offer your users an option to read your articles offline. Export WordPress posts & pages to PDF, Word or Print with ease.

$49.00

Transform a single WooCommerce product page into an eye-catching PDF leaflet ready for instant download. Export single products easily as PDF, Word or Print. Choose what you want to show and who should be able to see the export buttons.

$59.00

With our WooCommerce PDF Catalog plugin you are able to export your complete Shop as a PDF. Export full or just product categories – you can decide. Add a cover image, show a table of contents and customize the layout just as you like.

Leave a Reply

Your email address will not be published. Required fields are marked *