Hasan A Yousef Hasan A Yousef - 1 year ago 136
CSS Question

Font change and styling of HTML email body in MailKit

after allowing the access of less secure apps here I was able to send my seld an email using gmail with inline styling.

using MailKit.Net.Smtp; // for SmtpClient
using MimeKit; // for MimeMessage, MailboxAddress and MailboxAddress

var message = new MimeMessage();
message.From.Add(new MailboxAddress("Hasan Yousef", "hasan@gmail.com"));
message.To.Add(new MailboxAddress("Personal", "hasan@gmail.com"));
message.To.Add(new MailboxAddress("Office", "hasan@offfice.com.sa"));
message.Subject = "How you doin'?";

string num = "13.5 million";

var bodyBuilder = new BodyBuilder();
bodyBuilder.HtmlBody = @"
<div style='background-color:black;color:white;padding:20px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);'>
<h1 style='text-align: center; font-family: 'Sigmar One', cursive;'>Welcome to Ben's Minecraft</h1>
<img src='https://www.bk-international.com/mahout_cms/project/themes/default/images/de/logo.png' alt='HTML5' style='width:84px;height:47px'><br>
<a href='https://www.bk-international.com/de_en/'>Bischof + Klein</a>
<p>London is the capital city of England.
It is the most populous city in the United Kingdom, with a metropolitan area of over <span style='color:red'>
<i><b>" + num +
<p style='background-color:#ffc;color:black;'> Hope you liked the above</p>
<td>Description of A</td>
<td>Description of B</td>
<img src='https://www.bk-international.com/mahout_cms/project/themes/default/images/subhead.png' alt='HTML5' style='width:193px;height:9px'>

message.Body = bodyBuilder.ToMessageBody();

/* message.Body = new TextPart("plain")
Text = @"Hey Chandler,I just wanted to let you know that Monica and I were going to go play some paintball, you in?-- Joey"
using (var client = new SmtpClient())
client.Connect("smtp.gmail.com", 587);
client.AuthenticationMechanisms.Remove("XOAUTH2"); // due to enabling less secure apps access

client.Authenticate("hasan@gmail.com", "myEmailPassward");

My question is:
How can I change the font, I tried adding the head script below but did not work,

<link href='https://fonts.googleapis.com/css?family=Sigmar+One' rel='stylesheet' type='text/css'>

I noticed the font display in gmail is completely different than the font displayed in my outlook, so i need to unify the font to ensure every one read it the same way whatever email client he is using.

Answer Source

As per E.B. comment above, and refering to this and this and considering CSS in email is handled differently in different browsers and/or email clients, the most suitable option for me I found is using inline styling as per the below:

<div style='background-color:black;color:white;padding:20px; font-family:Arial, Helvetica;color:#555555;font-size:12px;'>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download