Selective character substitution in font?
Hello there.
I developed an email template for a client, spent a good chunk of time testing and re-testing, and it was finally launched about three weeks ago. This morning I received a screen shot one of their readers had sent in sharing how the font was displaying for him. And while I admit I'm not the most experienced email developer -- by far! -- it wasn't something I have seen before or know how to work around. It seems to me there's something wrong with his font set, since it's only selectively substituting certain characters rather than falling back to one of the safer fonts I declared... but then again, this could be the mess I embarrasingly land in when I try to play fancy with email type and get it wrong?
Screenshot here: www.dropbox.com/s/jus7l3zmr9w9jrx/Screen%20Shot%202016-09-14%20at%2010.07.33%20AM.png?dl=0
I've done some searching around for an answer, but couldn't find one or couldn't hit upon the right search terms, so I was hoping maybe someone here could deliver me the slap-in-the-forehead I need and share some clue as to what's going on here?
And just now, the client shared some more info from the reader, and this is what he shared:
Email program is Outlook.
I also copied and pasted the link into the 2 browsers I use. I¹ve attached
screenshots. It looks fine in Firefox but goofed up in Safari.
So now I'm a little more stumped, as this would suggest it's not a problem with the font set system-wide. If anyone has a clue where I should start looking or a best course of action, I'd be ever-so-grateful.
Thanks!
Do you have some code to share?
Sure!
Thanks!
Off the bat my first issue is you have two font stacks within the same style="", not sure why you need to add !important either.
I don't really see anything in particular that would cause the funny characters. Do you have this in your head?
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
The double font stack is for Outlook, as it was ignoring my font stack with specific family names. So for better or worse, I was using the !important to prompt Outlook to ignore the font stack it didn't like and render the other it did.
This is the head tag
I appreciate the time you took to review! Thanks so much.