{"id":266653,"date":"2018-02-23T07:42:35","date_gmt":"2018-02-23T14:42:35","guid":{"rendered":"http:\/\/css-tricks.com\/?p=266653"},"modified":"2020-10-27T08:58:44","modified_gmt":"2020-10-27T15:58:44","slug":"understanding-web-fonts-getting","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/understanding-web-fonts-getting\/","title":{"rendered":"Understanding Web Fonts and Getting the Most Out of Them"},"content":{"rendered":"\n<p class=\"explanation\">Thierry Blancpain is a brand and interaction designer at <a href=\"http:\/\/informalinquiry.com\" rel=\"noopener\">Informal Inquiry<\/a> in New York City and co-founder of <a href=\"https:\/\/www.grillitype.com\" rel=\"noopener\">Grilli Type<\/a>, a Swiss type foundry. While this article is generally applicable to all web fonts, Grilli Type fonts are used throughout as examples of the concepts, particularly those demonstrating OpenType features.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Using your own fonts instead of system fonts is getting easier, but it\u2019s still an evolving field. We\u2019ll go over the different types of font formats and cover tips and best practices for them in this post. We\u2019ll also dive into more in-depth features for those of you who want to level up and aim to perfect the craft with advanced concepts and considerations when using web fonts. In the end, you\u2019ll hopefully feel equipped not only to put web fonts to use but to get the most out of them.<\/p>\n\n\n\n<p>Here we go!<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-font-formats\">Font Formats<\/h3>\n\n\n<p>When you purchase web fonts licensing, you receive a package of font files that typically include at least some of the following formats:<\/p>\n\n\n\n<ul><li><strong>Embedded OpenType (EOT):<\/strong> <abbr title=\"Embedded OpenType\">EOT<\/abbr> is a legacy format developed by Microsoft. Older Internet Explorer versions require <abbr title=\"Embedded OpenType\">EOT<\/abbr> to render your web fonts. <abbr title=\"Embedded OpenType\">EOT<\/abbr> is often served uncompressed so, if you don\u2019t require browser support of the likes of <abbr title=\"Internet Explorer 8\">IE8<\/abbr> or below, then you\u2019re better off leaving it out.<\/li><li><strong>TrueType (TTF):<\/strong> <abbr title=\"TrueType Font\">TTF<\/abbr> is a font format developed by Microsoft and Apple in the 1980s. Modern <abbr title=\"TrueType Font\">TTF<\/abbr> files are also called TrueType OpenType fonts. <abbr title=\"TrueType\">TTF<\/abbr> can be useful for extending support to some older browsers, especially on mobile, if you need it.<\/li><li><strong>Web Open Font Format (WOFF):<\/strong> <abbr title=\"Web Open Font Format\">WOFF<\/abbr> was developed in 2009 as a wrapper format for TrueType and OpenType fonts. It compresses the files and is supported by all modern browsers.<\/li><li><strong>Web Open Font Format 2 (WOFF2):<\/strong> <abbr title=\"Web Open Font Format 2\">WOFF2<\/abbr> is an update to the original <abbr title=\"Web Open Font Format\">WOFF<\/abbr> format. Developed by Google, this is considered the best format of the bunch because it offers smaller file sizes and better performance for modern browsers that support it.<\/li><\/ul>\n\n\n\n<p>If you are mostly targeting users with modern browsers, you can get away with a progressive method of using <code>@font-face<\/code> that only serves <abbr title=\"Web Open Font Format\">WOFF<\/abbr> and <abbr title=\"Web Open Font Format 2\">WOFF2<\/abbr> formats. These offer the best compression and allow you to deal with fewer files in your code. And if a user\u2019s machine is so old that it doesn\u2019t support either of these formats, it may be better to just serve them a system font for performance reasons, anyway.<\/p>\n\n\n\n<p>If you want to expand support as wide as possible, then add <abbr title=\"Embedded OpenType\">EOT<\/abbr> and <abbr title=\"TrueType Font\">TTF<\/abbr> files to the mix. SVG fonts have also been traditionally used for expanding browser support but, at Grilli Type, we don\u2019t offer SVG fonts anymore as they bring with them a number of downsides. Google Chrome for example has even completely removed support for the format.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-embedding-web-fonts\">Embedding Web Fonts<\/h3>\n\n\n<p>We make use of <a href=\"https:\/\/css-tricks.com\/snippets\/css\/using-font-face\/\"><code>@font-face<\/code><\/a> to include fonts in CSS.<\/p>\n\n\n\n<p>Here\u2019s the deepest level of support, including all of the font file formats we\u2019ve discussed so far:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@font-face {\n  font-family: FontName;\n  src: url('path\/filename.eot');\n  src: url('path\/filename.eot?#iefix') format('embedded-opentype'),\n    url('path\/filename.woff2') format('woff2'), \n    url('path\/filename.woff') format('woff'),\n    url('path\/filename.ttf') format('truetype');\n}<\/code><\/pre>\n\n\n\n<p>We can trim things down quite a bit if we&#8217;re only aiming to support modern browsers:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@font-face {\n  font-family: FontName;\n  src: url('path\/filename.woff2') format('woff2'), \n    url('path\/filename.woff') format('woff');\n}<\/code><\/pre>\n\n\n\n<p>Once the font has been declared and defined, we can put it to use on our elements. For example:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">body {\n  font-family: 'FontName', Helvetica, Arial, sans-serif;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-hosting-web-fonts\">Hosting Web Fonts<\/h3>\n\n\n<p>One of the most flexible ways to load web fonts is to self-host them. That means that you host the files on your own server and your fonts will always be available when a visitor comes to your website without a third-party dependency. Neither tracking codes nor JavaScript is generally required to load self-hosted font files. Many small type foundries offer fonts as a direct download so they can be self-hosted and at Grilli Type, we are convinced it\u2019s the best way to serve fonts.<\/p>\n\n\n\n<p>While some type foundries offer self-hosting (both with and without cumbersome restrictions and requirements), others only offer hosted solutions, meaning they host the files on your behalf. Some of the well-known ones include <a href=\"https:\/\/www.typography.com\/\" rel=\"noopener\">Hoefler &amp; Co.<\/a>, <a href=\"https:\/\/fontbureau.typenetwork.com\" rel=\"noopener\">Font Bureau<\/a>, and <a href=\"https:\/\/www.typotheque.com\" rel=\"noopener\">Typotheque<\/a>. Font Bureau and Typotheque offer their fonts in both ways at different price points.<\/p>\n\n\n\n<p>Make sure you know how a type foundry\u2019s web fonts are offered before you buy licensing, because the difference in hosting and the terms of use can affect how they are implemented. Get what makes the most sense for you and fits your needs, and make sure you\u2019re using them legally and according to the foundry\u2019s licensing agreement.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-advanced-typographic-features\">Advanced Typographic Features<\/h3>\n\n\n<p>Let\u2019s take a look at some of the more advanced features of web fonts.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-spacing-and-kerning\">Spacing and Kerning<\/h4>\n\n\n<p>There are two settings inside font files that define the <a href=\"https:\/\/css-tricks.com\/methods-controlling-spacing-web-typography\/\">space between characters<\/a>:<\/p>\n\n\n\n<ol><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/l\/letter-spacing\/\"><code>letter-spacing<\/code><\/a>: This is defined as side bearings on the left and right side of each character<\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/font-kerning\" rel=\"noopener\"><code>font-kerning<\/code><\/a>: This refers to specific adjustments between two characters<\/li><\/ol>\n\n\n\n<p>Spacing cannot be turned off at all, because otherwise the text rendering engine (your browser) wouldn\u2019t know what to do with these letters. Kerning, on the other hand, is turned off by default in browsers and has to be turned on by you in your CSS.<\/p>\n\n\n\n<figure class=\"wp-block-image align-none media-266656\" id=\"post-266656\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/kerning-explainer.gif?ssl=1\" alt=\"\" data-recalc-dims=\"1\"\/><figcaption>Comparing type with kerning enabled and disabled.<\/figcaption><\/figure>\n\n\n\n<p>It\u2019s easier to control kerning than you might think! Here\u2019s how to activate it across all browsers that support it:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">p {\n  font-feature-settings: \"kern\" 1;\n  font-kerning: normal;\n}<\/code><\/pre>\n\n\n\n<p>If you don\u2019t use a something like <a href=\"https:\/\/css-tricks.com\/autoprefixer\/\">Autoprefixer<\/a> to help manage browser support in CSS, then you\u2019ll want to manually write out the browser vendor prefixes for this setting to extend browser support to older versions:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* All vendor prefixes for `font-feature-settings` *\/\np {\n  -moz-font-feature-settings:    \"kern\" 1; \n  -ms-font-feature-settings:     \"kern\" 1; \n  -o-font-feature-settings:      \"kern\" 1; \n  -webkit-font-feature-settings: \"kern\" 1; \n  font-feature-settings:         \"kern\" 1;\n  font-kerning: normal;\n}<\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-advanced-opentype-features\">Advanced OpenType Features<\/h4>\n\n\n<p>We just discussed how to use the <code>font-feature-settings<\/code> attribute to control kerning, but it can also be used to control other available OpenType feature in your web fonts. The number of supported features has been growing over time and the <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-feature-settings\/\">CSS-Tricks almanac<\/a> is a good place to reference what is possible with OpenType.<\/p>\n\n\n\n<p class=\"explanation\">OpenType features are really exciting because they open up a bunch of possibilities for controlling fonts without having to serve multiple files to get the same effect. At the same time, it\u2019s worth noting that the features an OpenType font file supports is up to the font designer and that not all fonts support the same features.<\/p>\n\n\n\n<p>To illustrate how advanced OpenType features can be chained together, the following code would turn on the numeric characters of an OpenType-enabled font that supports both old-style numerals (<code>onum<\/code>) and proportional numerals (<code>pnum<\/code>), plus enable kerning and activate a specific stylistic set included in the font:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.my-element {\n  font-feature-settings: \"onum\" 1, \"pnum\" 1, \"kern\" 1, \"ss01\" 1;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image align-none media-266655\" id=\"post-266655\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/features-explainer.gif?ssl=1\" alt=\"\" data-recalc-dims=\"1\"\/><figcaption>Type with and without the activated OpenType features in the code example.<\/figcaption><\/figure>\n\n\n\n<p>The <code>font-feature-settings<\/code> attribute can be used to activate stylistic alternates, discretionary ligatures, different types of figures available in a font, small caps, and other handy things. Typofonderie has a nice <a href=\"https:\/\/typofonderie.com\/font-support\/opentype-features\/\" rel=\"noopener\">overview of these advanced features<\/a>, including examples.<\/p>\n\n\n\n<p class=\"exaplanation\">Because <code>font-feature-settings<\/code> is used to set many OpenType features at once, it\u2019s not possible to define a single setting differently as the other choices will not be inherited. All of the features would need to be defined again to change the settings for child elements.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-letting-spacing-and-word-spacing\">Letting Spacing and Word Spacing<\/h4>\n\n\n<p>CSS has long supported the <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/l\/letter-spacing\/\"><code>letter-spacing<\/code><\/a> and <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/w\/word-spacing\/\"><code>word-spacing<\/code><\/a> attributes. When used correctly, both provide a fair amount of control over two very important aspects of how your type will look.<\/p>\n\n\n\n<p>As with all things typography, you\u2019ll want to learn how to evaluate different options both functionally and visually and make decisions based on your impression. Different contexts may call for different spacing needs.<\/p>\n\n\n\n<p>At smaller sizes, most typefaces will benefit from a little extra spacing between characters and words. In larger contexts, like headings, typefaces may benefit from more narrow spacing. In either case, the right decisions require attention and your best judgment based on the outcomes.<\/p>\n\n\n\n<p>I\u2019ve found that <code>letter-spacing<\/code> and <code>word-spacing<\/code> both work best using <code>em<\/code> units for the values. That allows the spacing to adjust fluidly based on the font size of the element they are applied to. The following example will give your content a little more room to breathe at smaller font sizes:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">p {\n  font-size: 12px;\n  letter-spacing: 0.015em;\n  word-spacing: 0.001em;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image align-none media-266654\" id=\"post-266654\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/letterspacing-explainer.gif?ssl=1\" alt=\"\" data-recalc-dims=\"1\"\/><figcaption>Comparing the difference with letter and word spacing turned on and off.<\/figcaption><\/figure>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-font-rendering\">Font Rendering<\/h4>\n\n\n<p>Using type on screens brings up important questions about how they are rendered. Fonts are usually designed on about a <code>1000 units tall<\/code> grid\u2014or even larger\u2014but then are displayed at something like a <code>16px<\/code> font size. In an interplay between device, screen, and software, this reduction in resolution and fidelity requires some smarts to make small type legible and good-looking. Again, be observant, test in many browsers, and use your best judgment to put the best methods to use to increase legibility.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-hinting\">Hinting<\/h4>\n\n\n<p>Every operating system treats fonts differently from one another. In MacOS, the smarts are in the operating system (and thus can evolve over time), while the fonts themselves can be dumb. Historically, on Windows, the smarts were supposed to be included in the font software, and the system was supposed to use those smarts to decide how a font should be rendered at different sizes.<\/p>\n\n\n\n<p>Those smarts are called <em>hinting<\/em>. Hinting information embedded in the font files can tell a computer that the two stems of an \u201cH\u201d character are supposed to have the same line width, or that the space above and below the crossbar should stay about equal at smaller sizes.<\/p>\n\n\n\n<p>Hinting is a very complex and complicated topic, but the important takeaway is that the same font at the same size might render differently, even on the same computer depending on many factors, including the screen, the browser, and even the font and background color.<\/p>\n\n\n\n<p>Microsoft <a href=\"https:\/\/docs.microsoft.com\/en-us\/typography\/truetype\/hinting\" rel=\"noopener\">provides a guide<\/a> on the topic of hinting. Even though it was initially released in 1997, it\u2019s still a good read because it so thoroughly explores the topic.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-font-smoothing\">Font Smoothing<\/h4>\n\n\n<p>While hinting information included in the font files is mostly being ignored on MacOS, specific browsers offer some additional control over font rendering.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">p {\n  -webkit-font-smoothing: antialiased; \/* Chrome, Safari *\/\n  -moz-osx-font-smoothing: grayscale; \/* Firefox *\/\n}<\/code><\/pre>\n\n\n\n<p>Using these CSS properties leads to sharper, thinner text rendering on MacOS and iOS. But beware: this can also lead to rendering problems, especially if you\u2019re already using a thin font or font weight.<\/p>\n\n\n\n<p>Both <code>antialiased<\/code> and <code>grayscale<\/code> are mainly useful to balance the rendering of fonts when using light text on dark backgrounds, as they would otherwise get rendered quite a bit bolder.<\/p>\n\n\n\n<p>The <code>font-smoothing<\/code> property and its values are not on the path to become a standard CSS feature, so use it with caution and perhaps only in contexts where you know you need to target a specific browser and context.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-caution-optimizelegibility\">Caution: OptimizeLegibility<\/h4>\n\n\n<p>We often come across this attribute when troubleshooting font usage on Grilli Type customer websites:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">p {\n  text-rendering: optimizeLegibility;\n}<\/code><\/pre>\n\n\n\n<p>Among other things, it activates kerning. That was very useful at some point, but is not needed anymore (as shown above). In addition to kerning, it also activates all kinds of ligatures, including extravagant ones that may be present in the font files.<\/p>\n\n\n\n<p>Although there are some use cases for this, do not use this feature if you don\u2019t know exactly what you\u2019re doing with it. Chance are you don\u2019t need it in the first place.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-web-font-resources\">Web Font Resources<\/h3>\n\n\n<p>If you\u2019re ready to dive deeper into web fonts, here are a handful of recommended resources you can use to learn more:<\/p>\n\n\n\n<ul><li><strong><a href=\"http:\/\/clagnut.com\/sandbox\/css3\/\" rel=\"noopener\">Clagnut\u2019s OpenType CSS Sandbox<\/a> by Richard Rutter:<\/strong> A great place to test out OpenType features and easily put together your required CSS code.<\/li><li><strong><a href=\"https:\/\/abookapart.com\/products\/webfont-handbook\" rel=\"noopener\">Webfont Handbook<\/a> by Bram Stein:<\/strong> This is the most in-depth e-book you can possibly read on web fonts, font rendering, and font performance.<\/li><li><strong><a href=\"http:\/\/copypastecharacter.com\/\" rel=\"noopener\">Copy Paste Character<\/a>:<\/strong> This is a great website that allows you to access pretty much any special character you might ever use.<\/li><li><strong><a href=\"https:\/\/css-tricks.com\/snippets\/css\/using-font-face\/\">Using @font-face<\/a> by CSS-Tricks<\/strong>: This article includes snippets for declaring web fonts based on varying browser support.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-advanced-web-font-considerations\">Advanced Web Font Considerations<\/h3>\n\n\n<p>For those who are ready to level up to more advanced techniques, here are even more considerations to take into account:<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-uploading-licensed-fonts-to-github\">Uploading Licensed Fonts to Github<\/h4>\n\n\n<p>If you commit a project to a public repo and use font files that you have licensed, please make sure that either the fonts or the directory that contains them is included in your <code>.gitignore<\/code> file so that they do not get uploaded. This will prevent others from taking and using your font files, and it can prevent you from breaking any terms of use for licensed fonts that usually have usage and sharing restrictions.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">.DS_Store\n  path\/to\/web\/fonts\/folder\/*<\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-font-loading-tactics\">Font Loading Tactics<\/h4>\n\n\n<p>Loading web fonts can be as easy as simply using <code>@font-face<\/code> but that doesn\u2019t necessarily offer the best possible performance. For example, it opens up the possibility of a Flash Of Unstyled Text (FOUT) which might be considered poor <abbr title=\"User Experience\">UX<\/abbr> in some cases. Zach Leatherman&#8217;s <a href=\"https:\/\/www.zachleat.com\/web\/comprehensive-webfonts\/\" rel=\"noopener\">\u201cA Comprehensive Guide to Font Loading Strategies\u201d<\/a> covers that and methods to improve the loading experience that will make you and your users very happy.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-base64-encoded-font-files\">Base64-Encoded Font Files<\/h4>\n\n\n<p>In some rare instances, encoding your fonts as <code>base64<\/code> inside your CSS will be a good idea but, generally, it is not\u2014and, not to mention, you might break your font\u2019s licensing agreement in the process. Be sure to proceed with a lot of caution and read up on your font\u2019s terms of use when considering <code>base64<\/code>.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-css-text-decoration\">CSS Text Decoration<\/h4>\n\n\n<p>The W3C is working on <a href=\"https:\/\/drafts.csswg.org\/css-text-decor-3\/\" rel=\"noopener\">a draft for new controls<\/a> for text decoration, mainly dealing with how to make underlining text better and easier in CSS. This is not yet usable across all browsers, but have a look!<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-variable-fonts\">Variable Fonts<\/h4>\n\n\n<p>In 2017, the <a href=\"https:\/\/www.microsoft.com\/en-us\/Typography\/OpenTypeSpecification.aspx\" rel=\"noopener\">OpenType fonts specification 1.8.2<\/a> was released, allowing for what is called Variable Fonts. This new version of OpenType will allow for the inclusion of multiple font styles into a single font file, reducing server requests and web font file sizes. Depending on the type designer\u2019s choices, it may also allow for the use of arbitrary weights in between existing weights and widths of fonts, among other things. <a href=\"https:\/\/www.axis-praxis.org\" rel=\"noopener\">Axis Praxis<\/a> is a good website to play around with some existing test fonts \u2013 you will need a recent version of Safari or Chrome to do so, though.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-wrapping-up\">Wrapping Up<\/h3>\n\n\n<p>We covered a lot in this article! Hopefully, now you have a good understanding of the different font files out there, how to work with them, and all the amazing and powerful ways fonts can be styled using both tried and true methods and cutting-edge features.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Using custom fonts is getting increasingly easier. We\u2019ll cover the basics of usage here and get into the more in-depth features that are helpful for developers who want to level up and aim to perfect advanced concepts, like loading font files.<\/p>\n","protected":false},"author":251666,"featured_media":266655,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[655,1352,855,1371,1107],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/features-explainer.gif?fit=1600%2C1000&ssl=1","jetpack-related-posts":[],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/features-explainer.gif?fit=1024%2C640&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/266653"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/251666"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=266653"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/266653\/revisions"}],"predecessor-version":[{"id":324527,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/266653\/revisions\/324527"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/266655"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=266653"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=266653"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=266653"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}