{"id":6708,"date":"2026-07-12T12:18:25","date_gmt":"2026-07-12T19:18:25","guid":{"rendered":"https:\/\/briangardner.com\/suede\/?page_id=6708"},"modified":"2026-08-01T15:01:47","modified_gmt":"2026-08-01T22:01:47","slug":"font-smoothing","status":"publish","type":"page","link":"https:\/\/briangardner.com\/suede\/docs\/font-smoothing\/","title":{"rendered":"Font Smoothing"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Font smoothing refines how type is rendered, reducing jagged edges and improving legibility. In Suede, it contributes to a cleaner, more consistent reading experience across the theme.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The setting is applied globally through custom CSS defined in theme.json, ensuring consistent typography and centralized control.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" style=\"margin-top:var(--wp--preset--spacing--40)\">Add Font Smoothing<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Below is the code used to add font smoothing in&nbsp;theme.json:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n\t\"styles\": {\n\t\t\"css\": \"html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } ::selection { background-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); }\"\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" style=\"margin-top:var(--wp--preset--spacing--40)\">Remove Font Smoothing<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Font smoothing can be removed if you prefer a more native, system-rendered look. Because it\u2019s applied via Additional CSS, you don\u2019t need to edit theme files or override styles manually.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Open the Site Editor (Appearance \u2192 Editor), go to Styles, then click the three dots to access the Additional CSS panel. From there, remove or disable the font-smoothing rules and save\u2014changes will apply globally.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"1400\" src=\"https:\/\/briangardner.com\/suede\/wp-content\/uploads\/sites\/2\/suede-font-smoothing.webp\" alt=\"Additional CSS panel in site editor to customize font smoothing\" class=\"wp-image-6754\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Font smoothing refines how type is rendered, reducing jagged edges and improving legibility. In Suede, it contributes to a cleaner, more consistent reading experience across the theme. The setting is applied globally through custom CSS defined in theme.json, ensuring consistent typography and centralized control. Add Font Smoothing Below is the code used to add font [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":6655,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"simple_seo_seo_title":"Suede Font Smoothing \u2013 Brian Gardner","simple_seo_seo_description":"Explore how Suede uses font smoothing to create cleaner, more consistent typography through a global theme setting.","simple_seo_seo_robots":"","simple_seo_seo_canonical":"","simple_seo_seo_redirect":"","footnotes":""},"class_list":["post-6708","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages\/6708","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/comments?post=6708"}],"version-history":[{"count":3,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages\/6708\/revisions"}],"predecessor-version":[{"id":6755,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages\/6708\/revisions\/6755"}],"up":[{"embeddable":true,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages\/6655"}],"wp:attachment":[{"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/media?parent=6708"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}