Aggiungere font personalizzati ai file PDF di WooCommerce

Usare font personalizzati negli export di articoli o prodotti generati con MPDF dà un tocco personale ai tuoi file PDF. Tutti i nostri plugin PDF per WooCommerce o WordPress permettono di aggiungere font personalizzati tramite un filter hook. Ti mostriamo come.

I filtri

Per usare un file di font personalizzato devi usare i filtri di WordPress. Il filtro esatto dipende dal plugin che usi. Qui sotto trovi tutti i filtri di configurazione per le nostre 4 estensioni:

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

A seconda del plugin che usi, copia il nome del filtro qui sopra.

Caricare i file dei font

Poi devi caricare i file dei font.

1. Apri un programma FTP e collegati al tuo sito
2. Vai in /wp-content/themes/IL-TUO-CHILD-THEME/
3. Crea una nuova cartella, ad esempio “fonts”
4. Carica i file dei font (TTF) in quella cartella

Aggiungere i file alla configurazione PDF

Ora devi aggiungere i nomi dei file caricati alla configurazione PDF disponibile. Qui sotto un esempio per il nostro 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);

La prima riga di configurazione aggiunge la cartella del child theme alla directory dei font. Le righe successive elencano i nomi dei file dei font (ttf) e i loro stili. Puoi rimuovere gli stili che non hai.

Aggiungi questo codice al file functions.php del tuo child theme. Poi potrai usare “myfontname” nei PDF.

Usare il font nel PDF

L’ultimo passo è aggiungere al PDF il nome del nuovo font che hai definito nella chiave dell’array qui sopra. Per farlo, vai nelle nostre impostazioni avanzate e incolla il seguente CSS personalizzato:

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

Assicurati di sostituire “myfontname” con il nome che hai impostato nel file functions.php.

Plugin supportati

Tutti i nostri plugin PDF supportano font personalizzati. L’elenco qui sotto li mostra tutti: