{"id":13983,"date":"2023-01-24T12:11:38","date_gmt":"2023-01-24T11:11:38","guid":{"rendered":"https:\/\/www.welaunch.io\/en\/?post_type=faq&p=13983"},"modified":"2025-01-06T19:16:02","modified_gmt":"2025-01-06T18:16:02","slug":"add-custom-fonts-to-woocommerce-pdf-files","status":"publish","type":"faq","link":"https:\/\/www.welaunch.io\/en\/knowledge-base\/faq\/add-custom-fonts-to-woocommerce-pdf-files\/","title":{"rendered":"Add custom Fonts to WooCommerce PDF Files"},"content":{"rendered":"

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.<\/p>\n

The Filters<\/h2>\n

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:<\/p>\n

WooCommerce PDF Catalog\nwoocommerce_pdf_catalog_mpdf_config

WooCommerce Cart PDF
woocommerce_cart_pdf_mpdf_config\n\nWooCommerce Print Products\nwoocommerce_print_products_mpdf_config

WooCommerce PDF Invoices
woocommerce_pdf_invoices_mpdf_config\n
WordPress Packing Slips
woocommerce_packing_slips_mpdf_config
\nWordPress Print Posts\nwordpress_print_posts_mpdf_config\n\nWordPress PDF Catalog\nwordpress_pdf_catalog_mpdf_config\n<\/pre>\n
Depending on the plugin you use, please copy the filter name above.<\/p>\n
Upload Font Files<\/h2>\n
Next you need to upload your font files.<\/p>\n
    \n
  1. Open a FTP program and connect to your site<\/li>\n
  2. Move to \/wp-content\/themes\/YOUR-CHILD-THEME\/<\/li>\n
  3. Create a new folder called “fonts” for example<\/li>\n
  4. Upload your font files (TTF) to that folder<\/li>\n<\/ol>\n
    Add files to the PDF Config<\/h2>\n
    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<\/a>.<\/p>\n
    add_filter('woocommerce_print_products_mpdf_config', function($config) {\n\n    $config['fontDir'][] = get_stylesheet_directory() . '\/fonts\/';\n    $config['fontdata']['myfontname'] = array(\n        'R'     => 'MYFONTNAME_Regular.ttf',\n        'I'     => 'MYFONTNAME_Italic.ttf',\n        'B'     => 'MYFONTNAME_Bold.ttf',\n        'BI'    => 'MYFONTNAME_BoldItalic.ttf',\n    );\n\n    return $config;\n\n}, 20, 1);\n<\/pre>\n
    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.<\/p>\n
    Add this code to your functions.php file inside your child theme. Then you can use “myfontname” inside PDFs.<\/p>\n
    Use the Font in PDF<\/h2>\n
    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:<\/p>\n
    body, table,\nh1,h2,h3,h4,h5,h6 {\n    font-family: \"myfontname\", sans;\n}\n<\/pre>\n
    Make sure you change “myfontname” with the name you set in your functions.php file.<\/p>\n\t
    \n\t\t\t\t\t\t\t\t
    \n\t\t\t\"\"\t\t\t\t\t\t\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\n