Re: How to Change Default Font in Emails

Anonymous · ‎01-27-2016

I have set the fonts in CSS over and over to the point of being totally redundant in my scripting but still when we start a new email campaign, the default font in Marketo is Times. Is there a way of making sure that the default font at least reverts to Arial if our custom font isnt loading? Here is my script.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>*|MC:SUBJECT|*</title>

/* /\/\/\/\/\/\/\/\/ CLIENT-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */

#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */

.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */

.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing */

body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */

table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */

img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */

/* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */

body{margin:0; padding:0;}

img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}

table{border-collapse:collapse !important;}

body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}

/* /\/\/\/\/\/\/\/\/ TEMPLATE STYLES /\/\/\/\/\/\/\/\/ */

/* ========== Page Styles ========== */

#bodyCell{padding:20px;

/*@editable*/

background-color:#fff;

background-image: url(http://go.philips-arena.com/rs/294-KHH-525/images/Email-Background.jpg);

background-position:center;

background-size:cover;}

#templateContainer{width:600px;}

@font-face {

font-family: 'Titillium Web';

font-style: normal;

font-weight: normal;

src: url(https://fonts.googleapis.com/css?family=Titillium+Web);

}

/**

* @tab Page

* @section background style

* @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.

* @theme page

*/

body, #bodyTable{

/*@editable*/background-color:#F4F4F4;

}

/**

* @tab Page

* @section background style

* @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.

* @theme page

*/

#bodyCell{

/*@editable*/ border-top:4px solid #BBBBBB;

}

/**

* @tab Page

* @section email border

* @tip Set the border for your email.

*/

#templateContainer{

/*@editable*/ border:1px solid #BBBBBB;

}

/**

* @tab Page

* @section heading 1

* @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.

* @style heading 1

*/

h1{

/*@editable*/ color:#202020 !important;

display:block;

/*@editable*/ font-family:Titillium;

/*@editable*/ font-size:22px;

/*@editable*/ font-style:normal;

/*@editable*/ font-weight:bold;

/*@editable*/ line-height:100%;

/*@editable*/ letter-spacing:normal;

margin-top:0;

margin-right:0;

margin-bottom:10px;

margin-left:0;

/*@editable*/ text-align:left;

}

/**

* @tab Page

* @section heading 2

* @tip Set the styling for all second-level headings in your emails.

* @style heading 2

*/

h2{

/*@editable*/ color:#404040 !important;

display:block;

/*@editable*/ font-family:Titillium;

/*@editable*/ font-size:20px;

/*@editable*/ font-style:normal;

/*@editable*/ font-weight:bold;

/*@editable*/ line-height:100%;

/*@editable*/ letter-spacing:normal;

margin-top:0;

margin-right:0;

margin-bottom:10px;

margin-left:0;

/*@editable*/ text-align:left;

}

/**

* @tab Page

* @section heading 3

* @tip Set the styling for all third-level headings in your emails.

* @style heading 3

*/

h3{

/*@editable*/ color:#606060 !important;

display:block;

/*@editable*/ font-family:Titillium;

/*@editable*/ font-size:16px;

/*@editable*/ font-weight:normal;

/*@editable*/ line-height:100%;

/*@editable*/ letter-spacing:normal;

margin-top:0;

margin-right:0;

margin-bottom:10px;

margin-left:0;

}

/**

* @tab Page

* @section heading 4

* @tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.

* @style heading 4

*/

h4{

display:block;

/*@editable*/ font-family:Titillium;

/*@editable*/ font-size:18px;

/*@editable*/ line-height:100%;

/*@editable*/ letter-spacing:normal;

margin-top:0;

margin-right:0;

margin-bottom:10px;

margin-left:0;

/*@editable*/ text-align:center;

color: #FFF;

}

/* ========== Header Styles ========== */

/**

* @tab Header

* @section preheader style

* @tip Set the background color and bottom border for your email's preheader area.

* @theme header

*/

#templatePreheader{

/*@editable*/ background-color:#F4F4F4;

/*@editable*/ border-bottom:1px solid #CCCCCC;

}

/**

* @tab Header

* @section preheader text

* @tip Set the styling for your email's preheader text. Choose a size and color that is easy to read.

*/

.preheaderContent{

/*@editable*/ color:#808080;

/*@editable*/ font-family:Titillium;

/*@editable*/ font-size:10px;

/*@editable*/ line-height:125%;

/*@editable*/ text-align:left;

}

/**

* @tab Header

* @section preheader link

* @tip Set the styling for your email's preheader links. Choose a color that helps them stand out from your text.

*/

.preheaderContent a:link, .preheaderContent a:visited, /* Yahoo! Mail Override */ .preheaderContent a .yshortcuts /* Yahoo! Mail Override */{

/*@editable*/ color:#606060;

/*@editable*/ font-weight:normal;

/*@editable*/ text-decoration:underline;

}

/**

* @tab Header

* @section header style

* @tip Set the background color and borders for your email's header area.

* @theme header

*/

#templateHeader{

/*@editable*/ background-color:#F4F4F4;

/*@editable*/ border-top:1px solid #FFFFFF;

/*@editable*/ border-bottom:1px solid #CCCCCC;

}

/**

* @tab Header

* @section header text

* @tip Set the styling for your email's header text. Choose a size and color that is easy to read.

*/

.headerContent{

/*@editable*/ color:#505050;

/*@editable*/ font-family:Titillium;

/*@editable*/ font-size:20px;

/*@editable*/ font-weight:bold;

/*@editable*/ line-height:100%;

/*@editable*/ padding-top:0;

/*@editable*/ padding-right:0;

/*@editable*/ padding-bottom:0;

/*@editable*/ padding-left:0;

/*@editable*/ text-align:left;

/*@editable*/ vertical-align:middle;

}

/**

* @tab Header

* @section header link

* @tip Set the styling for your email's header links. Choose a color that helps them stand out from your text.

*/

.headerContent a:link, .headerContent a:visited, /* Yahoo! Mail Override */ .headerContent a .yshortcuts /* Yahoo! Mail Override */{

/*@editable*/ color:#fff;

/*@editable*/ font-weight:normal;

/*@editable*/ text-decoration:underline;

}

#headerImage{

height:auto;

max-width:600px;

}

/* ========== Body Styles ========== */

/**

* @tab Body

* @section body style

* @tip Set the background color and borders for your email's body area.

*/

#templateBody{

/*@editable*/ background-color:#F4F4F4;

}

/**

* @tab Body

* @section body text

* @tip Set the styling for your email's main content text. Choose a size and color that is easy to read.

* @theme main

*/

.bodyContent{

/*@editable*/ color:#505050;

/*@editable*/ font-family:Titillium;

/*@editable*/ font-size:14px;

/*@editable*/ line-height:150%;

padding-top:20px;

padding-right:20px;

padding-bottom:20px;

padding-left:20px;

/*@editable*/ text-align:left;

/*@editable*/ background:#fff;

}

/**

* @tab Body

* @section body link

* @tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.

*/

.bodyContent a:link, .bodyContent a:visited, /* Yahoo! Mail Override */ .bodyContent a .yshortcuts /* Yahoo! Mail Override */{

/*@editable*/ color:#EB4102;

/*@editable*/ font-weight:normal;

/*@editable*/ text-decoration:underline;

}

.bodyContent img{

display:inline;

height:auto;

max-width:560px;

}

/* ========== Column Styles ========== */

.templateColumnContainer{display:inline; width:260px;}

.templateColumnContainer3{width:180px;}

/**

* @tab Columns

* @section column style

* @tip Set the background color and borders for your email's column area.

*/

#templateColumns{

/*@editable*/ background-color:#F4F4F4;

/*@editable*/ border-top:1px solid #FFFFFF;

/*@editable*/ border-bottom:1px solid #CCCCCC;

}

/**

* @tab Columns

* @section left column text

* @tip Set the styling for your email's left column content text. Choose a size and color that is easy to read.

*/

.leftColumnContent{

/*@editable*/ color:#505050;

/*@editable*/ font-family:Titillium;

/*@editable*/ font-size:14px;

/*@editable*/ line-height:150%;

padding-top:0;

padding-right:0;

padding-bottom:20px;

padding-left:0;

/*@editable*/ text-align:left;

}

/**

* @tab Columns

* @section left column link

* @tip Set the styling for your email's left column content links. Choose a color that helps them stand out from your text.

*/

.leftColumnContent a:link, .leftColumnContent a:visited, /* Yahoo! Mail Override */ .leftColumnContent a .yshortcuts /* Yahoo! Mail Override */{

/*@editable*/ color:#EB4102;

/*@editable*/ font-weight:normal;

/*@editable*/ text-decoration:underline;

}

/* TAB */

/**

* @tab Columns

* @section left column text

* @tip Set the styling for your email's left column content text. Choose a size and color that is easy to read.

*/

.leftColumnContent1{

/*@editable*/ color:#505050;

/*@editable*/ font-family:Titillium;

/*@editable*/ font-size:12px;

/*@editable*/ line-height:115%;

padding-top:0;

padding-right:0;

padding-bottom:10px;

padding-left:0;

/*@editable*/ text-align:left;

}

/**

* @tab Columns

* @section left column link

* @tip Set the styling for your email's left column content links. Choose a color that helps them stand out from your text.

*/

.leftColumnContent1 a:link, .leftColumnContent1 a:visited, /* Yahoo! Mail Override */ .leftColumnContent1 a .yshortcuts /* Yahoo! Mail Override */{

/*@editable*/ color:#EB4102;

/*@editable*/ font-weight:normal;

/*@editable*/ text-decoration:underline;

}

/**

* @tab Columns

* @section right column text

* @tip Set the styling for your email's right column content text. Choose a size and color that is easy to read.

*/

.rightColumnContent1{

/*@editable*/ color:#505050;

/*@editable*/ font-family:Titillium;

/*@editable*/ font-size:12px;

/*@editable*/ line-height:115%;

padding-top:0;

padding-right:0;

padding-bottom:10px;

padding-left:0;

/*@editable*/ text-align:left;

}

/**

* @tab Columns

* @section right column link

* @tip Set the styling for your email's right column content links. Choose a color that helps them stand out from your text.

*/

.rightColumnContent1 a:link, .rightColumnContent1 a:visited, /* Yahoo! Mail Override */ .rightColumnContent1 a .yshortcuts /* Yahoo! Mail Override */{

/*@editable*/ color:#EB4102;

/*@editable*/ font-weight:normal;

/*@editable*/ text-decoration:underline;

}

.leftColumnContent1 img, .rightColumnContent1 img, .centerColumnContent img{

display:inline;

height:auto;

max-width:180px;

}

/**

* @tab Columns

* @section right column text

* @tip Set the styling for your email's right column content text. Choose a size and color that is easy to read.

*/

.rightColumnContent{

/*@editable*/ color:#505050;

/*@editable*/ font-family:Titillium;

/*@editable*/ font-size:14px;

/*@editable*/ line-height:150%;

padding-top:0;

padding-right:0;

padding-bottom:20px;

padding-left:0;

/*@editable*/ text-align:left;

}

/**

* @tab Columns

* @section right column link

* @tip Set the styling for your email's right column content links. Choose a color that helps them stand out from your text.

*/

.rightColumnContent a:link, .rightColumnContent a:visited, /* Yahoo! Mail Override */ .rightColumnContent a .yshortcuts /* Yahoo! Mail Override */{

/*@editable*/ color:#EB4102;

/*@editable*/ font-weight:normal;

/*@editable*/ text-decoration:underline;

}

.leftColumnContent img, .rightColumnContent img{

display:inline;

height:auto;

max-width:260px;

}

/**

* @tab Columns

* @section center column text

* @tip Set the styling for your email's center column content text. Choose a size and color that is easy to read.

*/

.centerColumnContent{

/*@editable*/ color:#505050;

/*@editable*/ font-family:Titillium;

/*@editable*/ font-size:12px;

/*@editable*/ line-height:115%;

padding-top:0;

padding-right:0px;

padding-bottom:10px;

padding-left:0px;

/*@editable*/ text-align:left;

}

/**

* @tab Columns

* @section center column link

* @tip Set the styling for your email's center column content links. Choose a color that helps them stand out from your text.

*/

.centerColumnContent a:link, .centerColumnContent a:visited, /* Yahoo! Mail Override */ .centerColumnContent a .yshortcuts /* Yahoo! Mail Override */{

/*@editable*/ color:#EB4102;

/*@editable*/ font-weight:normal;

/*@editable*/ text-decoration:underline;

}

/* ========== Footer Styles ========== */

/**

* @tab Footer

* @section footer style

* @tip Set the background color and borders for your email's footer area.

* @theme footer

*/

#templateFooter{

/*@editable*/ background-color:#F4F4F4;

/*@editable*/ border-top:1px solid #FFFFFF;

}

/**

* @tab Footer

* @section footer text

* @tip Set the styling for your email's footer text. Choose a size and color that is easy to read.

* @theme footer

*/

.footerContent{

/*@editable*/ color:#808080;

/*@editable*/ font-family:Titillium;

/*@editable*/ font-size:10px;

/*@editable*/ line-height:150%;

padding-top:20px;

padding-right:20px;

padding-bottom:20px;

padding-left:20px;

/*@editable*/ text-align:left;

}

/**

* @tab Footer

* @section footer link

* @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.

*/

.footerContent a:link, .footerContent a:visited, /* Yahoo! Mail Override */ .footerContent a .yshortcuts, .footerContent a span /* Yahoo! Mail Override */{

/*@editable*/ color:#606060;

/*@editable*/ font-weight:normal;

/*@editable*/ text-decoration:underline;

}

/* ANOTHER STYLE */

a {text-decoration: none !important; color:#000;}

.redemore {display: block;margin: 0 auto;}

.redemore_main{background:#FFF;}

.redemore_main h4{text-align:center;}

.social{display: block;margin: 0 auto;}

.headerContent h4{

color: #fff;

float: right;

font-size: 16px !important;

font-weight: bold;

position: relative;

right: 52px;

top: -22px;

}

/* /\/\/\/\/\/\/\/\/ MOBILE STYLES /\/\/\/\/\/\/\/\/ */

@media only screen

and (min-device-width : 375px) // or 213.4375em

and (max-device-width : 667px) // or 41.6875em

and (width : 375px) // or 23.4375em

and (height : 559px) // or 34.9375em

and (orientation : portrait)

and (color : 😎

and (device-aspect-ratio : 375/667)

and (aspect-ratio : 375/559)

and (device-pixel-ratio : 2)

and (-webkit-min-device-pixel-ratio : 2)

{

/* /\/\/\/\/\/\/ CLIENT-SPECIFIC MOBILE STYLES /\/\/\/\/\/\/ */

body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:none !important;} /* Prevent Webkit platforms from changing default text sizes */

body{width:100% !important; min-width:100% !important;} /* Prevent iOS Mail from adding padding to the body */

/* /\/\/\/\/\/\/ MOBILE RESET STYLES /\/\/\/\/\/\/ */

#bodyCell{padding:10px !important;}

/* /\/\/\/\/\/\/ MOBILE TEMPLATE STYLES /\/\/\/\/\/\/ */

/* ======== Page Styles ======== */

/**

* @tab Mobile Styles

* @section template width

* @tip Make the template fluid for portrait or landscape view adaptability. If a fluid layout doesn't work for you, set the width to 300px instead.

*/

#templateContainer{

max-width:600px !important;

/*@editable*/ width:100% !important;

}

/**

* @tab Mobile Styles

* @section heading 1

* @tip Make the first-level headings larger in size for better readability on small screens.

*/

h1{

/*@editable*/ font-size:24px !important;

/*@editable*/ line-height:100% !important;

}

/**

* @tab Mobile Styles

* @section heading 2

* @tip Make the second-level headings larger in size for better readability on small screens.

*/

h2{

/*@editable*/ font-size:20px !important;

/*@editable*/ line-height:100% !important;

}

/**

* @tab Mobile Styles

* @section heading 3

* @tip Make the third-level headings larger in size for better readability on small screens.

*/

h3{

/*@editable*/ font-size:18px !important;

/*@editable*/ line-height:100% !important;

}

/**

* @tab Mobile Styles

* @section heading 4

* @tip Make the fourth-level headings larger in size for better readability on small screens.

*/

h4{

/*@editable*/ font-size:16px !important;

/*@editable*/ line-height:100% !important;

}

/* RESPONSIVE ANOTHER */

.top_button{

color: #fff;

float: right;

font-size: 9px !important;

font-weight: bold;

position: relative;

right: 35px;

top: -12px;

}

/* ======== Header Styles ======== */

#templatePreheader{display:none !important;} /* Hide the template preheader to save space */

/**

* @tab Mobile Styles

* @section header image

* @tip Make the main header image fluid for portrait or landscape view adaptability, and set the image's original width as the max-width. If a fluid setting doesn't work, set the image width to half its original size instead.

*/

#headerImage{

height:auto !important;

/*@editable*/ max-width:600px !important;

/*@editable*/ width:100% !important;

}

/**

* @tab Mobile Styles

* @section header text

* @tip Make the header content text larger in size for better readability on small screens. We recommend a font size of at least 16px.

*/

.headerContent{

/*@editable*/ font-size:20px !important;

/*@editable*/ line-height:125% !important;

}

/* ======== Body Styles ======== */

/**

* @tab Mobile Styles

* @section body image

* @tip Make the main body image fluid for portrait or landscape view adaptability, and set the image's original width as the max-width. If a fluid setting doesn't work, set the image width to half its original size instead.

*/

#bodyImage{

height:auto !important;

/*@editable*/ max-width:560px !important;

/*@editable*/ width:100% !important;

}

#bodyImage_more{

height:auto !important;

/*@editable*/ width:100% !important;

}

/**

* @tab Mobile Styles

* @section body text

* @tip Make the body content text larger in size for better readability on small screens. We recommend a font size of at least 16px.

*/

.bodyContent{

/*@editable*/ font-size:18px !important;

/*@editable*/ line-height:125% !important;

}

/* ======== Column Styles ======== */

.templateColumnContainer{display:block !important; width:100% !important;}

/**

* @tab Mobile Styles

* @section column image

* @tip Make the column image fluid for portrait or landscape view adaptability, and set the image's original width as the max-width. If a fluid setting doesn't work, set the image width to half its original size instead.

*/

.columnImage{

height:auto !important;

/*@editable*/ max-width:480px !important;

/*@editable*/ width:100% !important;

}

.columnImage_top{

height:auto !important;

/*@editable*/ max-width:100% !important;

/*@editable*/ width:100% !important;

}

/**

* @tab Mobile Styles

* @section left column text

* @tip Make the left column content text larger in size for better readability on small screens. We recommend a font size of at least 16px.

*/

.leftColumnContent{

/*@editable*/ font-size:16px !important;

/*@editable*/ line-height:125% !important;

}

/**

* @tab Mobile Styles

* @section right column text

* @tip Make the right column content text larger in size for better readability on small screens. We recommend a font size of at least 16px.

*/

.rightColumnContent{

/*@editable*/ font-size:16px !important;

/*@editable*/ line-height:125% !important;

}

/* ======== Footer Styles ======== */

/**

* @tab Mobile Styles

* @section footer text

* @tip Make the body content text larger in size for better readability on small screens.

*/

.footerContent{

/*@editable*/ font-size:14px !important;

/*@editable*/ line-height:115% !important;

}

.footerContent a{display:block !important;} /* Place footer social and utility links on their own lines, for easier access */

}

</style>

</head>

<span class="preheader" style="display: none !important; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0; mso-hide: all">{{my.preheader}}</span>

<tr>

<tr>

<tr>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<tr>

</tr>

<tr>

<h1 style="text-align: center;"><span style="font-size: 30px; font-family: arial, helvetica, sans-serif;">Hawks vs.

Nets | Tonight @ 7:30 p.m.<br />

</span><br />

</h1>

<span style="font-family: arial, helvetica, sans-serif;">Doors will open at 6 p.m.

for the Hawks vs.

Nets 7:30 p.m.

game.

That's 90 minutes prior to the 7:30 p.m.

tipoff.

Please arrive early to give ample time for traffic, parking and additional security.

You also don't want to miss a second of our breathtaking 3D player introductions!</span><br />

<br />

</div>

<div><span style="font-family: arial, helvetica, sans-serif;"><strong>UPGRADE YOUR EXPERIENCE AND CREATE A ONCE-IN-A-LIFETIME MEMORY:</strong></span><br />

<span style="font-family: arial, helvetica, sans-serif;">Download the Hawks app and make your Hawks game day experience one-in-a-million with

exclusive Hawks Memories.

To have access to game day upgrades at a discounted rate and create a once in a lifetime experience, simply <span style="color: #f5002f;"><a href="http://www.nba.com/hawks/hawks-mobile-app?mkt_tok=3RkMMJWWfF9wsRomrfCcI63Em2iQPJWpsrB0B%2FDC18kX3RUv..."

target="_blank" style="color: #f5002f;">click here</a></span>.</span><br />

<br />

</div>

<div><span style="font-family: arial, helvetica, sans-serif;"><strong>BUILD YOUR OWN TICKET PACKAGE WITH A FLEX PLAN:</strong></span><br />

<span style="font-family: arial, helvetica, sans-serif;">Get the best seats for the best games at the best prices today by purchasing an Atlanta Hawks Flex

Plan. <a href="http://www.nba.com/hawks/2015-16-flex-plan-interest?mkt_tok=3RkMMJWWfF9wsRomrfCcI63Em2iQPJWpsrB0B%2F..." target="_blank"><span style="color: #f5002f;">Click here to learn more</span>.</a></span><br />

<br />

</div>

<div><span style="font-family: arial, helvetica, sans-serif;"><strong>PARKING AND DIRECTIONS:</strong></span><br />

<span style="font-family: arial, helvetica, sans-serif;">To help you get around downtown Atlanta, we are giving you parking maps, directions, and allowing you to purchase your parking

in advance.

Your parking pass will be valid for the Centennial Parking Deck located directly across from Philips Arena.

There are a limited number of parking spaces.

Be sure to get yours before they sell out.</span></div>

<div>

<ul>

<li><span style="font-family: arial, helvetica, sans-serif;">Please <span style="color: #f5002f;"><a href="http://www.ticketmaster.com/parking-philips-arena-hawks-vs-atlanta-georgia-01-16-2016/event/0E004F12..." target="_blank" style="color: #f5002f;">click here</a></span> to purchase

parking.</span></li>

<li><span style="font-family: arial, helvetica, sans-serif;">Please <span style="color: #f5002f;"><a href="http://www.seats3d.com/nba/atlanta_hawks/parking/#/parking/" target="_blank" style="color: #f5002f;">click here</a></span> to access the Hawks interactive parking map.</span></li>

</ul>

</div>

<div><span style="font-family: arial, helvetica, sans-serif;"><strong>TAKING MARTA:</strong></span><br />

<span style="font-family: arial, helvetica, sans-serif;">Philips Arena is located at the Dome/GWCC/Philips Arena/CNN stop. <em><strong>Due to several events being held in the downtown

area, we strongly suggest taking MARTA.</strong></em></span><br />

<br />

</div>

<div><span style="font-family: arial, helvetica, sans-serif;"><strong>MORE INFORMATION:</strong></span><br />

<span style="font-family: arial, helvetica, sans-serif;">Philips Arena has new concession choices in the concourses for the 2015-16 season which we know that you will enjoy.

They include:</span><br />

<span style="font-family: arial, helvetica, sans-serif;">• Gluten free food options located by Portal 11.</span><br />

<span style="font-family: arial, helvetica, sans-serif;">• Vegetarian entrees: The Works, Portal 6; Courtside grill, Portal 9; Chops Club; Slam

Dunk Pizza, Portals 3/11/15/26.</span><br />

<br />

<span style="font-family: arial, helvetica, sans-serif;"><strong>DESIGNATED DRIVER PROGRAM:</strong></span><br />

<span style="font-family: arial, helvetica, sans-serif;">In an effort to increase awareness of guest responsibility at events, the

Atlanta Hawks have launched a Designated Driver Program presented by the Georgia Governor’s Office of Highway Safety encouraging guests to volunteer as designated drivers to and from Philips Arena. <span style="color: #f5002f;"><a href="http://www.nba.com/hawks/designated-driver-pledge?mkt_tok=3RkMMJWWfF9wsRonvKjPZKXonjHpfsX66u4sUaSxlM..." target="_blank" style="color: #f5002f;">Sign up</a></span> to be a Team Player Designated Driver

and receive a coupon for a Coca-Cola fountain product on us and enter for a chance to win an Atlanta Hawks prize pack.</span></div>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<tr>

<h4 style="padding-top:10px; color:#fff; font-size:18px; font-family:titillium; text-align:center; font-weight:bold">NEXT GAMES</h4>

</td>

</tr>

</table>

<tr>

</td>

</tr>

<tr>

<h4><span style="color: #ffffff; font-family: arial, helvetica, sans-serif;">Hawks vs. Magic</span><br />

</td>

</tr>

</table>

</td>

<tr>

</td>

</tr>

<tr>

<h4><span style="color: #ffffff; font-family: arial, helvetica, sans-serif;">Hawks vs. Clippers</span><br />

</td>

</tr>

</table>

</td>

<tr>

</td>

</tr>

<tr>

<h4><span style="color: #ffffff; font-family: arial, helvetica, sans-serif; font-size: 16px;">Hawks vs. Mavericks</span><br />

</span> </h4>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<tr>

</tr>

<tr>

<h2><span style="font-family: arial, helvetica, sans-serif;">SKYVIEW FERRIS WHEEL</span></h2>

<span style="font-family: arial, helvetica, sans-serif;">Atlanta’s Ferris Wheel is just steps away from Philips Arena. Arrive early and take a spin or round out your evening in style in your private gondola. Open late after all Hawk’s games.</span><br /></td>

</tr>

</table>

<tr>

</tr>

<tr>

<p><span style="font-family: arial, helvetica, sans-serif;">When the Hawks score 50 points by halftime, you get 50% off your online order the next day using promo code 50HAWKS. <em>Valid at participating Atlanta area locations.<br />

</em></span><br />

</p>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<h1 style="text-align:center;padding:20px 0px;background:#fff;">AD BANNER</h1>

</td>

</tr>

</table>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

<tr>

</a>

</td>

</a>

</td>

</a>

</td>

</a>

</td>

</a>

</td>

</tr>

</table>

</td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

</div>

</center>

</body>

</html>

Stijn_Heijthuij · ‎01-27-2016

Hi Nathan,

Im' sensing a little frustration here.

Campaignmonitor has a great resource about this: Web Font Support in Email Clients | Campaign Monitor

They also have a great one on which CSS elements you can and cannot use in different clients: CSS Support Guide for Email Clients | Campaign Monitor

What you can try is to add your Trillium font, comma separated with some fallback fonts.

Litmus has a good resource for this: Outlook and fallback fonts > Litmus

Let us know if this works?

Anonymous · ‎01-28-2016

I you look at the script, i have already added fall back fonts but not even the basic ones like Arial are showing up in the emails. It is constantly falling to times new roman.

Frank_Breen2 · ‎01-28-2016

This looks like a MailChimp template, try changing in the <head>

body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}

to

body, div, span, table, td, p, a, li, blockquote{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; font-family: arial;}

This will force clients that supports the <style> in the <head> (most apart from Gmail) to set the font-family to arial

Anonymous · ‎12-13-2016

Hi!

Not sure if this is still relevant, but I stumbled upon this thread while researching using custom fonts in Marketo Email Templates. While the thread itself doesn't inspire much hope, the article that Alex Munro references speaks to what I believe your issue is.

Hope it helps!

-Tim.