CODEWITHSUNDEEP
c#htmlcssasp.netasp.net-mvc
Jack
Jack

Reputation: 1

Cannot display font and image properly in Email Template

I have used an email template as a single page html with style (css) embedded to it and I can display all of the styles including font and images properly on the html page. However, the font and image styles cannot be applied to the Outlook messages when I use this template for sending e-mail in my C# application (test version of Windows Service). What I have tried to do so far:

But none of them make any sense and the image sannot be displayed on the e-mail sent by this template. In addition to this, font type is not the same as on the html file (SourceSansPro).

Any idea to embed the font to the html file and display font and image properly on the outlook message created by this template??? Please note that I use *.txt file as template, but the code in it exactly html and can be displayed properly...

Upvotes: 0

Views: 1175

Answers (2)

grifare
grifare

Reputation: 121

As for the fonts, there is one single and a very simple solution that works. Just wrap the content inside the deprecated font element!

<font face="Verdana">
<!-- content -->
</font>

Upvotes: 0

Shafayet Hossen
Shafayet Hossen

Reputation: 336

Try to insert this code for custom fonts and images in the email template:

<style type="text/css">
@media screen {
  @font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
  }

  ...

  body {
    font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
  }
</style>

<html>
    <head>
    </head>
    <body>
        <img src="data:image/jpg;base64,/*base64-data-string here*/" />
    </body>
</html>

Upvotes: 1

Related Questions