Overview:
Custom fonts enhance the visual identity of your email signatures, helping align them with your organization's branding. This article provides a step-by-step guide to integrating custom fonts into the ExSign Portal editor.
Steps to Add a Custom Font in ExSign Portal
1. Upload the Font File
Copy your desired .ttf or .otf font file into the following directory:
ExSign Portal\Portal\wwwroot\assets\plugins\global\fonts
Make sure the file name is clear and matches how you will reference it in your CSS (e.g., Cutscript.ttf).
2. Add @font-face Rule in CSS
Open the editor-fonts.css file located in the same directory, and add the following rule:
@font-face {
font-family: 'Cutscript';
src: url('Cutscript.ttf') format('truetype');
}
Key Notes:
- font-family: This defines how the font name will appear in the ExSign editor dropdown. It must exactly match your intended label (e.g., Cutscript).
- format: Must accurately reflect the file type (e.g., 'truetype' for .ttf files).
- url: Ensure it matches the font file name placed in the fonts directory.
⚠️ Important: If the CSS entry is incorrect or the font file is missing, the ExSign editor will default to Times New Roman.
3. Completion
After saving the CSS file and placing the font file correctly, refresh the ExSign Portal in your browser. The new custom font will now be available in the signature editor.
4. Where the Custom Font Appears in the Portal
Once the custom font is successfully integrated, it will appear in the following locations within the ExSign system:
a) Under the Organization Menu
Navigate to:
Organization > Manage Organization > Actions > Plain Text to HTML Settings
You will see the newly added font listed under the font selection dropdown.
b) Under the Rules Menu
Navigate to:
Rules > Manage Rules > Edit Rule
While editing a rule, the custom font will appear in the Signature > Format > Fonts dropdown list.
Additional Considerations
🖥️ Font Rendering on Recipient Devices
- Custom fonts will only appear correctly for recipients who have the same font installed on their device.
- Otherwise, a fallback font (such as Times New Roman) will be used when the email is viewed.
📤 Exported or External Signature Viewing
- If you're viewing or exporting the signature outside the ExSign Portal, ensure the custom font is installed on your local system for proper display.
Best Practices
- ✅ Always test your signatures across various devices and email clients.
- 🚫 Avoid overly niche fonts unless you're certain recipients will support them.
- 🌐 Consider using web-safe or widely supported fonts to ensure consistent appearance.