CSS for Tables in NetCommunity Email - Font-Family and Font-size help!!

Brian Bates 2 · October 2017

All, anyone having trouble establishing CSS for specific tables in NetComm email?

I can adjust the background color; style; border; for a table, but I cannot change the font-family; size; or color via CSS.

Here is my code . . . please someone tell me where I have gone wrong. And, while I am using #ID here, I have also used .class . neither produce results.

<head>

table#t01 {

font-family: Palatino,Palatino Linotype,Georgia,Times New Roman,serif;

font-style: italic;

font-size: 16px;

background-color: #f1f1c1;

}

</style>

</head>

<table id="t01">

Rebecca Leifert · October 2017

Hey Brian,

CSS & email is tricky as I'm sure you've already discovered. Only a small portion of email clients recognize CSS, the others still require inline styles. Depending on what client you're testing to, that's probably why you aren't seeing the changes/styles you have in the code. I highly recommend inline styling things so you cover all possibilities; it's the only way to garauntee what recipients will see. As for the fonts - web safe fonts (basically all the ugly ones) are the only ones universally recognized by all email clients. For the code you have below, the only ones you'll see are Georgia or Times New Roman or serif, depending on the email client and Mac or PC. If you want other fonts, you have to use extra code for using Google fonts and again...only some email clients recognize those so you'll still need your fall back fonts of Georgia, Times, & serif.

I hope that helps! If you have other questions, let me know & I'll try to help. My unofficial business card says "Email Queen."

Michelle Tribe · October 2017

Ditto what Rebecca said, in that email doesn't work like a web page. My learnings:

1. Use good old fashioned HTML tables for the email.

2. Put your style in <table> or <td>, not in the <head><style>...</style></head> section. For example, in an email I sent today:

<td style="padding: 20px 30px 10px; color: #444444; line-height: 25px; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400;" align="left" bgcolor="#ffffff">

3. For font families, rely on google fonts and point to them in the email:

<!DOCTYPE html>

<html>

<head>

<style type="text/css"> <!--

/* FONTS */

@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');

} }

Hope this helps!

CSS for Tables in NetCommunity Email - Font-Family and Font-size help!!

Comments

Categories