{"id":3425,"date":"2025-01-13T11:54:54","date_gmt":"2025-01-13T16:54:54","guid":{"rendered":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts\/"},"modified":"2025-01-13T12:55:07","modified_gmt":"2025-01-13T17:55:07","slug":"the-ultimate-guide-to-web-fonts","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts","title":{"rendered":"The Ultimate Guide to Web Safe Fonts for Email Marketing"},"content":{"rendered":"\n\n\t<div id=\"simple-text-block-block_0fa1e7c0ff31ee669b85f95d0dc3553e\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400;\">Typography is one of those key brand elements that you never notice when it\u2019s done right, but when it\u2019s weird\u2026it\u2019s really weird. <\/span><span style=\"font-weight: 400;\">(No shade to Comic Sans, but\u2026)<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Emails should look and feel like they belong to your brand, but\u2014like with all things email\u2014it\u2019s not as simple as copying-and-pasting a font from the brand guidelines your design team spent hours deliberating over.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">With email marketing, you have two choices for your live text: Web fonts and web safe fonts. In this post, we\u2019ll talk through the differences between the two, why we recommend web safe fonts, and how you can embed them in your emails so you can stay aligned with your brand <\/span><i><span style=\"font-weight: 400;\">and <\/span><\/i><span style=\"font-weight: 400;\">make your emails accessible for all of your subscribers.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In this article we&#8217;ll cover:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#web-fonts\"><span style=\"font-weight: 400;\">Web fonts vs. web safe fonts<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#fonts-email\"><span style=\"font-weight: 400;\">How fonts work in email<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#custom-fonts\"><span style=\"font-weight: 400;\">The problem with custom web fonts<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#choose-font\"><span style=\"font-weight: 400;\">How to choose the right font for your brand<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#embed-fonts\"><span style=\"font-weight: 400;\">How to embed web fonts in email<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#find-fonts\"><span style=\"font-weight: 400;\">Where to find web fonts<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#inspiration\"><span style=\"font-weight: 400;\">Inspiration for using web fonts in your emails<\/span><\/a><\/li>\n<\/ul>\n<h2><span id=\"web-fonts\" style=\"font-weight: 400;\">Web fonts vs. web safe fonts<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">You\u2019re probably reading this blog post with a web safe font\u2014fonts you know and love like Arial, Helvetica, and Open Sans. These are pre-installed fonts that come with all operating systems, so you know they\u2019ll render correctly if you use them in an email.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You also have the option to use a web font. These are hosted externally, offering you more variety (like using your brand\u2019s custom font), but potentially less reliable for email templates.<\/span><\/p>\n<table class=\"table table-striped\">\n<thead>\n<tr>\n<th scope=\"col\">Web Fonts<\/th>\n<th scope=\"col\">Web Safe Fonts<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>More creative freedom<\/strong> with a wider variety to choose from.<\/td>\n<td>Your subscriber likely has these fonts installed, making these <strong>a safe choice<\/strong>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Align your emails<\/strong> with the rest of your branding materials.<\/td>\n<td><strong>Subscribers know what they look like<\/strong> and expect to see these fonts online.<\/td>\n<\/tr>\n<tr>\n<td><strong>Higher risk<\/strong> of your email not rendering exactly as planned, requiring additional testing and development time.<\/td>\n<td>There are a <strong>limited number<\/strong> of web safe fonts, making it difficult for your brand to stand out.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><span style=\"font-weight: 400;\">Let\u2019s dive deeper into each:<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">What are web safe fonts?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Web safe fonts prompt the web browser to pull the font from your local font directory, AKA the pre-installed fonts on everyone\u2019s computers. Web safe fonts are safe to use because there\u2019s a strong chance your subscribers will already have them.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The downside of web safe fonts is that your options are more limited. Plus, web safe fonts are less likely to stand out (if that\u2019s what you\u2019re aiming for) because they\u2019re so common.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Below are some of the <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/email-typography-fonts\"><span style=\"font-weight: 400;\">best fonts for email<\/span><\/a><span style=\"font-weight: 400;\"> due to their readability, widespread support across platforms, and web safe nature:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Arial<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Helvetica<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Verdana<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Georgia<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Times New Roman<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Tahoma<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">You can\u2019t assume that a popular font like Garamond, Courier New, or Cambria will be automatically web safe. Before you choose a web safe font (or a fallback font for web fonts, which we\u2019ll talk more about), double check <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.w3schools.com\/cssref\/css_websafe_fonts.php\"><span style=\"font-weight: 400;\">with a list like this one.<\/span><\/a><\/p>\n<h3><span style=\"font-weight: 400;\">What are web fonts?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Web fonts are pulled from a server, either one you host yourself or an external one such as Google or Adobe. Because of this, the variety of fonts you can use is much larger and will work on any computer\u2026as long as the email client cooperates.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Using a custom font sounds like a good idea, especially if your brand already uses one for other deliverables. We\u2019ll talk more about email client support in a moment, but spoiler: Gmail and Outlook cause some trouble. (Can we expect anything else? \ud83e\udee0)<\/span><\/p>\n\n<div class=\"container pt-3 pb-5 px-1\">\n\t<div class=\"row blog-cta-blue rounded-5 p-4\">\n\t\t<div class=\"mx-auto col-12\">\n\t\t\t<div class=\"row d-flex align-items-center\">\n\t\t\t<div class=\"col-lg-6 col-12\">\n\t\t\t\t<p class=\"bold fs-4\">Build impactful emails with expert techniques\n<\/p>\n\t\t\t\t<p>Gain the essential skills in email development. Create responsive, high-performing emails that look great on any device.\n<\/p>\n\t\t\t\t<button class=\"button-blue download\"><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/resources\/foundations-of-email-development\" class=\"text-white text-decoration-none\">Master development<\/a><\/button>\n\t\t\t<\/div><!--col-6-->\n\t\t\t<div class=\"col-6 d-none d-lg-block\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/09\/download-blog-cta-09232024.svg\" width=\"221\" height=\"175\" alt=\"\">\n\t\t\t<\/div><!--col-6-->\n\t\t\t<\/div> <!--row-->\n\t\t<\/div><!--col-12-->\n\t<\/div><!--row-->\n<\/div><!--container-->\n\t\n\t\n\t\n\t\n\n<h2><span id=\"fonts-email\" style=\"font-weight: 400;\">How fonts work in email\u00a0<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">When designers pick fonts for their website, they can generally pick anything they want, including a custom font. That\u2019s because on a website, you can use CSS or HTML code to point to wherever the font is hosted online, whether it\u2019s a Google Font, Adobe Font, or something else.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Emails don&#8217;t work like that because\u2026of course they don&#8217;t.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Your email code declares a font using a CSS property called font-family. When your subscribers open your email, the browser reads the font-family property and pulls in the font to use. With web safe fonts, that\u2019s easy-peasy. But email clients get picky about which web fonts they support, so you can\u2019t just pick any font.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u201cI 100% recommend using a fallback font anytime you send an email, because web fonts aren\u2019t supported everywhere,\u201d says Carin Slater, Litmus\u2019 Lifecycle Email Marketing Manager. \u201cIn theory, it should be very straightforward, but this is email we\u2019re talking about here.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This font-family property can have just one font name or multiple font names\u2014often referred to as a font stack. Without listing multiple font names, the email client gets to decide your backup font.<\/span><\/p>\n<h2><span id=\"custom-fonts\" style=\"font-weight: 400;\">The problem with custom web fonts in emails\u00a0<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Custom fonts introduce higher risk to your email marketing program. Because it\u2019s not super likely the average reader will notice the differences between your branded font and a web safe font, it\u2019s safer to go with a web safe font. That doesn\u2019t mean you\u2019re stuck with the same-old fonts that everyone uses like Helvetica, but it does require more development and testing time to get around some common issues:<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">1. Rendering issues<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">You can use a custom web font in your emails if that matters to your brand. But you\u2019ll spend a lot of extra time and effort in development and testing to do so, and you\u2019ll still need to choose a fallback font no matter what.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you don\u2019t pay attention to typography, you\u2019ll see your email render just a little differently on different devices. If the default font is a little taller, for example, it may bump all of your text down a line, pull in less <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-preview-text-support\"><span style=\"font-weight: 400;\">preview text<\/span><\/a><span style=\"font-weight: 400;\">, or mess up your carefully crafted responsive coding. Custom fonts might also interfere with elements like standard <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-bulleted-lists-in-html-email\"><span style=\"font-weight: 400;\">HTML bullets<\/span><\/a><span style=\"font-weight: 400;\">, leading to misaligned designs.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">These are the kinds of tiny details that make an email marketer want to bang their head against a wall.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">2. Compatibility challenges<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Since web font support is hit-and-miss across email clients, it\u2019s a good idea to analyze where your subscribers typically open emails. If most of your subscribers use an email client supporting web fonts, try it. If you find your audience is mainly on a non-web font-supportive email client, you can avoid wasting time and effort.<\/span><\/p>\n<div style=\"background: #f6f6f6; border: 1px solid #ddd; padding: 15px;\">\n<table style=\"border: 0px; margin: 0px; height: 463px;\" width=\"699\">\n<thead>\n<tr>\n<th>Email client<\/th>\n<th>Web font support<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr style=\"background-color: #ffffff;\">\n<td>Apple Mail<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<\/tr>\n<tr>\n<td>Outlook 2013-2021<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td>Outlook Office 365 (Win &amp; Mac)<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<\/tr>\n<tr>\n<td>Outlook for Mac<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td>Windows 11<\/td>\n<td style=\"color: #ea7165;\">\u2718 No*<\/td>\n<\/tr>\n<tr>\n<td>Gmail App<\/td>\n<td style=\"color: #ea7165;\">\u2718 No**<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td>iOS<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<\/tr>\n<tr>\n<td>Outlook App<\/td>\n<td style=\"color: #ea7165;\">\u2718 No***<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td>Samsung Mail<\/td>\n<td style=\"color: #ea7165;\">\u2718 No***<\/td>\n<\/tr>\n<tr>\n<td>AOL Mail<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td>Gmail<\/td>\n<td style=\"color: #ea7165;\">\u2718 No*****<\/td>\n<\/tr>\n<tr>\n<td>Office 365<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td>Outlook.com<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<\/tr>\n<tr>\n<td>Yahoo! Mail<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p><span style=\"font-weight: 400;\">*(ish? Some of the webfonts were showing up but it may be that the fonts were loaded on the computer)<br \/>\n<\/span>**<span style=\"font-weight: 400;\">(Google overrides fonts &#8211; default on Android is Roboto, on iOS looks like Helvetica)<br \/>\n<\/span>***<span style=\"font-weight: 400;\">(Fonts overridden &#8211; Roboto is default sans-serif)<br \/>\n<\/span>****<span style=\"font-weight: 400;\">(ish. Liked Roboto, so there\u2019s limited support of very specific web fonts &#8211; probably specific ones from Google Fonts, possibly only Roboto since it\u2019s Google\u2019s default)<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">3. Impact on user experience<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The thing is, having a custom web font is the kind of design detail that few, if any, of your subscribers will notice. \u201cA large part of the population is not going to be able to tell the difference between Proxima Nova and Helvetica,\u201d says Slater. \u201cRemember that the point of your email is to get the message across. We love it when we can design something beautiful, but if it\u2019s beautiful and it\u2019s unreadable, that\u2019s an issue. It needs to be functional first.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When <\/span><i><span style=\"font-weight: 400;\">will <\/span><\/i><span style=\"font-weight: 400;\">they<\/span> <span style=\"font-weight: 400;\">notice? If your typography is creating a rendering issue that makes it impossible to read your emails. Broken fonts negatively impact your user experience, which makes it that much less likely someone will open or click on your email in the future. That\u2019s the opposite of what we\u2019re going for when we design emails.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ultimately, typography plays a critical role in creating <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/emails-that-convert\"><span style=\"font-weight: 400;\">emails that convert<\/span><\/a><span style=\"font-weight: 400;\"> by ensuring readability and maintaining a professional, on-brand design.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Best practices for using web fonts in emails<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">If you\u2019re going to go for a web font anyway, keep these things in mind to adhere to <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/email-design-best-practices\"><span style=\"font-weight: 400;\">email design best practices<\/span><\/a><span style=\"font-weight: 400;\">:<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">1. Choose a fallback font that matches your brand<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">If you want to use a web font, choose a fallback strategically that matches your brand\u2019s font. Slater recommends a site called <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.cssfontstack.com\/\"><span style=\"font-weight: 400;\">CSS Fonts<\/span><\/a><span style=\"font-weight: 400;\"> to find lesser-used web safe fonts that work for your brand. The site tells you what percentage of PC and Mac users have each font so you can balance style and confidence that most subscribers will see your font of choice.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">While selecting fonts, also ensure they contrast well with your email\u2019s <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/background-colors-html-email\"><span style=\"font-weight: 400;\">background color HTML<\/span><\/a><span style=\"font-weight: 400;\"> settings to maintain readability.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u201cIf you have a lot of people opening on Windows, in Outlook, and you\u2019re using a custom font, that means very few people will actually see your web font,\u201d she says. \u201cIf that\u2019s the case, I\u2019d go back to the design team and show them the numbers of how many people actually can have the brand experience they want to create. Between CSS Fonts and Litmus Analytics, you can see exactly how many people will see their chosen font. That usually helps start a productive conversation for the fallback.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Look for a fallback font that is:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">In the same font family as your web font, like serif or sans-serif, to retain your design.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">A similar <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.fonts.com\/content\/learning\/fontology\/level-1\/type-anatomy\/x-height\"><span style=\"font-weight: 400;\">x-height<\/span><\/a><span style=\"font-weight: 400;\"> to prevent your email design from falling apart when the fallback font is in use.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Observe the subtle differences in x-height between the fonts Verdana, Arial, and web font Proxima Nova.<\/span><\/p>\n<img decoding=\"async\" class=\"wp-image-27381 size-full aligncenter\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/04\/xheight.gif\" alt=\"example of x-height comparing verdana, arial, and proxima nova\" width=\"765\" height=\"97\" data-wp-editing=\"1\" \/>\n<p><span style=\"font-weight: 400;\">Each email client has a default font if the font listed in the font-family stack is unavailable. For example, Gmail uses Arial, Apple Mail uses Helvetica, and Outlook uses Times New Roman. This goes for devices, too: MacOS uses SF Pro.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">2. Avoid image-only emails that create accessibility issues<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">As a marketer and designer, you know the pressure to stay on-brand in email with colors, design, and\u2014yes\u2014typography. Web fonts let you show off your brand without relying on images for your text. Not to mention, relying heavily on <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/why-you-shouldnt-send-image-only-emails\"><span style=\"font-weight: 400;\">images for email<\/span><\/a><span style=\"font-weight: 400;\"> design can limit accessibility, as many subscribers have images turned off by default.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">One way around the fallback issue is to use images instead of live text for your email. But that\u2019s kind of a frying pan-fire scenario, because while your font will look great, image-only emails aren\u2019t accessible for subscribers with screen readers or images turned off.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u201cOften a solution for people who don\u2019t want to deal with web fonts, but still want their brand fonts, is to put all of this text into an image. It\u2019s one thing if that\u2019s for a headline or logo, but for body copy, you\u2019re going to lose your message,\u201d says Slater. \u201cIt\u2019s much easier to include a fallback than try to add huge blocks of <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-styled-alt-text-in-email\"><span style=\"font-weight: 400;\">alt text<\/span><\/a><span style=\"font-weight: 400;\"> and code around images.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you lock important copy in images because it\u2019s a way to stay on brand, portions of your audience won\u2019t know what your email says.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">3. Test your emails before every send<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Your subscribers may have a very different experience with your emails depending on their email client, browser, and device. (What\u2019s new, right?) That\u2019s why if you plan to use a web font, it\u2019s super important to test your emails.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u201cWe use Proxima Nova here at Litmus, with Helvetica as our fallback,\u201d says Slater. \u201cHelvetica is just the tiniest bit wider than Proxima Nova, so in some cases, a word will end up on another line, or sometimes it makes a text block taller than we want it to be. That\u2019s such a minor detail, but if we didn\u2019t test our own emails with Litmus, we wouldn\u2019t be able to fix it so our emails look good everywhere.\u201d<\/span><\/p>\n\n<div class=\"container pt-3 pb-5 px-1\">\n\t<div class=\"row blog-cta-green rounded-5 p-4\">\n\t\t<div class=\"mx-auto col-12\">\n\t\t\t<div class=\"row d-flex align-items-center\">\n\t\t\t<div class=\"col-lg-6 col-12\">\n\t\t\t\t<p class=\"bold fs-4\">Send with total confidence<\/p>\n\t\t\t\t<p>Preview emails in 100+ clients, catch errors, and ensure accessibility. Cut QA time in half. <\/p>\n\t\t\t\t<button class=\"button-blue arrow\"><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-testing\" class=\"text-white text-decoration-none\">Start email testing<\/a><\/button>\n\t\t\t<\/div><!--col-6-->\n\t\t\t<div class=\"col-6 d-none d-lg-block\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/07\/blog-cta-email-guardian-07292024.svg\" width=\"210\" height=\"180\" alt=\"\">\n\t\t\t<\/div><!--col-6-->\n\t\t\t<\/div> <!--row-->\n\t\t<\/div><!--col-12-->\n\t<\/div><!--row-->\n<\/div><!--container-->\n\t\n\t\n\t\n\t\n\n<h2><span id=\"choose-font\" style=\"font-weight: 400;\">How to choose the right web safe fonts for your brand\u00a0<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Whether you go for a web font as your primary or stay with a web safe font, it can be hard to know what to choose with all the options out there. \u201cOur design team at Litmus is brilliant, and they tell me what to do,\u201d jokes Slater. \u201cI\u2019m glad we sat down together to choose our fallback font, and we thought of that at the beginning.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s how to choose a web font that works best for your brand:<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">1. Brand consistency<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Your typography affects your overall look and feel as a brand. Selecting consistent typography should align with your overall <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/email-design-system\"><span style=\"font-weight: 400;\">email design system<\/span><\/a><span style=\"font-weight: 400;\"> to create a cohesive brand experience.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">No matter what fallback you choose, start with one that looks as close as possible to the web font you\u2019re already using across your other brand touchpoints, like your website, app, or on product packaging. For your font choices, look at categories like:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Serif vs. sans serif<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Monospace vs. variable-width<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Headers vs. body copy<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Variants of your chosen font in the same font family<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Your choice of font should reflect your brand identity\u2014whether that\u2019s a more formal, classic look or a squiggly Gen-Z vibe. Use the same font for the entire email, from header to <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/email-footer-best-practices\"><span style=\"font-weight: 400;\">email footer<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">2. Readability across devices<\/span><\/h3>\n<p><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/ultimate-guide-accessible-emails\"><span style=\"font-weight: 400;\">Email accessibility<\/span><\/a><span style=\"font-weight: 400;\"> has never been more crucial. It\u2019s important to find a web font that fits your brand yet is still accessible. Some types of fonts are easier than others to read:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u2716\u00a0 Ornate or decorative fonts, such as display, cursive fonts, or handwriting fonts like Lucida Calligraphy or Brush Script MT, can make it difficult for people with visual impairments or dyslexia to differentiate letter shapes.<br \/>\n<\/span><span style=\"font-weight: 400;\">\u2714\u00a0 Sans-serif fonts don\u2019t have extended features or curls in their letters. Fonts like Arial, Calibri, Century Gothic, or Helvetica are easy to read.<br \/>\n<\/span><span style=\"font-weight: 400;\">\u2714 Slab fonts like Museo Slab and Rockwell have thicker lines and are also considered accessible.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For <\/span><i><span style=\"font-weight: 400;\">some<\/span><\/i><span style=\"font-weight: 400;\"> audiences, sticking to a <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/best-practices-for-plain-text-emails-a-look-at-why-theyre-important\"><span style=\"font-weight: 400;\">plain text email<\/span><\/a><span style=\"font-weight: 400;\"> format ensures universal readability and avoids potential font rendering issues altogether.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When you think about readability, focus on the spacing and shape of the font. When in doubt, run your email through an <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-testing\"><span style=\"font-weight: 400;\">accessibility checker<\/span><\/a><span style=\"font-weight: 400;\"> like ours at Litmus. We test against 40+ different accessibility metrics to make sure that your emails can be read by your entire audience.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">3. Tone and emotion<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Your font can be an indicator of your brand identity, but it also helps give shape to the tone and voice of your emails. Your copywriters are already spending time crafting your message and your font can help bring it to life.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Evoke the strength and power of the Roman empire with fonts like Palatino or Optima, give your message a typewriter feel with old-fashioned fonts like Lucida or Monaco, or give it a mid-aughts magazine feel with Didot.<\/span><\/p>\n\n<div class=\"container pt-3 pb-5 px-1\">\n\t<div class=\"row blog-cta-blue rounded-5 p-4\">\n\t\t<div class=\"mx-auto col-12\">\n\t\t\t<div class=\"row d-flex align-items-center\">\n\t\t\t<div class=\"col-lg-6 col-12\">\n\t\t\t\t<p class=\"bold fs-4\">Power up your email strategy<\/p>\n\t\t\t\t<p>Gain expert insights and industry benchmarks from the latest State of Email Report. Elevate your email game.\n<\/p>\n\t\t\t\t<button class=\"button-blue download\"><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/state-of-email-reports\" class=\"text-white text-decoration-none\">Access the insights<\/a><\/button>\n\t\t\t<\/div><!--col-6-->\n\t\t\t<div class=\"col-6 d-none d-lg-block\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/09\/download-blog-cta-09232024.svg\" width=\"221\" height=\"175\" alt=\"\">\n\t\t\t<\/div><!--col-6-->\n\t\t\t<\/div> <!--row-->\n\t\t<\/div><!--col-12-->\n\t<\/div><!--row-->\n<\/div><!--container-->\n\t\n\t\n\t\n\t\n\n<h2><span id=\"embed-fonts\" style=\"font-weight: 400;\">How to embed web fonts in emails\u00a0<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Because web fonts typically aren\u2019t found on someone\u2019s local device and instead are hosted elsewhere, you must \u201cembed\u201d or import your web font into your emails before using them using HTML or CSS.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">1. Get the URL of your font file<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">To start, you need the web font\u2019s URL to call it into your email. Where you\u2019ll find it depends on the font source.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you\u2019re using a web font service:\u00a0 the site or tool should have the URL. If you\u2019re using Google Fonts, finding the URL is tricky but not too difficult. Find out how in the next step for the @font-face embed method.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you\u2019re hosting the font yourself: get the URL from where the web font sits on your server. Check that it\u2019s a public URL and not coming from a local server. Otherwise, your subscribers won\u2019t be able to access the web font and will see a fallback font instead.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">2. Import the web font using one of three methods<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">There are three methods for embedding web fonts in email (and a caveat that may limit which method you can use). The three methods for embedding your font are:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Importing a web font using &lt;link&gt;<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">The &lt;link&gt; method loads the resource inline as the HTML file\u2019s code is read (from top to bottom), which could delay your email loading if your web font file is huge. Using this method for embedding fonts in your email is relatively simple\u2014place this line of code in the &lt;head&gt; of your email, near the top:<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;link rel=\"noopener\" target=\"_blank\" rel=\"noopener\" target=\"_blank\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto&amp;display=swap\" rel=\"stylesheet\"><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_93a34893f82bf6af94a472bc9277026d\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<h4><span style=\"font-weight: 400;\">Importing a web font using @import<\/span><\/h4>\n<h4><\/h4>\n<p><span style=\"font-weight: 400;\">The @import method defers loading the imported web font until the HTML is fully loaded. This method can lead to your web font taking a little longer to appear in your email while the rest is loaded. To use it, place this line of code in the &lt;head&gt; of your email between the &lt;style&gt; tags:<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">@import url('https:\/\/fonts.googleapis.com\/css2?family=Roboto&amp;display=swap');<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_93852b107615675540d82e2cd7b94a90\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<h3><span style=\"font-weight: 400;\">Importing a web font using @font-face<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Online web font services commonly offer five file formats to choose from:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">.eot<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">.woff<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">.woff2<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">.svg<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">.ttf<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">The .woff and .woff2 formats have the best support when it comes to email, so we suggest using one or both of these formats when you can. On the other hand, @font-face method is the only method that allows you to choose what file format you\u2019d like to import, making it the most bulletproof way for implementing web fonts.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s a typical @font-face declaration for importing a web font into email using Google Fonts as our chosen web font service:<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">@font-face {\n    font-family: 'Roboto';\n    font-style: normal;\n    font-weight: 400;\n    src: url(https:\/\/fonts.gstatic.com\/s\/roboto\/v27\/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');\n    }<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_6bb94391e0772f8bd8b21955223c8177\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400;\">If you use Google Fonts, first find the @font-face code by locating the font you want to use on Google Font. Then, choose the style you want to use. A flyout menu will appear on the right.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In the flyout, there will be a choice for &lt;link&gt; or @import. Both of these will have a URL (highlighted in the screenshot above). You can copy that URL and paste it in the address bar of your browser to find the CSS stylesheet that Google uses.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Copy and paste the \u2018Latin\u2019 version of the @font-face between your &lt;style&gt; tags.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">At Litmus, the @font-face method is our go-to implementation for importing web fonts into our emails.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">(All credit for this method of importing web fonts goes to email accessibility advocate <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/paul_airy\"><span style=\"font-weight: 400;\">Paul Airy<\/span><\/a><span style=\"font-weight: 400;\">, as detailed in a <\/span><a rel=\"noopener\" href=\"https:\/\/litmus.com\/scope\/a59ua3rogjrd\"><span style=\"font-weight: 400;\">past Type: E newsletter<\/span><\/a><span style=\"font-weight: 400;\">.)<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s something to keep in mind: You can make beautiful code that works in Litmus all day long, but if your ESP changes your code, as we know most of them do, then nothing you do will matter. \ud83d\ude2d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Make sure your ESP doesn\u2019t change your code in a way that would cause your fonts to stop working.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">3. Use your fonts in email<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">You should have already chosen a fallback, but if you haven\u2019t yet, now is the time. It\u2019s easy to add your fallback into your font stack. Just use the font-family name defined in the import method followed by your fallback font(s) in either the CSS inline or in the head:<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">font-family: 'Roboto', Verdana, sans-serif;<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_b9f789ef8312593006b9124e495778f9\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400;\">Think of this as a prioritized list of preferred fonts. If an email client can\u2019t comply with your number one choice, it will fall back to the next one on your list.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For example, using the above font-family stack, the font rendered will be Verdana since Gmail will ignore the (unsupported) first font in the list since. Suppose the device used doesn\u2019t support Verdana (which would be very rare since Verdana is a web safe font). In that case, the device will use the default sans-serif font for its system, as this is the third font in the list.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This is equally important when <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/email-design-with-html-tables\"><span style=\"font-weight: 400;\">coding a table in HTML<\/span><\/a><span style=\"font-weight: 400;\">, which often requires fallback fonts to ensure uniformity across different email clients.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">4. Avoid faux bold or faux italic<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">If you have accompanying bold and italic versions of your web font files, then let\u2019s use them!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Typeface designers have put a lot of thought and effort into getting all the different styles of a font just right, so it\u2019s best practice to apply the original type design rather than allowing the email client or browser to haphazardly apply a faux bold or faux italic to the regular font.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Basically, do <strong>NOT<\/strong> do this:<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">@font-face {\n  font-family: 'Roboto';\n  font-style: normal;\n  font-weight: 400;\n  src: url(https:\/\/fonts.gstatic.com\/s\/roboto\/v27\/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');\n}\nstyle=\"font-family: 'Roboto', Verdana, sans-serif; font-weight: bold; font-style: italic;\"<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_1aac0e7f60607a77697fbb9243338951\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400;\">Like web design, you can pull in the genuine fonts by including these styles in your @font-face stack, like so:<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">@font-face {\n  font-family: 'Roboto';\n  font-style: normal;\n  font-weight: 400;\n  src: url(https:\/\/fonts.gstatic.com\/s\/roboto\/v27\/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');\n}\n@font-face {\n  font-family: 'Roboto';\n  font-style: italic;\n  font-weight: 400;\n  src: local('Roboto-Italic'),\n  src: url(https:\/\/fonts.gstatic.com\/s\/roboto\/v27\/KFOkCnqEu92Fr1Mu51xIIzIXKMny.woff2) format('woff2');\n}\n@font-face {\n  font-family: 'Roboto';\n  font-style: normal;\n  font-weight: 700;\n  src: local('Roboto-Bold'),\n  src: url(https:\/\/fonts.gstatic.com\/s\/roboto\/v27\/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2');\n}\n@font-face {\n  font-family: 'Roboto';\n  font-style: italic;\n  font-weight: 700;\n  src: local('Roboto-BoldItalic'),   src: url(https:\/\/fonts.gstatic.com\/s\/roboto\/v27\/KFOjCnqEu92Fr1Mu51TzBic6CsTYl4BO.woff2) format('woff2');\n}<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_b07a3705f17ca3125416d0a09dcca81a\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400;\">As you can see, the different styles pull in different fonts regardless of the font-family. This way, if you style your font in the HTML like this:<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">style=\"font-family: 'Roboto', Verdana, sans-serif; font-weight: bold; font-style: italic;\"<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_f2fddb3d65f686c9984202d6910ad5e0\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>\u2026then it will pull in the genuine <b>\u2018Roboto-BoldItalic\u2019<\/b> font! Likewise, just adding font-weight: bold; will pull in <b>\u2018Roboto-Bold\u2019<\/b> and just adding <span style=\"background-color: #eeeeee; font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New; border: 1px solid #999999; padding: 5px;\">font-style: italic;<\/span>\u00a0will pull in <b>\u2018Roboto-Italic\u2019<\/b>.<\/p>\n<p><b>Do NOT do this, either!<\/b><\/p>\n<p><span style=\"font-weight: 400;\">So, you might be wondering\u2014why do it this way instead of declaring a different font-family for each style, which also pulls in the genuine fonts? This is how that looks:<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">@font-face {\nfont-family: 'Roboto Bold Italic';\nsrc: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https:\/\/fonts.gstatic.com\/s\/roboto\/v27\/KFOjCnqEu92Fr1Mu51TzBic6CsTYl4BO.woff2) format('woff2');\n}\nstyle=\"font-family: 'Roboto Bold Italic', Verdana, sans-serif;\"<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_e67ae9945a7e3436fb0e54f3a3a6a61c\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400;\">This presents a problem. Using font-family names to store styles creates <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.456bereastreet.com\/archive\/201012\/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple\/\"><span style=\"font-weight: 400;\">overly-complicated and redundant CSS<\/span><\/a><span style=\"font-weight: 400;\"> and strips your text of styling if your fallbacks kick in. So, for example\u2014if you\u2019re viewing the above code in Gmail (which doesn\u2019t support custom web fonts), you will only see unbolded, un-italicized Verdana instead of Roboto Bold Italic.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">By keeping your font-family and font-weights or font-styles separate, your fallback fonts will retain the correct styling.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">5. Use a fix for Outlook<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Outlook has a wonderful quirk to watch out for, especially if many of your subscribers use it.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you use the &lt;link&gt; or @import method, Outlook will display Times New Roman regardless of what fallbacks you put in for your font. \ud83e\udd26<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The simplest fix for this is to use the @font-face method. But if you need to use the &lt;link&gt; or @import method, use Microsoft Office (MSO) conditionals to comment out that section of your styles. This method will keep Outlook from seeing those, and it\u2019ll use your fallback fonts as intended.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you find Outlook converting your font to Times New Roman, you can add mso-font-alt: \u2018Arial\u2019; to the @font-face block to provide an alternative fallback for Outlook:<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">@font-face {\n  font-family: 'Roboto';\n  font-style: normal;\n  font-weight: 400;\n  mso-font-alt: 'Arial';\n  src: url(https:\/\/fonts.gstatic.com\/s\/roboto\/v27\/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');\n}<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_61a3b0da62ae619841f82ed03c625965\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400;\">Another solution is coding the font-family with the web-safe font stack inline and including a &lt;style&gt; block to override the fonts with the web font. Then it\u2019s just a matter of hiding that style block from Outlook:<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;!--[if (gte mso 9)|(IE)]>&lt;!-->\n p, h1, h2, h3, h4 { font-family: 'Roboto', Verdana, Helvetica, sans-serif !important; }\n&lt;!--&lt;![endif]-->\nstyle=\"font-family: Verdana, Helvetica, sans-serif;\"<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_707fd92d688ee989d7df248ec23b985a\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<h2><span id=\"find-fonts\" style=\"font-weight: 400;\">Where to find web fonts in emails\u00a0<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Let\u2019s look at our favorite sources for web fonts.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">1. Google Fonts<\/span><\/h3>\n<p><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/fonts.google.com\/\"><span style=\"font-weight: 400;\">Google Fonts<\/span><\/a><span style=\"font-weight: 400;\"> is free, and you can download the web fonts to your computer if you mock-up designs in Adobe Photoshop, Sketch, or another design software.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">2. Adobe Fonts<\/span><\/h3>\n<p><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/fonts.adobe.com\/\"><span style=\"font-weight: 400;\">Adobe Fonts<\/span><\/a><span style=\"font-weight: 400;\"> isn\u2019t entirely free but is included in Creative Cloud subscriptions. The service supports both the &lt;link&gt; and the @import method for use as web fonts (more on that next).<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">3. Web font services<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">There are several other web font services available on a paid basis. You\u2019ll need to make sure you get the correct license to use them in your email.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.typenetwork.com\/\"><span style=\"font-weight: 400;\">Type Network<\/span><\/a><span style=\"font-weight: 400;\"> (Web License)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/processtypefoundry.com\/\"><span style=\"font-weight: 400;\">Process Type Foundry<\/span><\/a><span style=\"font-weight: 400;\"> (Web License)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/optimo.ch\/\"><span style=\"font-weight: 400;\">Optimo<\/span><\/a><span style=\"font-weight: 400;\"> (Digital Ads License)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/www.fontspring.com\/\"><span style=\"font-weight: 400;\">Fontspring<\/span><\/a><span style=\"font-weight: 400;\"> (Custom Email License)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.typotheque.com\/\"><span style=\"font-weight: 400;\">Typotheque<\/span><\/a><span style=\"font-weight: 400;\"> (Web License)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.productiontype.com\/\"><span style=\"font-weight: 400;\">Production Type<\/span><\/a><span style=\"font-weight: 400;\"> (Online Advertising License)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.myfonts.com\/\"><span style=\"font-weight: 400;\">MyFonts<\/span><\/a><span style=\"font-weight: 400;\"> (Web License)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/commercialtype.com\/\"><span style=\"font-weight: 400;\">Commercial Type<\/span><\/a><span style=\"font-weight: 400;\"> (Web License)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">With the web licenses, there may be a choice to host the font yourself or to have the font hosted by the provider. In some web licenses, you pay for a certain amount of page views with each email that loads the font counting as a page view, so make sure you consider that when purchasing a license.<\/span><\/p>\n<h2><span id=\"inspiration\" style=\"font-weight: 400;\">Inspiration for using web fonts<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Web fonts can be a great branding tool. Here is some <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/best-places-for-email-inspiration-and-examples\"><span style=\"font-weight: 400;\">email inspiration<\/span><\/a><span style=\"font-weight: 400;\"> and examples of web fonts done right:<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">1. Webflow: Clean and clear UX<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Webflow uses system fonts as a fallback for their web fonts and uses font weights to ensure a great typographic experience in their body text no matter what font appears.<\/span><\/p>\n<div class=\"image-scroll mb-3\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/04\/webflow-1.png\" alt=\"\" \/><\/div>\n\n<h3><span style=\"font-weight: 400;\">2. PayPal: The new modern<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">PayPal uses the Supreme font family, a descendant of Futura, for their emails and their app, which has a super clean look and feel. It\u2019s a very of-the-moment, digital media font that is starting to get more popular because it\u2019s extremely readable and modern.<\/span><div class=\"image-scroll mb-3\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/01\/Paypal.png\" alt=\"\" \/><\/div>\n<\/p>\n<h3><span style=\"font-weight: 400;\">3. Jewel Osco: Matchy-matchy<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Jewel Osco uses Nunito Sans, which has a balanced, spacious look and feel from Adobe Fonts. Their fallback has a great match with Poppins, another more geometric font that matches Nunito so well it\u2019s hard to tell the difference.<\/span><div class=\"image-scroll mb-3\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/01\/Jewel-Osco.png\" alt=\"\" \/><\/div>\n<\/p>\n<h3><span style=\"font-weight: 400;\">4. Ted Goas: A full font stack<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">It\u2019s easy to default to something like Arial for an email newsletter, but fellow email geek Ted Goas uses Space Grotesk, a very cool sans serif typeface.<\/span><\/p>\n<div class=\"image-scroll mb-3\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/01\/The-Last-Two-Weeks-1-scaled.jpeg\" alt=\"\" \/><\/div>\n\n<p><span style=\"font-weight: 400;\">What stands out about this email, though, is hidden in the code: Instead of one fallback, he\u2019s added a whole bunch, including Lucida Bright, Book Antiqua, and Georgia, so that no matter what email client his subscribers are using, he\u2019s in control of the brand experience.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"font-weight: 400;\">5. Lego and CrunchLabs: Playful building blocks<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">You gotta love when a font reflects a brand so well, and that\u2019s true of toy brands Lego and CrunchLabs. Lego is known for their blocky, playful sans serif font called Noto Sans. They default to Arial as a fallback, which gets the job done.<\/span><\/p>\n<div class=\"image-scroll mb-3\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/01\/Lego.jpeg\" alt=\"\" \/><\/div>\n\n<p><span style=\"font-weight: 400;\">And CrunchLabs also offers a rounded, playful font without making it too childish. Their emails are easy-to-read without feeling formal or stuffy.<\/span><\/p>\n<div class=\"image-scroll mb-3\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/01\/Crunch-Labs.jpg\" alt=\"\" \/><\/div>\n\n<h2><span style=\"font-weight: 400;\">Stay on-brand and error-free with Litmus<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Web fonts are a great way to keep the text in your emails both branded and accessible. But as you can see from this post, many nuances exist. That\u2019s why it\u2019s equally important to\u2026<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Always! Be! Testing!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We\u2019ve done our best to test a bunch of different circumstances, but your ESP may unexpectedly distort your code. Test your emails before sending them out to ensure your fallbacks work correctly.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Adding web fonts is worth it as a great progressive enhancement to help you provide the best experience for your subscribers in their inboxes.<\/span><\/p>\n<p><em>Originally published on April 11, 2019, by Jaina Mistry. Last updated January 14, 2025, by Kayla Voigt and Jaina Mistry.<\/em><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n<div id=\"post-cta-buttonblock_53ee78d66138be886eefd0d4fdb651ca\" class=\"block-post-cta-button mt-5\">\n  <div class=\"container px-0\">\n    <div class=\"row\">\n      <div class=\"blog-post-cta-button-wrapper col-12 col-lg-10 mx-auto p-4 d-block d-lg-flex align-items-lg-center align-items-start\">\n\t\t  \t\t  \t\t  \t\t  \t\t  \t\t  \t\t  \t\t \t\t\t  \t\t  \t\t  <div class=\"col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0\">\t\t\t  \t\t\t  <h2 class=\"h-sm\"><strong>Design tools anyone can use with Litmus Builder<\/strong><\/h2>\n\t\t\t   \n\t\t\t  \t\t\t\t\t<p>Build emails from scratch with our HTML email builder or drag-and-drop your way to the emails of your dreams.<\/p>\n\t\t\t\t\t \n\t\t\t  \t\t  <\/div><!--col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0-->\t\t\t  \t\t  <div class=\"text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"btn btn-primary\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-builder\">\n\t\t\t\t\t\tTry Email Builder\t\t\t\t\t\t<\/a>\n\t\t\t  \t\t  <\/div><!--text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0-->\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        <\/div><!--blog-post-cta-button-wrapper-->\n    <\/div><!--row-->\n  <\/div><!--container-->\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Learn how to use web safe fonts in your email marketing campaigns to ensure consistent design across all email clients.<\/p>\n","protected":false},"author":23,"featured_media":27463,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[478,520,102,9805],"blog_category":[10303],"class_list":["post-3425","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-design","tag-email-accessibility","tag-html","tag-text","blog_category-email-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>The Ultimate Guide to Web Safe Fonts for Email Marketing | Litmus<\/title>\n<meta name=\"description\" content=\"Learn how to use web safe fonts in your email marketing campaigns to ensure consistent design across all email clients. Discover top font choices, pairing tips, and best practices for email readability and brand consistency.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Ultimate Guide to Web Safe Fonts for Email Marketing\" \/>\n<meta property=\"og:description\" content=\"Learn how to use web safe fonts in your email marketing campaigns to ensure consistent design across all email clients. Discover top font choices, pairing tips, and best practices for email readability and brand consistency.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts\" \/>\n<meta property=\"og:site_name\" content=\"Litmus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/litmusapp\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-13T16:54:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-13T17:55:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/04\/UltimateGuidetoWebFonts2.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1380\" \/>\n\t<meta property=\"og:image:height\" content=\"724\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@litmusapp\" \/>\n<meta name=\"twitter:site\" content=\"@litmusapp\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"The Ultimate Guide to Web Safe Fonts for Email Marketing | Litmus","description":"Learn how to use web safe fonts in your email marketing campaigns to ensure consistent design across all email clients. Discover top font choices, pairing tips, and best practices for email readability and brand consistency.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts","og_locale":"en_US","og_type":"article","og_title":"The Ultimate Guide to Web Safe Fonts for Email Marketing","og_description":"Learn how to use web safe fonts in your email marketing campaigns to ensure consistent design across all email clients. Discover top font choices, pairing tips, and best practices for email readability and brand consistency.","og_url":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2025-01-13T16:54:54+00:00","article_modified_time":"2025-01-13T17:55:07+00:00","og_image":[{"width":1380,"height":724,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/04\/UltimateGuidetoWebFonts2.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_creator":"@litmusapp","twitter_site":"@litmusapp","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts"},"author":{"name":"","@id":""},"headline":"The Ultimate Guide to Web Safe Fonts for Email Marketing","datePublished":"2025-01-13T16:54:54+00:00","dateModified":"2025-01-13T17:55:07+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts"},"wordCount":10,"commentCount":0,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/04\/UltimateGuidetoWebFonts2.jpg","keywords":["Design","Email Accessibility","HTML","Text"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts","url":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts","name":"The Ultimate Guide to Web Safe Fonts for Email Marketing | Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/04\/UltimateGuidetoWebFonts2.jpg","datePublished":"2025-01-13T16:54:54+00:00","dateModified":"2025-01-13T17:55:07+00:00","description":"Learn how to use web safe fonts in your email marketing campaigns to ensure consistent design across all email clients. Discover top font choices, pairing tips, and best practices for email readability and brand consistency.","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/04\/UltimateGuidetoWebFonts2.jpg","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/04\/UltimateGuidetoWebFonts2.jpg","width":1380,"height":724,"caption":"web font on a computer screen"},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"The Ultimate Guide to Web Safe Fonts for Email Marketing"}]},{"@type":"WebSite","@id":"https:\/\/www.litmus.com\/#website","url":"https:\/\/www.litmus.com\/","name":"Litmus","description":"Are you getting the most out of your email marketing?","publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.litmus.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.litmus.com\/#organization","name":"Litmus Software","url":"https:\/\/www.litmus.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","width":600,"height":314,"caption":"Litmus Software"},"image":{"@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/litmusapp","https:\/\/x.com\/litmusapp"]},{"@type":"Person","@id":""}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3425","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=3425"}],"version-history":[{"count":15,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3425\/revisions"}],"predecessor-version":[{"id":107638,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3425\/revisions\/107638"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/27463"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=3425"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=3425"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=3425"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}