How to add custom font into template?

Follow the steps below to learn how to add custom font into template. For Chinese, Japanese & Korean font there is another doc here

Step 1:

Our plugin Challan – PDF Invoice & Packing Slip for WooCommerce creates a folder WOO-INVOICE-FONTS under the directory wp-content/uploads . If the folder is not available then create one with the exact name. After that upload your font TTF files into that folder via FTP. 

Step 2: 

Using the filter hook  woo_invoice_pdf_font_data you have to declare the font variable to use into CSS. In the below example, we will use the Ubuntu font. 

add_filter('woo_invoice_pdf_font_data','woo_invoice_load_custom_font');
function woo_invoice_load_custom_font($font_data){
    $font_data['ubuntu']=array(
        'R' => "Ubuntu-Regular.ttf",
        'B' => "Ubuntu-Bold.ttf",
        'I' => "Ubuntu-Italic.ttf",
        'BI' => "Ubuntu-BoldItalic.ttf",
    );

    return $font_data;
}

Step 3: 

After declaring the font variable we will now add the CSS into the template to change the font using the  woo_invoice_custom_style action hook. 

add_action('woo_invoice_custom_style','woo_invoice_custom_font');
function woo_invoice_custom_font($template){
    if('invoice'===$template){
    ?>
      body{
        font-family: 'Ubuntu', sans-serif;
      }
    <?php
    }
}
6 thoughts
    1. Thank you Sami,
      We hope you have found the documentation helpful. If need more help, please, feel free to reach our technical support team.

Leave a Reply

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


This site uses Akismet to reduce spam. Learn how your comment data is processed.