Eigen lettertypen toevoegen aan WooCommerce-pdf-bestanden

Met eigen lettertypen in post- of productexports die met MPDF worden gemaakt, geef je je pdf-bestanden een persoonlijk tintje. Met al onze pdf-plugins voor WooCommerce of WordPress kun je eigen lettertypen toevoegen via een filter hook. We laten zien hoe.

De filters

Om een eigen lettertypebestand te gebruiken, heb je WP-filters nodig. Welk filter precies, hangt af van de plugin die je gebruikt. Hieronder zie je alle configuratiefilters voor onze 4 extensies:

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 Packing Slips
woocommerce_packing_slips_mpdf_config

WordPress Print Posts
wordpress_print_posts_mpdf_config
WordPress PDF Catalog
wordpress_pdf_catalog_mpdf_config

Kopieer afhankelijk van je plugin de filternaam hierboven.

Lettertypebestanden uploaden

Daarna upload je je lettertypebestanden.

1. Open een FTP-programma en maak verbinding met je site
2. Ga naar /wp-content/themes/JOUW-CHILD-THEME/
3. Maak een nieuwe map, bijvoorbeeld “fonts”
4. Upload je lettertypebestanden (TTF) naar die map

Bestanden toevoegen aan de pdf-configuratie

Nu voeg je de namen van de geüploade bestanden toe aan de beschikbare pdf-configuratie. Hieronder een voorbeeld voor onze plugin WooCommerce Print Products.

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);

De eerste configuratieregel voegt je child-themamap toe aan de lettertypemap. De volgende regels noemen de bestandsnamen van de lettertypen (ttf) en hun stijlen. Stijlen die je niet hebt, kun je verwijderen.

Voeg deze code toe aan het bestand functions.php in je child theme. Daarna kun je “myfontname” in pdf’s gebruiken.

Het lettertype in de pdf gebruiken

De laatste stap is de nieuwe lettertypenaam die je hierboven als array-key hebt ingesteld, aan de pdf toe te voegen. Ga daarvoor naar onze geavanceerde instellingen en plak de volgende eigen CSS:

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

Vervang “myfontname” door de naam die je in je functions.php hebt ingesteld.

Ondersteunde plugins

Al onze pdf-plugins ondersteunen eigen lettertypen. De lijst hieronder toont ze allemaal: