{"id":318556,"date":"2020-08-05T16:16:26","date_gmt":"2020-08-05T23:16:26","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=318556"},"modified":"2020-09-01T08:18:11","modified_gmt":"2020-09-01T15:18:11","slug":"font-synthesis","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-synthesis\/","title":{"rendered":"font-synthesis"},"content":{"rendered":"\n<p>The <code>font-systhesis<\/code> property in CSS gives the browser instructions for how to handle font bolded and italicized character when the specified <code>font-family<\/code> doesn&#8217;t include them.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Let&#8217;s take <a href=\"https:\/\/fonts.google.com\/specimen\/Lato\" rel=\"noopener\">Lato<\/a> from Google Fonts as an example. It says there are 10 different variations of the font.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"854\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/lato-specimen.png?resize=1024%2C854&#038;ssl=1\" alt=\"\" class=\"wp-image-318557\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/lato-specimen.png?resize=1024%2C854&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/lato-specimen.png?resize=300%2C250&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/lato-specimen.png?resize=768%2C641&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/lato-specimen.png?resize=1536%2C1282&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/lato-specimen.png?resize=2048%2C1709&amp;ssl=1 2048w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/lato-specimen.png?resize=1000%2C834&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Each one of those font variations is technically a different font file. If we want to use certain weights and styles, then we&#8217;d link those files up so the browser has something to load.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"140\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/lato-variations-1.jpg?resize=1024%2C140&#038;ssl=1\" alt=\"\" class=\"wp-image-318560\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/lato-variations-1.jpg?resize=1024%2C140&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/lato-variations-1.jpg?resize=300%2C41&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/lato-variations-1.jpg?resize=768%2C105&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/lato-variations-1.jpg?resize=1000%2C136&amp;ssl=1 1000w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/lato-variations-1.jpg?w=1026&amp;ssl=1 1026w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>This sentence would normally require four different font files.<\/figcaption><\/figure>\n\n\n\n<p>But, not all fonts include files for handling weight and style. In those cases, the browser will &#8220;synthesize&#8221; the appearance itself. The browser does the best it can, but faux bolding and style sometimes makes text less legible; that is, less legible than a truly designed version. In the mildest of cases, we may see characters overlap. In more severe cases, the text is completely unreadable or might even change the meaning \u2014 as could happen with languages like Chinese, Japanese, Korean and other logographic scripts.<\/p>\n\n\n\n<p>That&#8217;s where <code>font-synthesis<\/code> comes in. It controls which typefaces the browser is allowed to synthesize.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"syntax\">Syntax<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  font-synthesis: none | [ weight || style ];\n}<\/code><\/pre>\n\n\n\n<p>In plain English, this means <code>font-synthesis<\/code> will accept:<\/p>\n\n\n\n<ul><li>a value of <code>none<\/code><\/li><li>either <code>weight<\/code> or <code>style<\/code><\/li><li>both <code>weight<\/code> and <code>style<\/code><\/li><\/ul>\n\n\n\n<p>It&#8217;s worth noting that <code>font-synthesis<\/code> is considered a shorthand property. <a href=\"https:\/\/drafts.csswg.org\/css-fonts\/#font-synthesis\" rel=\"noopener\">According to the spec<\/a>, it&#8217;s a combination of <code>font-synthesis-weight<\/code> and <code>font-synthesis-style<\/code> where both accept values of <code>auto<\/code> or <code>none<\/code>. Since it&#8217;s possible to get the same effect using the shorthand, that&#8217;s probably the best way to go.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"values\">Values<\/h3>\n\n\n<ul><li><code>none<\/code>: Neither bold nor oblique may be synthesized<\/li><li><code>weight<\/code>: Bold may be synthesized by the browser<\/li><li><code>style<\/code>: Oblique may be synthesized by the browser<\/li><\/ul>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">font-synthesis: none; \/* browser will not synthesize any font faces *\/\nfont-synthesis: style; \/* browser will not synthesize a bold font face *\/\nfont-synthesis: weight; \/* browser will not synthesize an oblique font face *\/\nfont-synthesis: weight style; \/* browser will synthesize bold and oblique faces if they are unavailable *\/<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"usage\">Usage<\/h3>\n\n\n<p><code>font-synthesis<\/code> may be used with all elements, including the <code><a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/f\/first-letter\/\">::first-letter<\/a><\/code> and <code><a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/f\/first-line\/\">::first-line<\/a><\/code> pseudo-elements.<\/p>\n\n\n\n<p>There may be cases where not allowing the browser to synthesize bold and oblique on an entire language makes sense because either one can obscure characters. Here&#8217;s an example pulled from the spec that disables synthesized bold and oblique font faces containing Arabic characters:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Disables synthetic bolded and obliqued characters in Arabic *\/\n*:lang(ar) { font-synthesis: none; }<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"demo\">Demo<\/h3>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_dyMbmmO\" src=\"\/\/codepen.io\/anon\/embed\/dyMbmmO?height=450&amp;theme-id=1&amp;slug-hash=dyMbmmO&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed dyMbmmO\" title=\"CodePen Embed dyMbmmO\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n\n<p>At the time of writing, caniuse reports <a href=\"https:\/\/caniuse.com\/#feat=mdn-css_properties_font-synthesis\" rel=\"noopener\">20.21% global coverage<\/a> for the <code>font-synthesis<\/code> property.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"desktop\">Desktop<\/h4>\n\n\n<figure class=\"wp-block-table ticss-a3e7bf70\"><table><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">IE<\/th><th class=\"has-text-align-center\" data-align=\"center\">Edge<\/th><th class=\"has-text-align-center\" data-align=\"center\">Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">34+<\/td><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">9+<\/td><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<h4 class=\"wp-block-heading\" id=\"mobile\">Mobile<\/h4>\n\n\n<figure class=\"wp-block-table ticss-4987c50d\"><table><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">iOS Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera Mini<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Browser<\/th><th class=\"has-text-align-center\" data-align=\"center\">Chrome for Android<\/th><th class=\"has-text-align-center\" data-align=\"center\">Firefox for Android<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">9+<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">68<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Want to use <code>font-synthesis<\/code> in email? Campaign Monitor <a href=\"https:\/\/www.campaignmonitor.com\/css\/text-fonts\/font-synthesis\/\" rel=\"noopener\">reports<\/a> that it is supported by the following clients:<\/p>\n\n\n\n<ul><li>Apple Mail 10+<\/li><li>Outlook for Mac<\/li><li>AOL Alto iOS app<\/li><li>iOS Mail 10+<\/li><li>Sparrow<\/li><li>G Suite<\/li><li>Gmail<\/li><li>Google Inbox<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More information<\/h3>\n\n\n<ul><li><a href=\"https:\/\/drafts.csswg.org\/css-fonts\/#font-synthesis\" rel=\"noopener\">CSS Fonts Module Level 4 Specification<\/a><\/li><li><a href=\"https:\/\/meyerweb.com\/eric\/css\/tests\/css3\/show.php?p=font-synthesis\" rel=\"noopener\">&#8220;CSS3 test: <code>font-synthesis<\/code>&#8220;<\/a> by Eric Meyer<\/li><li><a href=\"https:\/\/css-tricks.com\/how-to-italicize-text\/\">&#8220;How to Italicize Text&#8221;<\/a> by Chris Coyier<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The font-systhesis property in CSS gives the browser instructions for how to handle font bolded and italicized character when the specified font-family doesn&#8217;t include them.<\/p>\n","protected":false},"author":2508,"featured_media":0,"parent":13921,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-single.php","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":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":261983,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-variant-numeric\/","url_meta":{"origin":318556,"position":0},"title":"font-variant-numeric","date":"October 31, 2017","format":false,"excerpt":"The font-variant-numeric property in CSS supports the OpenType font format by specifying which numeric glyphs to use on a class, including variations for fractions, ordinal markers and styled variations among others. A Little Context We tend to think of numbers as a static glyph. It prints and that's the way\u2026","rel":"","context":"In \"font-variant\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3318,"url":"https:\/\/css-tricks.com\/snippets\/css\/using-font-face-in-css\/","url_meta":{"origin":318556,"position":1},"title":"How to use @font-face in CSS","date":"August 10, 2009","format":false,"excerpt":"The @font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS. Without the rule, our designs are limited to the fonts that\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":253584,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-display\/","url_meta":{"origin":318556,"position":2},"title":"font-display","date":"April 17, 2017","format":false,"excerpt":"The font-display property defines how font files are loaded and displayed by the browser. It is applied to the @font-face rule which defines custom fonts in a stylesheet. @font-face { font-family: 'MyWebFont'; \/* Define the custom font name *\/ src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); \/* Define where the font can\u2026","rel":"","context":"In \"font-display\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":322735,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-optical-sizing\/","url_meta":{"origin":318556,"position":3},"title":"font-optical-sizing","date":"October 7, 2020","format":false,"excerpt":"The font-optical-sizing CSS property allows the browser to adjust the outline of font glyphs to make them more legible at different sizes. For example, smaller text may get a thicker outline to increase its contrast. On the flip side, larger text may get something that's more \"delicate\" to quote the\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":22040,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-style\/","url_meta":{"origin":318556,"position":4},"title":"font-style","date":"June 17, 2013","format":false,"excerpt":"The font-style property allows you to make text appear italicized (i.e. sloped, or slanted). em { font-style: italic; } This property accepts one of three possible values: normal, italic, and oblique. If a given font family has an italic or oblique face embedded, the browser will select that face. If\u2026","rel":"","context":"With 9 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":22055,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-weight\/","url_meta":{"origin":318556,"position":5},"title":"font-weight","date":"June 17, 2013","format":false,"excerpt":"The font-weight property sets the weight, or thickness, of a font and is dependent either on available font faces within a font family or weights defined by the browser. span { font-weight: bold; } The font-weight property accepts either a keyword value or predefined numeric value. The available keywords are:\u2026","rel":"","context":"With 14 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/318556"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=318556"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/318556\/revisions"}],"predecessor-version":[{"id":318573,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/318556\/revisions\/318573"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13921"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=318556"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=318556"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}