[cPanel][Webmail] Add fonts to Roundcube

Many companies primarily use webmails and adhere to specific standards for email format, footer, and font. And while custom fonts can be utilized in local email clients (such as Outlook or ThunderBird), open webmail services predominantly support web-safe fonts. These are fonts that are available across the different web platforms and remain consistent with the original font. Besides this, there might be some variations in their support for other common fonts, such as Times New Roman.

 

In this article, we will shortly discuss Roundcube customization in a cPanel/WHM context, but the same is applicable for a standalone setup. Firstly, It is important to know that the font in an email is just an HTML tag:

 

<html>...<span style="font-family: Times New Roman;">test</span>...</html>

 

So, by default, unless you import the font file into the CSS style of each email (e.g., via @import), this font must also exist on the recipient’s end.

 

To use non-supported fonts, on shared hosting or on inflexible webmails, several solutions are possible:

  • Email clients: Using email clients installed on users’ systems (e.g., Outlook, ThunderBird), which by default would take in considerations the installed fonts on the system.
  • HTML Editing: Writing an email in HTML is not practical, but it could be automated via the use of injections at the JavaScript level of the webmail. This should be possible with browser extensions such as Greasemonkey.
  • Alternative Webmails: Investigate the possibility of using lightweight webmails, for example, SquirrelMail and explore its tolerance for fonts.

 

Although cPanel’s webmail, Roundcube, does not by default support adding other fonts, it is possible to modify it by forcing changes on the editor and on the Roundcube configuration. However, it should be noted that this is not a sustainable solution, as these modifications could be overwritten by updates or upgrades in cPanel. For this reason, it would be necessary to review the updates related to RoundCube and/or apply a cron script that checks if the concerned files have been modified. If this is the case, reapply the modifications automatically. You can also opt for applying immutability to the files. Note that these files and the concerned code change very rarely.

To proceed, you have to know that the font options on Roundcube are available in two places:

  • On the HTML editor (TinyMCE)
  • On the webmail settings (Roundcube > Settings > Preferences > Composing Emails > Default HTML Email Font)

In my case, I added the Microsoft Candara font to one of the clients. Since they use Microsoft systems such as Outlook.
font-family: Candara,Optima,sans-serif; // If Candara is not available on the user’s system, we choose Optima as an alternative, otherwise sans-serif, as used by Outlook.

 

First of all, locate the files to modify and add the font sequence:

cd /usr/local/cpanel/base/3rdparty/roundcube/[root@pluto-shared-r roundcube]# grep 'Verdana' . -Rl./program/include/rcmail_action.php./program/js/tinymce/plugins/legacyoutput/plugin.min.js./program/js/tinymce/themes/silver/theme.min.js./public_html/program/js/tinymce/plugins/legacyoutput/plugin.min.js./public_html/program/js/tinymce/themes/silver/theme.min.js

The PHP part defining the settings of the webmail:

public static function font_defs($font = null){$fonts = ['Andale Mono' => '"Andale Mono",Times,monospace','Arial' => 'Arial,Helvetica,sans-serif','Arial Black' => '"Arial Black","Avant Garde",sans-serif','Book Antiqua' => '"Book Antiqua",Palatino,serif','Courier New' => '"Courier New",Courier,monospace','Georgia' => 'Georgia,Palatino,serif','Helvetica' => 'Helvetica,Arial,sans-serif','Impact' => 'Impact,Chicago,sans-serif','Tahoma' => 'Tahoma,Arial,Helvetica,sans-serif','Terminal' => 'Terminal,Monaco,monospace','Times New Roman' => '"Times New Roman",Times,serif','Trebuchet MS' => '"Trebuchet MS",Geneva,sans-serif','Verdana' => 'Verdana,Geneva,sans-serif','Candara' => 'Candara,Optima,sans-serif',];

TinyMCE js pluguin:

e.getParam("font_formats")||(a="Andale Mono=andale mono,monospace;Arial=arial,helvetica,sans-serif;Arial Black=arial black,sans-serif;Book Antiqua=book antiqua,palatino,serif;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier,monospace;Georgia=georgia,palatino,serif;Helvetica=helvetica,arial,sans-serif;Impact=impact,sans-serif;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco,monospace;Times New Roman=times new roman,times,serif;Trebuchet MS=trebuchet ms,geneva,sans-serif;Verdana=verdana,geneva,sans-serif;Webdings=webdings;Wingdings=wingdings,zapf dingbats;Candara=Candara,Optima,sans-serif",e.settings.font_formats=a)

Comments

Leave a Reply

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