Articles on: Templates

How to Customize Invoice Colors and Fonts

Invoice Falcon's Visual Editor lets you change the accent color for your invoice headers and choose a custom font — all without editing any code. The accent color applies to section headings, table headers, icons, and links across your invoice. The font setting controls the typeface and base size used for all text in the document.

Open the Visual Editor

Open the Invoice Falcon app from your Shopify Admin.
Click Templates in the left navigation menu.
Click on the template you want to customize (or click Edit on the template row).
Scroll to the Visual editor section and click the Open visual editor button.

The Visual Editor opens in a full-screen modal with settings on the left and a live preview on the right.

Change the accent color for headers

The Color section controls the accent color used throughout your invoice. This color is applied to:

Document title (e.g., "Invoice", "Quote", "Packing Slip")
Section headings (e.g., "Ship To", "Bill To", "Payment Information")
Table column headers in the items table (e.g., Item, Qty, Price, Total)
Table header border (the line below the column headings)
Contact icons next to the shop email and phone number
Social media links in the footer (Facebook, Instagram, Twitter)

Steps to change the color

In the Visual Editor, click the Color section to expand it.
Use the color picker to select your desired color by clicking and dragging on the color palette. You can also adjust the hue using the vertical slider on the right side of the picker.
Alternatively, enter a specific hex color code in the Hex color field (e.g., 1A73E8 for blue, D4380D for red, 2E7D32 for green). The field automatically adds the # prefix.
The live preview on the right updates immediately so you can see how the color looks on your invoice.
Click Save changes at the top of the Visual Editor when you are happy with the color.

Tip: Choose a color that matches your brand. A high-contrast color (dark on white background) ensures your headings remain easy to read when the invoice is printed.

Use a custom font on invoices

The Fonts section lets you choose a font family and adjust the base font size for all text on your invoice.

Available fonts:

Invoice Falcon includes 15 font options:

Font	Style
Roboto	Sans-serif (default)
Montserrat	Sans-serif
Open Sans	Sans-serif
Source Sans 3	Sans-serif
Noto Sans	Sans-serif
Noto Serif	Serif
PT Serif	Serif
Oswald	Sans-serif
Ubuntu	Sans-serif
Courier Prime	Monospace
System Default	System font
Arial	Sans-serif
Helvetica	Sans-serif
Georgia	Serif
Times New Roman	Serif

Steps to change the font

In the Visual Editor, click the Fonts section to expand it.
Open the Font family dropdown and select your desired font. The live preview updates immediately so you can compare how different fonts look on your invoice.
Adjust the Font Size slider to change the base font size. The slider ranges from 10px to 18px in 1px increments. The current size is displayed next to the slider label (e.g., "Font Size: 12px").
Click Save changes at the top of the Visual Editor when you are satisfied with the font and size.

Tip: Serif fonts like Georgia and PT Serif give invoices a more traditional look. Sans-serif fonts like Roboto and Open Sans feel modern and clean. Courier Prime (monospace) is useful if you want a typewriter-style appearance.

Known limitations

Accent color is global — the accent color applies to all colored elements (headings, table headers, icons, links) on the invoice at once. You cannot set different colors for different sections from the Visual Editor. To use different colors for individual elements, edit the template code directly in the Code Editor.
Font applies to the entire invoice — the font family setting changes all text on the invoice. You cannot use different fonts for headings vs. body text from the Visual Editor. Use the Code Editor for per-element font overrides.
Font size is the base size — the actual size of headings and sub-text is calculated relative to this base size (e.g., headings may be 150% of the base size). Adjusting the slider scales all text proportionally.
Custom font uploads are not supported — you can only choose from the 15 fonts listed above. You cannot upload your own font file.
Settings are per-template — color and font changes apply only to the template you are editing. Other templates keep their own settings.

Troubleshooting

Symptom	Likely Cause	Fix
Color does not change after picking	Hex code field has fewer than 6 characters	Enter a full 6-character hex code (e.g., `1A73E8`) or use the color picker
Font preview looks the same for two fonts	Some fonts look similar at small sizes	Try increasing the font size or comparing serif vs. sans-serif options
Color or font changes not saved	You closed the Visual Editor without saving	Reopen the Visual Editor, make the changes again, and click Save changes before closing
PDF invoice looks different from preview	PDF rendering may differ slightly	This is expected for some fonts. Roboto, Arial, and Times New Roman render most consistently in PDFs

FAQs

Q: What is the default accent color?
A: The default accent color is black (#000000).

Q: What is the default font?
A: The default font is Roboto at 12px.

Q: Can I use different colors for the title and table headers?
A: Not from the Visual Editor. The accent color applies to all colored elements. To customize individual elements, edit the template HTML in the Code Editor using inline CSS.

Q: Will changing the font affect previously generated invoices?
A: No. Previously generated PDFs are not affected. Only invoices generated after saving will use the new font and color.

Q: Does the font support non-Latin characters (e.g., Chinese, Japanese, Arabic)?
A: Noto Sans and Noto Serif have broad Unicode support. If your invoices include non-Latin text, these are the recommended font choices.

Updated on: 20/05/2026

Was this article helpful?

Thank you!