RS0
Displaying sans-serif fonts in email?
Hello,
I am working on an email template that I want to display sans-serif fonts. I have tried everything I can think of, but Outlook is still showing Times New Roman for most of the text! The HTML is below. Would anyone be able to give some suggestions?
<html>
<head>
<style>
@font-face {
font-family: GenesisSansRegular;
src: url("https://dl.dropboxusercontent.com/s/8vyzog304acaaz9/GenesisSansText-Regular.ttf?dl=0");
}
@font-face {
font-family: GenesisSansBold;
src: url("https://dl.dropboxusercontent.com/s/2kl5udhqi2ocbi1/GenesisSansText-Bold.ttf?dl=0");
}
@font-face {
font-family: GenesisSansItalic;
src: url("https://dl.dropboxusercontent.com/s/cyuyowcg2379g49/GenesisSansText-Italic.ttf?dl=0");
}
@font-face {
font-family: GenesisHeadLight;
src: url("https://dl.dropboxusercontent.com/s/vqgkho0c59x7mwz/GenesisSansHead-Light.ttf?dl=0");
}
@font-face {
font-family: GenesisHeadRegular;
src: url("https://dl.dropboxusercontent.com/s/qlp481t5mhgtzaf/GenesisSansHead-Regular.ttf?dl=0");
}
h1 {
font-family: GenesisHeadLight, Arial, Helvetica, sans-serif;
font-weight: normal;
letter-spacing: 1px;
font-size: 36px;
}
h2 {
font-family: GenesisHeadRegular, Arial, Helvetica, sans-serif;
font-weight: normal;
letter-spacing: 1px;
font-size: 36px;
}
strong {
font-family: GenesisSansBold, Arial, Helvetica, sans-serif;
}
a {
color: #cccccc;
}
p {
font-family: GenesisSansRegular, Arial, Helvetica, sans-serif;
}
div {
font-family: GenesisSansRegular, Arial, Helvetica, sans-serif;
}
</style>
</head>
<body style="background: #000000; color: #efefef; font-family: GenesisSansRegular, Arial, Helvetica, sans-serif;" >
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tbody>
<tr>
<td align="center" valign="top">
<p><br />
</p>
<div s="">
<table border="0" cellspacing="2" cellpadding="2" width="500" align="center" style="margin: 0px auto; font-family: GenesisSansRegular, Arial, Helvetica, sans-serif;">
<tbody style="font-family: GenesisSansRegular, Arial, Helvetica, sans-serif;">
<tr>
<td class="body-text" align="center" style="border-bottom: 2px solid #a36b4f; font-family: GenesisSansRegular, Arial, Helvetica, sans-serif;">
<p><img src="https://media.dealersocket.com/images/i5298/Logos/BuerkleGenesisLogoMockup1.png" width="500" alt="" height="94" /></p>
</td>
</tr>
<tr>
<td class="body-text" style="font-family: GenesisSansRegular, Arial, Helvetica, sans-serif;">
<p> </p>
<h1>This is a heading. Select dropdown menu for "Paragraph" and select "Heading 1".</h1>
<h2>THIS IS A BOLD HEADING. Select "Heading 2".</h2>
<div style="margin: 0px auto; font-family: GenesisSansRegular, Arial, Helvetica, sans-serif;">This is Genesis Sans Regular font, the official Genesis brand font for use on webpages and email. Just type here, or from the second-to-left dropdown, select "Paragraph."</div>
<div style="margin: 0px auto; font-family: GenesisSansRegular, Arial, Helvetica, sans-serif;"> </div>
<div style="margin: 0px auto; font-family: GenesisSansRegular, Arial, Helvetica, sans-serif;"><strong>This is what BOLD text should look like.</strong></div>
<div style="margin: 0px auto; font-family: GenesisSansRegular, Arial, Helvetica, sans-serif;"><em>This is what ITALIC text should look like.</em></div>
<div style="margin: 0px auto; font-family: GenesisSansRegular, Arial, Helvetica, sans-serif;"> </div>
<div style="margin: 0px auto; font-family: GenesisSansRegular, Arial, Helvetica, sans-serif;"> </div>
<div style="margin: 0px auto; font-family: GenesisSansRegular, Arial, Helvetica, sans-serif;">This is the master email template for creating new Genesis templates. To start - </div>
<div style="margin: 0px auto; font-family: GenesisSansRegular, Arial, Helvetica, sans-serif;">1. Go to the "HTML" tab at the bottom left corner</div>
<div style="font-family: GenesisSansRegular, Arial, Helvetica, sans-serif;">2. Click "Okay" on the popup</div>
<div style="font-family: GenesisSansRegular, Arial, Helvetica, sans-serif;">3. Select EVERYTHING in the HTML area</div>
<div style="font-family: GenesisSansRegular, Arial, Helvetica, sans-serif;">4. Copy and paste into Notepad (do NOT paste into Word or any other writing program except Notepad).</div>
<div style="font-family: GenesisSansRegular, Arial, Helvetica, sans-serif;">5. Exit template without making changes or saving</div>
<div style="font-family: GenesisSansRegular, Arial, Helvetica, sans-serif;">6. Start a new template</div>
<div style="font-family: GenesisSansRegular, Arial, Helvetica, sans-serif;">7. Go to the HTML tab, remove EVERYTHING there, and paste EVERYTHING you copied over </div>
<div style="font-family: GenesisSansRegular, Arial, Helvetica, sans-serif;">8. Exit the HTML tab for the "Normal" tab and continue editing as normal. </div>
<div style="font-family: GenesisSansRegular, Arial, Helvetica, sans-serif;"> </div>
</td>
</tr>
<tr>
<td class="body-text" style="font-family: GenesisSansRegular, Arial, Helvetica, sans-serif;">
<div style="font-family: GenesisSansRegular, Arial, Helvetica, sans-serif;"> </div>
<div style="font-family: GenesisSansRegular, Arial, Helvetica, sans-serif;">Type your signature here.</div>
<div style="font-family: GenesisSansRegular, Arial, Helvetica, sans-serif;"> </div>
<div style="font-family: GenesisSansRegular, Arial, Helvetica, sans-serif;"><strong>BUERKLE GENESIS</strong></div>
<div style="font-family: GenesisSansRegular, Arial, Helvetica, sans-serif;">3350 HWY 61 N</div>
<div style="font-family: GenesisSansRegular, Arial, Helvetica, sans-serif;">ST PAUL, MN 55110 </div>
</td>
</tr>
</tbody>
</table>
</div>
<div> </div>
<br />
</td>
</tr>
</tbody>
</table>
</body>
</html>
Hi Raina,
For web fonts to work in outlook you need to place them in a span tag around the text you want and web safe fonts in the td (div in your case)
example:
OPTION 1:
OPTION 2:
Give it a go and let me know which one works better/easier for you.
Cheers
Hi there,
I am having the same problem and I want to try your fix but I can't see all of the text in your reply as it is cut off. IS there some way you can add that better so it is all visible please
Thanks
Tony
Hi M Shameer, I tried you solution for web fonts in outlook but it didn't work sorry. I am having other problems with my EDM also.
Do you happen to do freelance work at all. Really need some help. Would that be possible. Happy to pay.Would you be able to get back to me please.
Thanks
Tony
HI Tony,
You can mail me at Gmail (syfer.darknight).
Cheers