1. Home
  2. Jetpack CRM
  3. Translation
  4. Using Custom Fonts in CRM PDFs (e.g. Invoice Templates)
  1. Home
  2. Jetpack CRM
  3. Core Modules
  4. Invoices
  5. Using Custom Fonts in CRM PDFs (e.g. Invoice Templates)

Using Custom Fonts in CRM PDFs (e.g. Invoice Templates)

As of v4.10 of Jetpack CRM we’ve improved international font usage throughout our PDF system. Using Noto Sans, Jetpack CRM PDFs now support 855 languages and 236 regions out of the box. We have also built in support for the addition of other font families to support languages that are not covered by the master Noto Sans font family.

This guide explains how you can use custom fonts by modifying your template files. This should only be necessary if the default fonts installed by v4.10+ don’t cover your desired language or character set usage.

Installing fonts for PDF generation in Jetpack CRM:

  1. Go to Jetpack CRM > CRM Settings > General > Locale.
  2. Scroll down to the “Fonts for PDF generation” section, where you’ll see Noto Sans is already installed by default.
  3. Where it says “Install a font”, click the dropdown list and select the additional font you want to install.
  4. Click the “Install font” button, which should refresh the page. You should now see Noto Sans and the other font you chose as installed fonts.

Using a specific font with your PDF template:

After you’ve got the font installed, you’ll need to edit the PDF template(s) you want to use this font.

Specifically, you’ll need to add some CSS to your template to force specific areas of the HTML to use your new font. This will require basic CSS and HTML knowledge.

While we aren’t able to provide support for making customizations like this, you can use the following code snippet as an example to help get you started. The example code snippet below changes the font from Noto Sans to Noto Sans Arabic for invoice line item description elements:

<style>
.item-description {
    font-family: NotoSansArabic, NotoSansGlobal, sans-serif;
    font-style: normal;
    font-weight: normal;
}
</style>
Updated on June 26, 2023

Was this article helpful?

Related Articles

Still not found an answer?
If you've searched the knowledge base and still can't find a solution, please submit a ticket.
CONTACT SUPPORT