?
Solved

Custom font not working in html email blast ... Need to solve asap

Posted on 2012-08-23
22
Medium Priority
?
1,317 Views
Last Modified: 2012-08-25
I threw together a very simple email blast for someone.
Everything is available for viewing at:
http://www.capodevelopment.com/clientsResource/hde_broker/pipeline/Live/

Here's a screen shot of what it SHOULD look like:




The problem is that the custom fonts are not working in the css.

Can email browsers view those custom fonts & I need to look towards the css for my issue ?
OR
Are they just not capable of downloading/interpreting the font type, and I need to change the fonts to images ?

Thanks in advance for all the help experts ...

-Steve
pipeline.png
0
Comment
Question by:Imaginx
  • 8
  • 6
  • 4
  • +2
22 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 38326553
Support in email programs is very limited you should be using images.
0
 
LVL 1

Author Comment

by:Imaginx
ID: 38326571
Does anyone else on EE hate having to sign in when you click the 'Possible Solution Found' in our emails ??? lol

I'm in the middle of changing to images now - I was assuming that would be the response I got.
Hoping it doesn't kill overhead.

Thanks Gary ...

I'm going to leave the question open for just a little longer, just to see if others have any suggestions.
0
 
LVL 58

Expert Comment

by:Gary
ID: 38326597
On checking the only client that seems capable is Apple mail although this link even disagrees with that (it's Google's font API but its the same thing)
http://www.emailonacid.com/blog/details/C4/the_google_font_api_and_html_email
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 58

Expert Comment

by:Gary
ID: 38326599
Hoping it doesn't kill overhead.
If you mean the email size - well the images will probably be smaller than downloading a completely new font.
0
 
LVL 1

Author Comment

by:Imaginx
ID: 38326612
The font was only 62k, the images total 228k.
I don't think it really matters in the grand scheme of things though.

Even thought 228 is roughly 400% of data - on a half way decent bandwidth - you're talking about the difference of <2 seconds.

If it were a webpage, I would probably be more creative to keep file sizes down where I can - but I don't think it really matters here.
0
 
LVL 1

Author Comment

by:Imaginx
ID: 38326622
It's interesting that you pointed out Apple Mail was the only one. I tested with Apple Mail.

It only worked when I sent myself the email, locally.

If I sent myself the email using the mail service, it broke.

I noticed the mail service copies all the css & moves it into the <head> tags.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38326623
For your logon problem, you can fix it by using the cookie login.  Just chek the remember me box when you login, an EE will put a cookie on your computer and use it to login automatically.

As for the email.  Email clients ignore style sheets, and most in line styling.  Some will not render HTML, and users can have setting that block anything except text including images.

Cd&
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38326634
if you really want to push the envelope, you could base64 encode the fonts and use data-uri's - but I don't know if it's worth it...

most email clients understand css in the header, but property support is limited, here's a guide:
http://www.campaignmonitor.com/css/
0
 
LVL 58

Expert Comment

by:Gary
ID: 38326640
Are those images optimized for the web, seems a lot considering the link you posted.
0
 
LVL 1

Author Comment

by:Imaginx
ID: 38326665
They are web optimized, however, I could do a much better job if this didn't fall into my lap with such a short amount of time to complete the project.

This blast is supposed to go out today.

I didn't find out there were any issues until last night.

The images are not compressed too much, since there is text in them.

Cd - if you could do me a favor, and never tell anyone I missed such a foolish mistake :)

Kozaiwaniec - I like your solution, def not suitable for this specific project, but very valuable to know for some other project. Thank you !
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38326736
My lips are sealed :^)

Cd&
0
 
LVL 58

Expert Comment

by:Gary
ID: 38326807
Base 64 is fine for cutting down http requests for images and making sure an image shows in an email since most clients block emails from unknown sources but not a real solution for encoding fonts in emails.
0
 
LVL 9

Expert Comment

by:djon2003
ID: 38326817
Some supplementary help :
http://jonraasch.com/blog/embedding-custom-fonts

This website explains all the possible methods for using custom fonts and explains their drawbacks.
0
 
LVL 1

Author Comment

by:Imaginx
ID: 38326846
Great article Djon.

Unfortunately, theres no info there on embedding for email.

I think the experts have about rounded up all the ideas I can imagine ...
0
 
LVL 9

Expert Comment

by:djon2003
ID: 38326875
Just to add that most of the email clients are using the drawing engine of a web browser.
0
 
LVL 58

Expert Comment

by:Gary
ID: 38326896
Not correct, it uses the HTML rendering engine of the browser
http://litmus.com/help/email-clients/rendering-engines
0
 
LVL 9

Expert Comment

by:djon2003
ID: 38326929
Mmm.. maybe my english wasn't properly used, but I thought that it was I said. Maybe shall I used rendering instead of drawing.
0
 
LVL 1

Author Comment

by:Imaginx
ID: 38326953
Is it not technically an 'interpreter' - since css/html/javascript are all considered interpreted languages (as opposed to compiled) ?
0
 
LVL 58

Expert Comment

by:Gary
ID: 38326961
Generic 'drawing engine' would imply it can do whatever a browser can do but it doesn't.
It uses the HTML rendering engine to remove anything that shouldnt be there including video, flash, external linked files etc.,
Email clients just have a dumb version of a browser
0
 
LVL 9

Expert Comment

by:djon2003
ID: 38326991
Thanks for the differentiation. It was like that in my head, but not in my mouth.
0
 
LVL 58

Expert Comment

by:Gary
ID: 38326995
Is it not technically an 'interpreter'
Could be, if you mean handing it over to the browser to reformat it for the email client.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38332619
Just to be accurate. The browser does not render HTML.  The HTML is metadata that it uses to build the document object.  The CSS is just an extension of the HTML meta data. The rendering engine interprets the content of the document object and responds to changes in the document object by reacting to the interrupts generated by any change in state.  

Cd&
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This video shows how to remove a single email address from the Outlook 2010 Auto Suggestion memory. NOTE: For Outlook 2016 and 2013 perform the exact same steps. Open a new email: Click the New email button in Outlook. Start typing the address: …
Is your OST file inaccessible, Need to transfer OST file from one computer to another? Want to convert OST file to PST? If the answer to any of the above question is yes, then look no further. With the help of Stellar OST to PST Converter, you can e…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question