Email How-To Tip: How can I use web fonts in my HTML emails?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("http://web.archive.org/web"); __wm.wombat("https://lsoft.com/news/techtipMAE-issue5-2021.asp","20240724092048","http://web.archive.org/","web","/_static/", "1721812848"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <link href="http://web.archive.org/web/20240724092048cs_/https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <title>Email How-To Tip: How can I use web fonts in my HTML emails?</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"> html { width: 100% !important; height: 100% !important; } body, #bodytable { width: 100% !important; height: 100% !important; margin: 0; padding: 0; } body, table, td, p, a, li, blockquote { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } table, td { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; } img { -ms-interpolation-mode: bicubic; } img, a img { border: 0; outline: none; text-decoration: none; } .ReadMsgBody { width: 100%; } .ExternalClass { width: 100%; } .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; } @media only screen and (max-width: 680px) { .container { width: 100% !important; } .cell { width: 100% !important; display: block !important; } } </style> <style type="text/css"> p.head { font-family: 'Montserrat', 'Segoe UI', sans-serif; font-size: 20px; color: #333333; font-style: normal; font-weight: bold; text-align: left } p.subhead { font-family: 'Montserrat', 'Segoe UI', sans-serif; font-size: 18px; color: #333333; font-style: italic; font-weight: normal; text-align: left } p.sectionhead { font-family: 'Montserrat', 'Segoe UI', sans-serif; font-size: 18px; color: #333333; font-style: normal; font-weight: bold; text-align: left } p.question { font-family: 'Montserrat', 'Segoe UI', sans-serif; font-size: 18px; color: #333333; font-style: normal; font-weight: bold; text-align: left } p.byline { font-family: 'Montserrat', 'Segoe UI', sans-serif; font-size: 15px; color: #666666; font-style: normal; font-weight: normal; text-align: left } p.body { font-family: 'Montserrat', 'Segoe UI', sans-serif; font-size: 15px; color: #333333; font-style: normal; font-weight: normal; text-align: left } p.body a { color: #3366CC; text-decoration: underline; } li.body { font-family: 'Montserrat', 'Segoe UI', sans-serif; font-size: 15px; color: #333333; font-style: normal; font-weight: normal; text-align: left; margin-bottom: 15px; } li.body a { color: #3366CC; text-decoration: underline; } img.image-bio { margin: 15px 20px 15px 5px; padding: 0px; float: left } img.image-left { margin: 0px 25px 10px 0px; padding: 0px; float: left; } img.image-right { margin: 0px 0px 10px 25px; padding: 0px; float: right; } img.image-center { margin: 10px 5px 10px 5px; padding: 0px; margin-left: auto; margin-right: auto; } div.tweet { float: right; } hr { height: 1px; color: #EAEAEA; border-style: solid; border-color: #EAEAEA; border-width: 1px 0px 0px 0px; } div.code { width: 100%; border: 1px solid #DEDEDE; padding: 2px; background-color: #EAF1DD; } tt { font-size: 14px; } table.code { width: 100%; max-width: 660px; overflow: auto; background-color: #FAFAFA; border: 1px solid #EAEAEA; } td.code { padding: 10px; } .width-100 { width: 100%; } .cell-left { text-align: left; } .cell-right { text-align: right; } @media only screen and (max-width: 680px) { img.image-left { width: 100%; float: none; margin-left: auto; margin-right: auto; } img.image-right { width: 100%; float: none; margin-left: auto; margin-right: auto; } img.image-center { width: 100%; } } @media only screen and (max-width: 550px) { .cell-left { display: block; text-align: left; } .cell-right { display: block; text-align: left; } } </style> </head> <body bgcolor="#FFFFFF" style="background-color: #FFFFFF"> <style type="text/css"> @media only screen and (max-width: 680px) { .container { width: 100% !important; } .cell { width: 100% !important; display: block !important; } } </style> <table border="0" cellpadding="0" cellspacing="0" height="100%" id="bodytable" style="width: 100%; height: 100%; margin: 0px; padding: 0px; min-width: 320px" width="100%"> <tr> <td align="center" bgcolor="#FFFFFF" style="background-color: #FFFFFF; vertical-align: top" valign="top"> <div><br/></div> <table border="0" cellpadding="0" cellspacing="0" class="container" style="border: 1px solid #EAEAEA; width: 680px" width="680"> <tr> <td> <table border="0" cellpadding="0" cellspacing="0" style="width: 100% !important" width="100%"> <tr> <td bgcolor="#FFFFFF" style="background-color: #FFFFFF; padding: 0px"><div><a href="issue5-2021.asp"><img alt="LISTSERV at Work" src="/web/20240724092048im_/https://lsoft.com/news/lw/header2019.jpg" style="display: block; height: auto; width: 100%" width="678"/></a></div></td> </tr> </table> <table border="0" cellpadding="0" cellspacing="0" style="width: 100%" width="100%"> <tr> <td bgcolor="#FFFFFF" style="background-color: #FFFFFF"> <table border="0" cellpadding="0" cellspacing="0" style="width: 100% !important" width="100%"> <tr> <td class="cell" style="width: 100%" width="100%"> <table border="0" cellpadding="0" cellspacing="0" style="width: 100% !important" width="100%"> <tr> <td style="padding: 10px 15px 10px 15px"> <table border="0" cellpadding="0" cellspacing="0"> <tr><td style="background-color: #BE1E2D; padding: 8px 10px 8px 10px"><div style="font-family: 'Montserrat', 'Segoe UI', sans-serif; font-size: 15px; color: #FFFFFF; font-style: normal; font-weight: normal; text-align: left"><b>Email How-To</b> Tip</div></td></tr> </table> <p class="question">Q: How can I use web fonts in my HTML emails?</p> <p class="byline">By Johannes Hubert<br/>Senior Applications Programmer, L-Soft</p> <p class="body">When creating a beautifully styled HTML email, the designer may be tempted to also use a nice font that matches the design. But while it's easy in most HTML editors to specify any font you like, with email, recipients can generally only see the font if it's also installed on their device. If not, then the recipient only sees a more or less matching fallback font as a substitute.</p> <p class="sectionhead">Using Web Fonts in Email</p> <p class="body">One approach that tries to solve this problem are web fonts. A web font is not installed locally on the recipient's device but is downloaded from a font server on demand by the recipient's browser, or in case of email, by the recipient's email client. Support for web fonts in HTML email is not perfect as some email clients are still unable to display them. But more and more can, so web fonts are slowly but surely becoming an intriguing new option for HTML email designers.</p> <p class="body">A challenge with embedding a web font into an HTML message is that it's a quite technical process and, if done improperly, may even negatively impact the rendering of the fallback fonts. And even if you manage to embed the font properly by editing the raw HTML code, the new font may not be supported by the editor itself, so you cannot see the actual font while designing the message.</p> <p class="sectionhead">Defining Web Fonts in LISTSERV Maestro</p> <p class="body">LISTSERV Maestro addresses all of these problems. You only need to go through the technical process of defining a web font once per font (which can be done by a single user who prepares the fonts for all other users in the group). Once defined, you can then freely use each web font in your email messages, templates and on the customized subscriber pages. LISTSERV Maestro will properly show the web fonts in the editor and automatically embeds all web fonts that are used in a message so that they are compatible with as many email clients as possible. And those clients that cannot display web fonts will show the defined fallback fonts instead.</p> <p class="body">To define a new web font, use the navigation menu and go to <b>Account Name</b> > <b>Preferences</b> > <b>Editor Fonts</b>.</p> <div align="center"><img alt="" title="" src="/web/20240724092048im_/https://lsoft.com/news/issue5-2021/techtip-mae1.gif" class="image-center"/></div> <p class="body">The Editor Fonts screen lists all currently defined fonts. As you can see, some standard fonts and some web fonts are already defined by default and are, therefore, already available in the LISTSERV Maestro editor.</p> <div align="center"><img alt="" title="" src="/web/20240724092048im_/https://lsoft.com/news/issue5-2021/techtip-mae2.gif" class="image-center"/></div> <p class="body">Web fonts are hosted on font servers, from where the recipients' email clients can download the fonts on demand. You could theoretically host such a server yourself, but usually you will simply use a web font from one of the freely usable web font repositories, like for example Google Fonts. Usually, you will find the font that you want to use by browsing through such a repository in the first place.</p> <p class="body">When you find a font that you would like to use in LISTSERV Maestro (make sure that the font's license allows you to use it), go to the Editor Fonts screen as shown above and click the <b>Add Font</b> button in the top-right corner. In the dialog that opens, enter the following properties of the font:</p> <div align="center"><img alt="" title="" src="/web/20240724092048im_/https://lsoft.com/news/issue5-2021/techtip-mae3.gif" class="image-center"/></div> <ul> <li class="body"><b>Font Name:</b> Specify the name of the font. This must be a single name. Do not enclose the font name in any quotes and do not add any additional escape characters. Simply enter the plain and exact font name, for example <b>Dancing Script</b>.</li> <li class="body"><b>Fallback Fonts:</b> This property is optional. Use it to specify one or more fonts that will be used as fallback fonts if the recipient's email client cannot render web fonts. If you specify multiple fonts, they must be separated by a comma. The fonts must be specified using the correct spelling, quoting and escaping rules for fonts in CSS, for example <b>'Times New Roman','Times'</b>.<br/><br/>Note that a fallback font must be present on the recipient's system to be considered. If the first fallback font is not present, then the email client uses the next fallback font and so on. If none of the fallback fonts are available (or none is specified in the first place), the email client will fall back to the "Default Fallback" (see next item).</li> <li class="body"><b>Default Fallback:</b> This property defines the final fallback if the web font itself cannot be rendered and if none of the fallback fonts specified above are available. Select one of the available options, for example <b>serif</b>.</li> <li class="body"><b>Font Type:</b> As you are defining a new web font, you must set this selection to <b>Web Font</b>.</li> <li class="body"><b>Web Font URL:</b> This is where it starts to get a bit technical. To find out the URL that you need to enter here, use a browser to visit the online font repository where you found the font in the first place. On the page for this font, you should find an option that tells you how to "embed" or "use" the font on your web page. The details for this are different between repositories and frequently change over time, so you may have to look around a bit to find it. This is usually shown as embedding either a <b><link></b> tag or an <b>@import</b> directive, both of which are fine for our purposes. The <b><link></b> tag is quoted with some HTML code to copy & paste, the <b>@import</b> directive with some CSS code. Both contain the font URL at some location.<br/><br/>Copy & paste this font URL (without any of the surrounding HTML or CSS code) into the Web Font URL field of the dialog, for example <b>https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap</b></li> </ul> <p class="body">The filled-out dialog then looks something like this:</p> <div align="center"><img alt="" title="" src="/web/20240724092048im_/https://lsoft.com/news/issue5-2021/techtip-mae4.gif" class="image-center"/></div> <p class="body">Click the <b>OK</b> button to save the settings and, if everything was specified correctly, the new font will appear among the list of available fonts:</p> <div align="center"><img alt="" title="" src="/web/20240724092048im_/https://lsoft.com/news/issue5-2021/techtip-mae5.gif" class="image-center"/></div> <p class="body">And that's it. From now on, you can use this font in all editors in LISTSERV Maestro that allow a font selection, and LISTSERV Maestro will take care of embedding the necessary HTML code for you so that the font also appears correctly in all web font compatible email clients.</p> <p class="sectionhead">Got Feedback?</p> <table class="width-100"> <tr> <td class="width-100 cell-left"><p class="body">Let us know about topics and tasks you'd like to see covered in future tech tips.</p></td> <td class="cell-right"><a href="http://web.archive.org/web/20240724092048/mailto:editor@lsoft.com"><img alt="Get in Touch" title="Get in Touch" src="/web/20240724092048im_/https://lsoft.com/news/lw/icon_getintouch.png" style="display: block"/></a></td> </tr> </table> <br/> <p class="sectionhead">Next Steps</p> <style type="text/css"> .width-100 { width: 100%; } td.circle-left { width: 210px; height: 200px; background-image: url("/web/20240724092048im_/https://lsoft.com/images/icon_support.png"); background-repeat: no-repeat; background-position: center; cursor: pointer; } td.circle-middle { width: 210px; height: 200px; background-image: url("/web/20240724092048im_/https://lsoft.com/images/icon_sales.png"); background-repeat: no-repeat; background-position: center; cursor: pointer; } td.circle-right { width: 210px; height: 200px; background-image: url("/web/20240724092048im_/https://lsoft.com/images/icon_information.png"); background-repeat: no-repeat; background-position: center; cursor: pointer; } div.trigger { font-family: 'Montserrat', sans-serif; color: #FFFFFF; font-size: 18px; font-weight: bold; text-align: center; width: 210px; height: 200px; margin-left: auto; margin-right: auto; } div.spacing { width: 180px; margin-left: auto; margin-right: auto; padding-top: 80px; } div.trigger a { color: #FFFFFF; text-decoration: none; } @media (max-width: 767px) { td.circle-left { width: 100% !important; display: block !important; height: 200px; } td.circle-middle { width: 100% !important; display: block !important; height: 200px; } td.circle-right { width: 100% !important; display: block !important; height: 200px; } } </style> <script type="text/javascript"> function goTo(dot) { if (dot == 1) { window.open('/products/maestro.asp','_blank') } if (dot == 2) { window.open('/resources/techtip.asp?filter=listserv-maestro','_blank') } if (dot == 3) { window.open('/contact/econtact.asp?id=sales','_blank') } } </script> <table class="width-100"> <tr> <td class="circle-left" onclick="goTo(1)"><div class="trigger"><div class="spacing"><a href="/web/20240724092048/https://lsoft.com/products/maestro.asp" target="_blank">Learn More About LISTSERV Maestro</a></div></div></td> <td class="circle-middle" onclick="goTo(2)"><div class="trigger"><div class="spacing"><a href="/web/20240724092048/https://lsoft.com/resources/techtip.asp?filter=listserv-maestro" target="_blank">See More LISTSERV Maestro Tech Tips</a></div></div></td> <td class="circle-right" onclick="goTo(3)"><div class="trigger"><div class="spacing"><a href="/web/20240724092048/https://lsoft.com/contact/econtact.asp?id=sales" target="_blank">Contact Sales and Customer Service</a></div></div></td> </tr> </table> <br/> </td> </tr> </table> </td> </tr> </table> </td> </tr> <table border="0" cellpadding="0" cellspacing="0" style="width: 100% !important" width="100%"> <tr> <td bgcolor="#FAA705" style="background-color: #FAA705; padding: 10px 15px 10px 15px"><div style="font-family: 'Montserrat', 'Segoe UI', sans-serif; font-size: 15px; color: #FFFFFF; font-weight: normal; font-style: normal; text-align: right">© L-Soft 2021. All Rights Reserved.</div></td> </tr> </table> </td> </tr> </table> <table border="0" cellpadding="0" cellspacing="0" class="container" style="width: 680px" width="680"> <tr> <td> <div><br/></div> <br/> <script type="text/javascript" src="http://web.archive.org/web/20240724092048js_/https://platform-api.sharethis.com/js/sharethis.js#property=651f3fbd6ee9de001217ae6d&product=inline-share-buttons&source=platform" async="async"></script> <div class="sharethis-inline-share-buttons"></div> <br/> <br/> <div style="text-align: center"><a href="/web/20240724092048/https://lsoft.com/go/maestro101.asp" target="_blank"><img src="/web/20240724092048im_/https://lsoft.com/images/maestro-powered.png" alt="Powered by LISTSERV Maestro" title="Powered by LISTSERV Maestro"/></a></div> <br/> <div style="font-family: 'Montserrat', 'Segoe UI', sans-serif; font-size: 15px; color: #333333; font-style: normal; font-weight: normal; text-align: center; line-height: 1.3"><a href="http://web.archive.org/web/20240724092048/https://maestro.lsoft.com/list/subscribe.html?mContainer=277&mOwner=G1d1f1g&mListId=HL%23719" target="_blank" style="font-family: 'Montserrat', 'Segoe UI', sans-serif; font-size: 15px; color: #3366CC; font-style: normal; font-weight: normal; text-align: right; text-decoration: underline">Subscribe to This Newsletter</a></div> <br/> <br/> <script async src="http://web.archive.org/web/20240724092048js_/https://www.googletagmanager.com/gtag/js?id=UA-3167554-2"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-3167554-2'); </script> </td> </tr> </table> </td> </tr> </table> </body> </html>

CINXE.COM

Email How-To Tip: How can I use web fonts in my HTML emails?