{"id":92,"date":"2017-05-10T17:12:55","date_gmt":"2017-05-10T17:12:55","guid":{"rendered":"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/?p=92"},"modified":"2017-05-12T14:51:42","modified_gmt":"2017-05-12T14:51:42","slug":"html-email-phone-numbers","status":"publish","type":"post","link":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-email-phone-numbers\/","title":{"rendered":"Prevent HTML Email from Changing Font Color for Phone Numbers"},"content":{"rendered":"<h2>Prevent HTML Email from Changing Font Color for Phone Numbers<\/h2>\r\n<p>When creating HTML emails, certain HTML email clients change the font colors for phone numbers to blue, especially if they are not styled with inline CSS or are placed inside of an anchor element with an <span class=\"white_space_pre\">href=&#8221;tel:&#8221;<\/span> attribute. You can see an example in the image below:<\/p>\r\n<img loading=\"lazy\" src=\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/05\/blue_phone_number.jpg\" alt=\"prevent html email from changing font color for phone numbers\" width=\"290\" height=\"83\" class=\"alignnone size-full wp-image-224\" \/>\r\n<p>The following list of email clients will be affected as a result:<\/p>\r\n<ul>\r\n<li>iPhone 5s iOS 7<\/li>\r\n<li>iPhone 5s iOS 8<\/li>\r\n<li>iPhone 6 iOS 8<\/li>\r\n<li>iPhone 6+ iOS 8<\/li>\r\n<li>iPhone 6 iOS 9<\/li>\r\n<li>iPhone 6+ iOS 9<\/li>\r\n<li>iPhone 7 iOS 10.2<\/li>\r\n<li>iPhone 7+ iOS 10.2<\/li>\r\n<li>iPad (retina) iOS 10.2<\/li>\r\n<li>iPad Mini iOS 10.2<\/li>\r\n<li>iPad Pro (12.9 inch) iOS 10.2<\/li>\r\n<li>Gmail IE<\/li>\r\n<li>Gmail Firefox<\/li>\r\n<li>Gmail Chrome<\/li>\r\n<\/ul>\r\n<p>Below, I will explain several methods that I have seen recommended based on research.<\/p>\r\n<h4>HTML &#8211; Solution One(iPhone 5, iPhone 5s, iPhone 6 and iPhone 6s only)<\/h4>\r\n<p>Use <span class=\"white_space_pre\">&lt;meta name=&#8221;format-detection&#8221; content=&#8221;telephone=no&#8221;&gt;<\/span> in your HTML header. This will resolve the issue on only the older iPhones (iPhone 5, iPhone 5s, iPhone 6 and iPhone 6s, all versions of iOS).<\/p>\r\n<h4>HTML &#8211; Solution Two(Gmail only)<\/h4>\r\n<p>Surround your hyphens with <span class=\"white_space_pre\">&lt;span&gt;<\/span> elements. This will only fix the issues in Gmail (IE, Firefox and Chrome).<\/p>\r\n<pre>\r\n<div class=\"code\">\r\n1&lt;span&gt;-&lt;\/span&gt;800&lt;span&gt;-&lt;\/span&gt;888&lt;span&gt;-&lt;\/span&gt;8888\r\n<\/div>\r\n<\/pre>\r\n<p>Using the HTML entity for hyphens, <span class=\"white_space_pre\">&amp;#45;<\/span> renders the same result as above example.<\/p>\r\n<pre>\r\n<div class=\"code\">\r\n1&lt;span&gt;&amp;#45;&lt;\/span&gt;800&lt;span&gt;&amp;#45;&lt;\/span&gt;888&lt;span&gt;&amp;#45;&lt;\/span&gt;8888\r\n<\/div>\r\n<\/pre>\r\n<h4>HTML &#8211; Solution Three(All Clients)<\/h4>\r\n<p>This is considered the ultimate solution and will work for all clients. Insert a zero width joiner <span class=\"white_space_pre\">&ampzwj;<\/span> in at least two or three different spots in the phone number.<\/p>\r\n<pre>\r\n<div class=\"code\">\r\n1-8&amp;zwj;00-8&amp;zwj;88-8&amp;zwj;888\r\n<\/div>\r\n<\/pre>\r\n","protected":false},"excerpt":{"rendered":"Prevent HTML Email from Changing Font Color for Phone Numbers When creating HTML emails, certain HTML email clients change the font colors for phone numbers to blue, especially if they are not styled with inline CSS or are placed inside of an anchor element with an href=&#8221;tel:&#8221; attribute. You can see an example in the [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[14,12],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.1.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Prevent HTML Email from Changing Font Color for Phone Numbers<\/title>\n<meta name=\"description\" content=\"This article discusses two solutions how to prevent Gmail from changing the font color for HTML email phone numbers when opening an HTML email.\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Prevent HTML Email from Changing Font Color for Phone Numbers\" \/>\n<meta property=\"og:description\" content=\"This article discusses two solutions how to prevent Gmail from changing the font color for HTML email phone numbers when opening an HTML email.\" \/>\n<meta property=\"og:url\" content=\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-email-phone-numbers\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development Reference\" \/>\n<meta property=\"article:published_time\" content=\"2017-05-10T17:12:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-05-12T14:51:42+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/05\/blue_phone_number.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"1 minute\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#website\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/\",\"name\":\"Web Development Reference\",\"description\":\"Web Development Solutions Explained -- Easy\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-email-phone-numbers\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/05\/blue_phone_number.jpg\",\"contentUrl\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/05\/blue_phone_number.jpg\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-email-phone-numbers\/#webpage\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-email-phone-numbers\/\",\"name\":\"Prevent HTML Email from Changing Font Color for Phone Numbers\",\"isPartOf\":{\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-email-phone-numbers\/#primaryimage\"},\"datePublished\":\"2017-05-10T17:12:55+00:00\",\"dateModified\":\"2017-05-12T14:51:42+00:00\",\"author\":{\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#\/schema\/person\/9624bee17e4fbdcaad7eb7569f5faa70\"},\"description\":\"This article discusses two solutions how to prevent Gmail from changing the font color for HTML email phone numbers when opening an HTML email.\",\"breadcrumb\":{\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-email-phone-numbers\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-email-phone-numbers\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-email-phone-numbers\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-email-phone-numbers\/\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-email-phone-numbers\/\",\"name\":\"Prevent HTML Email from Changing Font Color for Phone Numbers\"}}]},{\"@type\":\"Person\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#\/schema\/person\/9624bee17e4fbdcaad7eb7569f5faa70\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c0c4e0ed219e3aaa419ce72b52646d59?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c0c4e0ed219e3aaa419ce72b52646d59?s=96&d=mm&r=g\",\"caption\":\"admin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","jetpack_featured_media_url":"","jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p7o7aF-1u","_links":{"self":[{"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/posts\/92"}],"collection":[{"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/comments?post=92"}],"version-history":[{"count":34,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/posts\/92\/revisions"}],"predecessor-version":[{"id":249,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/posts\/92\/revisions\/249"}],"wp:attachment":[{"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/media?parent=92"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/categories?post=92"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/tags?post=92"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}