Fonts for Emails

[USCJ Digital]

Hive mind ...

When email notifications are sent out to our members, the font varies between 'Ariel' and 'Times New Roman,' depending on the notification type.

For example, digests are generally sent using 'Ariel,' but a private message notification might go out as 'Times New Roman.'

Is there a way to set the font for all automatically generated email notifications? Ideally, I would sent everything to Ariel as that matches our organizations branding guidelines.

Thank you for any insights you may have!

[bfarber]

The font we set for all emails is the same: 'Helvetica Neue', helvetica, sans-serif.

That said, if a user manually sets a font in their posted content, then the content may retain that font face in the email notification as well.

To change the font set, you would go to AdminCP > Customization > Emails and then edit the email wrapper template and adjust the font definitions.

[USCJ Digital]

@bfarber ... Thank you for your response.

But actually - I have removed the font-selection control from the text editor toolbar (as is the case for these forums). Our site default font is 'Open Sans' (AdminCP > Themes > Text > Body Font/Headline Font). So, while users can adjust font size and color, the font they enter in the text editor is only the default of 'Open Sans.' 

Unless ... the default text editor font is controlled from another place? (If so, I am not aware of where that would be!).

Even if the text editor default is "Helvetica x," that would not explain why some emails come in as 'Times New Roman."

Thoughts? What am I missing?

[bfarber]

Copying and pasting content will retain the font face from the source.

[USCJ Digital]

So ... when I look at the posts in question as they are on our community compared to the font in the email notification there is a mismatch. All of the posts in question sent as email notifications were in the native community font when viewed in the forums, etc., but can show up as Times New Roman in an email notification ...

What else can we/I look at? Thank you!

[USCJ Digital]

@bfarber ... as an example:

1) I create a private message and the font appears as it should - Open Sans:

 

2) When the message is received by the member when looking at it on the platform, it displays correctly:

 

3) When the email notification arrives, it is displayed in Times New Roman. To be precise, the upper part of the message is Arial or Helvetica, but starting with '2 members active in this conversation ...' the font is Times New Roman.

 

No copying/pasting involved. This was typed in to demonstrate. 🙂 Other notifications (some digests and forum post notifications) are 100% Arial/Helvetica.

This is not a new issue. I have seen this on our platform since February 2018 when we started  our community, but I would like to try and figure this out as Times New Roman is not part of our branding framework, and I would love to not have to go through every email template to track this down!

[opentype]

2 hours ago, USCJ Digital said:

Thoughts? What am I missing?

Check the email templates as mentioned before – and check the HTML source of the emails you receive. 

The HTML doesn’t force a specific font. It recommends a couple using a font stack. Seeing Times New Roman would indeed be weird, since it is not part of the stock font stack. So you need to track down where that comes from. Maybe it’s in the email templates. Maybe it’s enforced by the email client. Maybe it’s a fallback going wrong for some reason. Screenshots won’t help. You need to inspect the code and look for the font-family declarations (or the lack of them). 

[USCJ Digital]

4 minutes ago, opentype said:

Check the email templates as mentioned before – and check the HTML source of the emails you receive. 

The HTML doesn’t force a specific font. It recommends a couple using a font stack. Seeing Times New Roman would indeed be weird, since it is not part of the stock font stack. So you need to track down where that comes from. Maybe it’s in the email templates. Maybe it’s enforced by the email client. Maybe it’s a fallback going wrong for some reason. Screenshots won’t help. You need to inspect the code and look for the font-family declarations (or the lack of them). 

Does it matter that I have not customized the email templates for our community in the cloud? I have not touched anything with the default email templates, and I do not have any custom themes installed (all the themeing in the screen shots is via the native controls/options in the AdminCP).

Also ... the email screen shot is from Outlook 2013. The default font is set to 'Arial' for both incoming and outgoing messages.

[opentype]

Like I said: It’s hard to say without looking at the code. Have you any other devices to check the same mails? Maybe it’s just that one device and email client.

You could also consider changing that font stack Brandon mentioned. It only contains one font in two versions, and I guess you don’t have either installed. This change could work better:

font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif

The incoming/outgoing font choice doesn’t affect text display that is styled through CSS in an HTML email. 

[USCJ Digital]

@opentype @bfarber ...

So, I think this may be an issue with Outlook 2013 after all.

Just sent another test message and opened it on my iPad and on an Android 8.0 device. Fonts were all displayed as expected ... no Times New Roman.

So, good news is, this is probably not an Invision issue (thank you for making me think to test on something other than my primary email software), but now what the heck is going on with Outlook?! 🤔 ... Very strange, as I don't think I see this anywhere else. But, everything displayed correctly on iOS and Android, so there you go!

Thank you both for your insights!

Addendum:

... one more test that really makes this even stranger ... but really points to this just being Outlook 2013:

When I opened the new test message in Outlook 2013, I see the same 'Time New Roman' issue as in the above screen shot.

But, if I click on ' ... view it in a web browser,' the message opens up in IE (this is on a Win7 system), and the message displays with the correct fonts!

So, all signs point to Outlook being the culprit here. Given that, I am going to move on, since there really does not seem to be anything related to the platform itself.

[opentype]

There might be a setting somewhere for the fallbacks (“serif”, “sans-serif”, “monspace” …) and maybe Times New Roman is chosen there as a local default for “sans-serif”. Or it’s just a bug and the app doesn’t read the font stack properly. Microsoft Office apps are not really known for proper typography. 

[USCJ Digital]

In case anyone is curious about this ... I found the fix if you are using Office 2013:

• Open WORD
• File > Options > Advanced Options
• Under the 'General' category, click on 'Web Options'
• Click on the "Fonts" tab
• Make sure 'English/Western European ...' is selected
• Change the 'Proportional Font' from Times New Roman to Arial (or whatever you want).

That is totally crazy, and clearly something very wrong with how Office/Outlook 2013 displays fonts in certain scenarios - but as the saying goes, Google is your friend.

And yup, changing the settings in WORD makes the display in Outlook 'correct.' That said, however, the fonts are being coded by Invision in a way that there seems to be a 'break' in formatting between the upper part and lower part of the email notification (as per the screen shot which shows the transition to Times New Roman) ... but it's not in all cases.

Of course, none of this will make a difference for any of our users using Outlook 2013, because there is no way that most of them are going to bother with this. But definitely an Office/Outlook 2013 issue!

[USCJ Digital]

@bfarber ...

Not to belabor this ... but just as points of information:

• Same issue, same 'resolution' if using Office 2016 on Windows 10, the reason ...
• Helvetica is not a pre-installed font with Windows or Office, therefore ...

Font substitutions are being made in the display. Why it 'works' in some cases and not others, I do not know ... but it seems that Helvetica is not a universal standard font.

I can add this to the feedback and ideas forum as well - but I think it would be great if there was a control in the AdminCP to set the fonts for emails, or perhaps change the font to "Arial," "Segoe UI," or another similar font that is know to be included in most OSes?

Just a thought/suggestion! 🙂

[bfarber]

I use Windows Mail and haven't noticed any issues myself. I'll keep an eye out.

In the mean time, as I mentioned previously, you can edit the email templates and replace Helvetica if you want with something else.

[Rhett]

8 hours ago, USCJ Digital said:

@opentype @bfarber ...

So, I think this may be an issue with Outlook 2013 after all.

 

 

Cough, this is 2019 , cough!  😇  

 

[USCJ Digital]

27 minutes ago, Rhett said:

Cough, this is 2019 , cough!  😇  

 

Yes, yes, I know. I still have a Win7/Office 2013 system for testing purposes. (I am certain that I have users/will have users that are on Win7 and Office 2013 or earlier ...)

The computer I am responding to you on here is a Win10/Office 2016 system.

That said, I think this is an issue with Windows/Office not installing Helvetica natively ... and the fallback font is Times New Roman. Don't know about Office 2019 ... upgrading to that over the summer probably 😁.

39 minutes ago, bfarber said:

I use Windows Mail and haven't noticed any issues myself. I'll keep an eye out.

In the mean time, as I mentioned previously, you can edit the email templates and replace Helvetica if you want with something else.

@bfarber ... I may take a look at the templates and replace Helvetica with Arial, but I would need to probably go through every template, and given what I now know is a limited issue (and not really an Invision issue), not sure it is worth the time. That said, is there a way of globally replacing the font across all email templates vs. one by one?

[bfarber]

11 hours ago, USCJ Digital said:

Yes, yes, I know. I still have a Win7/Office 2013 system for testing purposes. (I am certain that I have users/will have users that are on Win7 and Office 2013 or earlier ...)

There may be people out there using Windows 98 and Internet Explorer 4, however our software is not designed for their outdated systems. 🙂 We design for commonly used modern environments.

11 hours ago, USCJ Digital said:

The computer I am responding to you on here is a Win10/Office 2016 system.

That said, I think this is an issue with Windows/Office not installing Helvetica natively ... and the fallback font is Times New Roman. Don't know about Office 2019 ... upgrading to that over the summer probably 😁.

@bfarber ... I may take a look at the templates and replace Helvetica with Arial, but I would need to probably go through every template, and given what I now know is a limited issue (and not really an Invision issue), not sure it is worth the time. That said, is there a way of globally replacing the font across all email templates vs. one by one?

You would need to adjust the font anywhere it is used. The global "emailWrapper" template would be the most important, but the font may also be defined in other templates.

Having said that, I don't think changing the font here is necessary. It strikes me as strange that the font looks ok in the bulk of the email and even in most of the different emails you receive, however one single email is displaying strange for you. If I get time I'll try to see if I can duplicate (I use Windows Mail which parses similar to Outlook), but frankly this is pretty low priority.

[USCJ Digital]

14 minutes ago, bfarber said:

There may be people out there using Windows 98 and Internet Explorer 4, however our software is not designed for their outdated systems. 🙂 We design for commonly used modern environments.

Well, while Win7/Office 2013 may no longer be bleeding edge - it is still supported by Microsoft (at least through January) and it is used a bit more than, ahem, Win98 😉. But, this seems to be an issue with Windows/Office across the board (at least on Win10/Office 2016). So, my point still stands 🙂.

 

16 minutes ago, bfarber said:

You would need to adjust the font anywhere it is used. The global "emailWrapper" template would be the most important, but the font may also be defined in other templates.

Having said that, I don't think changing the font here is necessary. It strikes me as strange that the font looks ok in the bulk of the email and even in most of the different emails you receive, however one single email is displaying strange for you. If I get time I'll try to see if I can duplicate (I use Windows Mail which parses similar to Outlook), but frankly this is pretty low priority.

I agree that something strange is going on here (I am seeing this only in  Outlook 2013/Win 7 and Outlook 2016/Win10). The emails displayed perfectly using the Gmail app on both iOS and Android. And, changing the fall-back font via the deeply buried setting in Word, sort of 'resolves' the issue at least ascetically. It is very strange, indeed ... and seems unlikely to be an issue with Invision. The big clue is that is some email notifications are displaying correctly in part or in whole (in Outlook) - there is a font substitution issue at play that is likely Office related (at least on Windows). My guess is that there is some 'break' in the formatting of certain notification emails and Outlook 'thinks' it needs to change the font.

As an aside but connected ... since changing the fall-back font via Word, I have noticed other HTML emails (from our CRM system, and the Patch Management listserv for examples) that are now displaying in Arial and not Times New Roman. So, whatever is up - it's not *just* with Invision.

I appreciate you keeping an eye out ... and agree fully this is very low priority based on the likelihood this is not an Invision issue, per se. (That said, I might still argue changing  the default template font from "Helvetica" to "Arial," but ... yes, low priority!).