{"id":856,"date":"2014-08-18T09:01:17","date_gmt":"2014-08-18T09:01:17","guid":{"rendered":"https:\/\/email.uplers.com\/blogs\/?p=856"},"modified":"2021-11-24T00:52:50","modified_gmt":"2021-11-23T19:22:50","slug":"customs-fonts-support-in-email-html","status":"publish","type":"post","link":"https:\/\/email.uplers.com\/blog\/customs-fonts-support-in-email-html\/","title":{"rendered":"Custom Fonts Support In Email HTML"},"content":{"rendered":"<p>A little different from what we generally write, today Uplers share with you some tips regarding the support of custom fonts in <a href=\"https:\/\/email.uplers.com\/blog\/ultimate-guide-images-html-email\/\">Email HTML<\/a>.<\/p>\n<p>Fonts are those small things which can make a big difference to your <a href=\"https:\/\/email.uplers.com\/email-marketing-campaign-management-services\/\">email campaigns<\/a>. The fonts installed in the machine are known as email same fonts \/ standard fonts \/ basic fonts. Such fonts need not pass through any uploading process, also, they do not require any embedding to use them.<\/p>\n<p><!--HubSpot Call-to-Action Code --><span id=\"hs-cta-wrapper-7b105263-d955-41c1-bcf4-8e06098ff547\" class=\"hs-cta-wrapper\"><span id=\"hs-cta-7b105263-d955-41c1-bcf4-8e06098ff547\" class=\"hs-cta-node hs-cta-7b105263-d955-41c1-bcf4-8e06098ff547\"><!-- [if lte IE 8]>\n\n\n<div id=\"hs-cta-ie-element\"><\/div>\n\n\n<![endif]--><\/span><\/span><!-- end HubSpot Call-to-Action Code --><\/p>\n<p>The fonts which are not installed on the system by default (OS Fonts) are known as custom fonts \/ premium fonts \/ designer fonts. Custom fonts are needed to be installed on to the system server &amp; embedded to the HTML in order to use the same in an email template.<\/p>\n<p>But there is very limited support for custom fonts in emails, since not all the email clients support it. However, there is a solution for the limited support, which is to use fallback fonts. Fallback fonts becomes necessary when using a custom fonts in emails. Fallback fonts should be similar to the primary font. Non-supporting email clients will render the fallback fonts.<\/p>\n<p><a href=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/08\/arial-and-verdana-fallback.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-4645 size-full\" title=\"arial-and-verdana fallback\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/08\/arial-and-verdana-fallback.jpg\" alt=\"arial-and-verdana fallback\" width=\"679\" height=\"317\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/08\/arial-and-verdana-fallback.jpg 679w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/08\/arial-and-verdana-fallback-300x140.jpg 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/08\/arial-and-verdana-fallback-624x291.jpg 624w\" sizes=\"auto, (max-width: 679px) 100vw, 679px\" \/><\/a><\/p>\n<p>Custom fonts comes with a host of variations and there are just plenty of them available to be used in your emails. The issue is some of them might not have similar fallback fonts. Ideally, use only those fonts whose fallback fonts are matching and available, if you use others, the custom fonts in email might not remain consistent across the email clients.<\/p>\n<p><a href=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/08\/Fall-Back-Font-code.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-4646 size-full\" title=\"Fall Back Font code\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/08\/Fall-Back-Font-code.png\" alt=\"Fall Back Font code\" width=\"560\" height=\"142\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/08\/Fall-Back-Font-code.png 560w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/08\/Fall-Back-Font-code-300x76.png 300w\" sizes=\"auto, (max-width: 560px) 100vw, 560px\" \/><\/a><\/p>\n<p>Certain fonts are labelled condensed fonts of whose fallback aren\u2019t available, the same should not be used in your <a href=\"https:\/\/email.uplers.com\/psd-to-email-html-conversion-service\/\" target=\"_blank\" rel=\"noopener noreferrer\">design to email HTML<\/a>. These fonts are quite light and create visibility issues. The width of the fonts will vary on the off chance that they are not rendering properly.<\/p>\n<p>As many <a href=\"https:\/\/email.uplers.com\/infographics\/ultimate-guide-email-client-hacks\/\">email clients<\/a> block images in the email, font-face is an awesome technique to style the fonts without using images, but it need to be used with limitations.<\/p>\n<p><b>Email clients that render custom fonts:<\/b><\/p>\n<p>Apple Mail<\/p>\n<p>Android Devices (Native App)<\/p>\n<p>iOS Devices.<\/p>\n<p><b>Email Safe email fonts:<\/b><\/p>\n<p><b>Sans Serif Web Safe Fonts:<\/b><\/p>\n<p>Arial<\/p>\n<p>Tahoma<\/p>\n<p>Trebuchet MS<\/p>\n<p>Verdana<\/p>\n<p>Century Gothic<\/p>\n<p>Geneva<\/p>\n<p>Lucida<\/p>\n<p>Lucida Sans<\/p>\n<p>Lucida Grande<\/p>\n<p><strong>Serif Web Safe Fonts:<\/strong><\/p>\n<p>Courier<\/p>\n<p>Courier New<\/p>\n<p>Georgia<\/p>\n<p>Times<\/p>\n<p>Times New Roman MS Serif<\/p>\n<p>New York<\/p>\n<p>Palatino<\/p>\n<p>Palatino Linotype Courier<\/p>\n<p>Courier New Lucida Console<\/p>\n<p>Monaco<\/p>\n<p><b style=\"line-height: 1.714285714; font-size: 1rem;\">Ways to import custom fonts:<\/b><\/p>\n<p><b style=\"line-height: 1.714285714; font-size: 1rem;\"><\/b>Using @import url in css. For Eg: Link the fonts through &lt;link&gt; tag inside the head tag.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A little different from what we generally write, today Uplers share with you some tips regarding the support of custom fonts in Email HTML. Fonts are those small things which can make a big difference to your email campaigns. The fonts installed in the machine are known as email same fonts \/ standard fonts \/ [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1350,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[381,10],"tags":[103,104],"class_list":["post-856","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-email-design","category-email-marketing","tag-custom-fonts","tag-email-fonts"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Custom Fonts in Email HTML - Web Safe Fonts<\/title>\n<meta name=\"description\" content=\"A little different from what we generally write, today Uplers share with you some tips regarding support of custom fonts in Email HTML.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/email.uplers.com\/blog\/customs-fonts-support-in-email-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Custom Fonts in Email HTML - Web Safe Fonts\" \/>\n<meta property=\"og:description\" content=\"A little different from what we generally write, today Uplers share with you some tips regarding support of custom fonts in Email HTML.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/email.uplers.com\/blog\/customs-fonts-support-in-email-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Email Uplers\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/email.uplers\/\" \/>\n<meta property=\"article:published_time\" content=\"2014-08-18T09:01:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-23T19:22:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2014\/12\/BLOG-Text_94-COVER-540x282.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"540\" \/>\n\t<meta property=\"og:image:height\" content=\"282\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Kevin George\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@email_uplers\" \/>\n<meta name=\"twitter:site\" content=\"@email_uplers\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kevin George\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/email.uplers.com\/blog\/customs-fonts-support-in-email-html\/\",\"url\":\"https:\/\/email.uplers.com\/blog\/customs-fonts-support-in-email-html\/\",\"name\":\"Custom Fonts in Email HTML - Web Safe Fonts\",\"isPartOf\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/customs-fonts-support-in-email-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/customs-fonts-support-in-email-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2014\/12\/BLOG-Text_94-COVER.jpg\",\"author\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/7ffa431167e8be5eb07b050cd5c663fa\"},\"description\":\"A little different from what we generally write, today Uplers share with you some tips regarding support of custom fonts in Email HTML.\",\"breadcrumb\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/customs-fonts-support-in-email-html\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/email.uplers.com\/blog\/customs-fonts-support-in-email-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/email.uplers.com\/blog\/customs-fonts-support-in-email-html\/#primaryimage\",\"url\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2014\/12\/BLOG-Text_94-COVER.jpg\",\"contentUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2014\/12\/BLOG-Text_94-COVER.jpg\",\"width\":\"1170\",\"height\":\"470\",\"caption\":\"Custom Font Support in Email HTML\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/email.uplers.com\/blog\/customs-fonts-support-in-email-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/email.uplers.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Custom Fonts Support In Email HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#website\",\"url\":\"https:\/\/email.uplers.com\/blog\/\",\"name\":\"Email Uplers\",\"description\":\"Email Marketing Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/email.uplers.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/7ffa431167e8be5eb07b050cd5c663fa\",\"name\":\"Kevin George\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/03\/Img-96x96.png\",\"contentUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/03\/Img-96x96.png\",\"caption\":\"Kevin George\"},\"description\":\"Kevin is the Head of Marketing at Email Uplers, one of the fastest-growing full-service email marketing companies. He is an email enthusiast at heart and loves to pen down email marketing content. You can reach him at kevin.g@uplers.com or connect with him on LinkedIn.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/kevin-george-email\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Custom Fonts in Email HTML - Web Safe Fonts","description":"A little different from what we generally write, today Uplers share with you some tips regarding support of custom fonts in Email HTML.","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:\/\/email.uplers.com\/blog\/customs-fonts-support-in-email-html\/","og_locale":"en_US","og_type":"article","og_title":"Custom Fonts in Email HTML - Web Safe Fonts","og_description":"A little different from what we generally write, today Uplers share with you some tips regarding support of custom fonts in Email HTML.","og_url":"https:\/\/email.uplers.com\/blog\/customs-fonts-support-in-email-html\/","og_site_name":"Email Uplers","article_publisher":"https:\/\/www.facebook.com\/email.uplers\/","article_published_time":"2014-08-18T09:01:17+00:00","article_modified_time":"2021-11-23T19:22:50+00:00","og_image":[{"width":540,"height":282,"url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2014\/12\/BLOG-Text_94-COVER-540x282.jpg","type":"image\/jpeg"}],"author":"Kevin George","twitter_card":"summary_large_image","twitter_creator":"@email_uplers","twitter_site":"@email_uplers","twitter_misc":{"Written by":"Kevin George","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/email.uplers.com\/blog\/customs-fonts-support-in-email-html\/","url":"https:\/\/email.uplers.com\/blog\/customs-fonts-support-in-email-html\/","name":"Custom Fonts in Email HTML - Web Safe Fonts","isPartOf":{"@id":"https:\/\/email.uplers.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/email.uplers.com\/blog\/customs-fonts-support-in-email-html\/#primaryimage"},"image":{"@id":"https:\/\/email.uplers.com\/blog\/customs-fonts-support-in-email-html\/#primaryimage"},"thumbnailUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2014\/12\/BLOG-Text_94-COVER.jpg","author":{"@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/7ffa431167e8be5eb07b050cd5c663fa"},"description":"A little different from what we generally write, today Uplers share with you some tips regarding support of custom fonts in Email HTML.","breadcrumb":{"@id":"https:\/\/email.uplers.com\/blog\/customs-fonts-support-in-email-html\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/email.uplers.com\/blog\/customs-fonts-support-in-email-html\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/email.uplers.com\/blog\/customs-fonts-support-in-email-html\/#primaryimage","url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2014\/12\/BLOG-Text_94-COVER.jpg","contentUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2014\/12\/BLOG-Text_94-COVER.jpg","width":"1170","height":"470","caption":"Custom Font Support in Email HTML"},{"@type":"BreadcrumbList","@id":"https:\/\/email.uplers.com\/blog\/customs-fonts-support-in-email-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/email.uplers.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Custom Fonts Support In Email HTML"}]},{"@type":"WebSite","@id":"https:\/\/email.uplers.com\/blog\/#website","url":"https:\/\/email.uplers.com\/blog\/","name":"Email Uplers","description":"Email Marketing Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/email.uplers.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/7ffa431167e8be5eb07b050cd5c663fa","name":"Kevin George","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/03\/Img-96x96.png","contentUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/03\/Img-96x96.png","caption":"Kevin George"},"description":"Kevin is the Head of Marketing at Email Uplers, one of the fastest-growing full-service email marketing companies. He is an email enthusiast at heart and loves to pen down email marketing content. You can reach him at kevin.g@uplers.com or connect with him on LinkedIn.","sameAs":["https:\/\/www.linkedin.com\/in\/kevin-george-email\/"]}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/856","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/comments?post=856"}],"version-history":[{"count":19,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/856\/revisions"}],"predecessor-version":[{"id":29306,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/856\/revisions\/29306"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/media\/1350"}],"wp:attachment":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/media?parent=856"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/categories?post=856"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/tags?post=856"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}