{"id":15269,"date":"2019-11-05T21:44:40","date_gmt":"2019-11-05T21:44:40","guid":{"rendered":"http:\/\/www.glitnir.com\/?page_id=15269"},"modified":"2019-11-08T15:10:27","modified_gmt":"2019-11-08T15:10:27","slug":"using-web-fonts","status":"publish","type":"page","link":"https:\/\/www.glitnir.com\/index.php\/using-the-editor\/using-web-fonts\/","title":{"rendered":"Using web fonts in the editor"},"content":{"rendered":"<div id=\"pl-15269\"  class=\"panel-layout\" ><div id=\"pg-15269-0\"  class=\"panel-grid panel-no-style\" ><div id=\"pgc-15269-0-0\"  class=\"panel-grid-cell\" ><div id=\"panel-15269-0-0-0\" class=\"so-panel widget widget_sow-editor panel-first-child panel-last-child\" data-index=\"0\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-sow-editor so-widget-sow-editor-base\"\n\t\t\t\n\t\t>\n<div class=\"siteorigin-widget-tinymce textwidget\">\n\t<p>We've added some popular <strong>web fonts<\/strong>\u00a0to the default\u00a0set of\u00a0<strong>web safe fonts<\/strong>. Use them to add personality to your emails while keeping your message clear and readable. At the same time, review this article to be aware of\u00a0how web fonts display in different email clients as not all fonts are fully supported everywhere.<\/p>\n<p>&nbsp;<\/p>\n<p><span class=\"wysiwyg-font-size-x-large\">What are web safe fonts?<\/span><\/p>\n<p>In most online text editors you tend to find the same, small set of available fonts. Why a small set and why only these fonts? Because they are the ones typically installed on your device. These are the fonts that are normally referred to as<strong>\u00a0\"web safe\" fonts<\/strong>.<\/p>\n<p>See, the set of fonts available on your computer is defined by the fonts that shipped with your operating system, those added by applications you installed, and individual\u00a0fonts that you've added manually over time.<\/p>\n<p>As you can imagine, the resulting list of installed fonts can vary greatly from device to device. There is a subset of fonts, however, that are considered a minimum common denominator as they are almost always found. Those are what we refer to as web\u00a0<strong>safe<\/strong>\u00a0fonts:<\/p>\n<ul>\n<li>\"safe\" because they\u00a0are available on pretty much every device.<\/li>\n<li>\"web\" because they are used when editing documents online.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>In the editor, you will find these web safe fonts at the top of any font selection tool. They are:<\/p>\n<ul>\n<li>Arial<\/li>\n<li>Courier<\/li>\n<li>Georgia<\/li>\n<li>Helvetica<\/li>\n<li>Lucida Sans<\/li>\n<li>Tahoma<\/li>\n<li>Times New Roman<\/li>\n<li>Trebuchet MS<\/li>\n<li>Verdana<\/li>\n<\/ul>\n<p>Now, the issue with these fonts is\u00a0that they are only a handful, and therefore greatly limit design choices in terms of typography. One solution is to expand the set of available fonts by using\u00a0<em>web fonts.<\/em><\/p>\n<p>&nbsp;<\/p>\n<p><span class=\"wysiwyg-font-size-x-large\">When can we use web fonts?<\/span><\/p>\n<p><strong>Web fonts<\/strong>\u00a0are available online, served by services like\u00a0<a href=\"https:\/\/www.google.com\/fonts\" target=\"_blank\" rel=\"noopener\">Google fonts<\/a>. Your\u00a0device downloads them only when needed (so there is no need for them to be installed in your computer\/device). The word \"web\" in this case refers to \"created for the web, and distributed online\".<\/p>\n<p>Web fonts are here to help us expand our text style choices and go beyond standard web safe fonts.<\/p>\n<p>This sounds like the perfect solution for the editor, but not all email clients support them, unfortunately. Known email clients such as Outlook (desktop and web), Gmail and Yahoo! Mail <span class=\"wysiwyg-underline\">don't<\/span>\u00a0support web fonts and display the text with their default font. They will only show the web font if the physical font file is installed in the recipient's device.<\/p>\n<p>Campaign Monitor has a fantastic article that goes deep into the ins and outs of using Web fonts in email. See\u00a0<a href=\"https:\/\/www.campaignmonitor.com\/resources\/guides\/web-fonts-in-email\/\" target=\"_blank\" rel=\"noopener\">All You Need to Know about Web Fonts in Email<\/a>.<\/p>\n<p>Because of this lack of support, in the editor we've built <strong>font stacks<\/strong>\u00a0(using cascading style sheets) that automatically tell any email program\u00a0how to \"fall back\" to a safe font when that email client is not able to render them. The stacks work as a descendant list of choices: if the first one is not available, it moves to the next.<\/p>\n<p>&nbsp;<\/p>\n<p><span class=\"wysiwyg-font-size-x-large\">Font stacks<br \/>\n<\/span><\/p>\n<p>The fonts are grouped together to offer the best possible fallback solution. This ensures that the layout won't break when the selected font is not supported. The variables we considered when building these font stacks were font shape and font size.<\/p>\n<p>The following\u00a0is a simplified list of the available font stacks:<\/p>\n<p><em><strong>Web font<\/strong>\u00a0\u203a Web safe fallback list of options<\/em><\/p>\n<p><strong>Bitter<\/strong>\u00a0\u203a Georgia\u00a0\u203a Times \u203a Times New Roman \u203a serif<\/p>\n<p><strong>Droid Serif<\/strong>\u00a0\u203a Georgia\u00a0\u203a Times \u203a Times New Roman \u203a serif<\/p>\n<p><strong>Lato<\/strong>\u00a0\u203a Tahoma \u203a Verdana\u00a0\u203a Segoe \u203a sans-serif<\/p>\n<p><strong>Open Sans<\/strong>\u00a0\u203a Helvetica Neue\u00a0\u203a Helvetica \u203a Arial \u203a sans-serif<\/p>\n<p><strong>Roboto<\/strong>\u00a0\u203a Tahoma\u00a0\u203a Verdana \u203a Segoe \u203a sans-serif<\/p>\n<p><strong>Source Sans Pro<\/strong>\u00a0\u203a Tahoma\u00a0\u203a Verdana \u203a Segoe \u203a sans-serif<\/p>\n<p><strong>Montserrat<\/strong>\u00a0\u203a Trebuchet MS\u00a0\u203a Lucida Grande \u203a Lucida Sans Unicode \u203a Lucida Sans \u203a sans-serif<\/p>\n<p><strong>Ubuntu<\/strong>\u00a0\u203a Tahoma\u00a0\u203a Verdana \u203a Segoe \u203a sans-serif<\/p>\n<p>Notice that we've kept an eye on the typography design and didn't add fancier or more complex fonts - such as the Lobster font - that wouldn't have an appropriate fallback font.<\/p>\n<p>&nbsp;<\/p>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>We&#8217;ve added some popular web fonts\u00a0to the default\u00a0set of\u00a0web safe fonts. Use them to add personality to your emails while keeping your message clear and readable. At the same time, review this article to be aware of\u00a0how web fonts display in different email clients as not all fonts are fully supported everywhere. &nbsp; What are [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":15226,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/pages\/15269"}],"collection":[{"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/comments?post=15269"}],"version-history":[{"count":4,"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/pages\/15269\/revisions"}],"predecessor-version":[{"id":15411,"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/pages\/15269\/revisions\/15411"}],"up":[{"embeddable":true,"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/pages\/15226"}],"wp:attachment":[{"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/media?parent=15269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}