{"id":253584,"date":"2017-04-17T05:02:14","date_gmt":"2017-04-17T12:02:14","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=253584"},"modified":"2020-03-25T06:30:42","modified_gmt":"2020-03-25T13:30:42","slug":"font-display","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-display\/","title":{"rendered":"font-display"},"content":{"rendered":"\n<p>The <code>font-display<\/code> property defines how font files are loaded and displayed by the browser. It is applied to the <a href=\"https:\/\/css-tricks.com\/snippets\/css\/using-font-face\/\"><code>@font-face<\/code><\/a> rule which defines custom fonts in a stylesheet.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"5\"><code markup=\"tt\">@font-face {\n  font-family: 'MyWebFont'; \/* Define the custom font name *\/\n  src:  url('myfont.woff2') format('woff2'),\n        url('myfont.woff') format('woff'); \/* Define where the font can be downloaded *\/\n  font-display: fallback; \/* Define how the browser behaves during download *\/\n}<\/code><\/pre>\n\n\n\n<!--more-->\n\n\n<h3 class=\"wp-block-heading\" id=\"values\">Values<\/h3>\n\n\n<p>The <code>font-display<\/code> property accepts five values:<\/p>\n\n\n\n<ul><li><code>auto<\/code> (default): Allows the browser to use its default method for loading, which is most often similar to the <code>block<\/code> value.<\/li><li><code>block<\/code>: Instructs the browser to briefly hide the text until the font has fully downloaded. More accurately, the browser draws the text with an invisible placeholder then swaps it with the custom font face as soon as it loads. This is also known as a &#8220;flash of invisible text&#8221; or FOIT.<\/li><li><code>swap<\/code>: Instructs the browser to use the fallback font to display the text until the custom font has fully downloaded. This is also known as a &#8220;flash of unstyled text&#8221; or FOUT.<\/li><li><code>fallback<\/code>: Acts as a compromise between the <code>auto<\/code> and <code>swap<\/code> values. The browser will hide the text for about 100ms and, if the font has not yet been downloaded, will use the fallback text. It will swap to the new font after it is downloaded, but only during a short swap period (probably 3 seconds).<\/li><li><code>optional<\/code>: Like <code>fallback<\/code>, this value tells the browser to initially hide the text, then transition to a fallback font until the custom font is available to use. However, this value also allows the browser to determine whether the custom font is even used at all, using the user&#8217;s connection speed as a determining factor where slower connections are less likely to receive the custom font.<\/li><\/ul>\n\n\n\n<p>Here&#8217;s another way to think about them<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"\"><tbody><tr><td>&nbsp;<\/td><th>Block Period<\/th><th>Swap Period<\/th><\/tr><tr><th>block<\/th><td>Short<\/td><td>Infinite<\/td><\/tr><tr><th>swap<\/th><td>None<\/td><td>Infinite<\/td><\/tr><tr><th>fallback<\/th><td>Extremely Short<\/td><td>Short<\/td><\/tr><tr><th>optional<\/th><td>Extremely Short<\/td><td>None<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"why-we-need-fontdisplay\">Why We Need <code>font-display<\/code><\/h3>\n\n\n<p>Before we had widespread support for <code>@font-face<\/code>, our typographic arsenal was limited to local fonts, where the only available fonts were the ones that came preloaded on the end user&#8217;s computer. We call these &#8220;web safe&#8221; fonts because the browser does not need to download anything in order for them to be rendered.<\/p>\n\n\n\n<p>Then came the <a href=\"https:\/\/css-tricks.com\/snippets\/css\/using-font-face\/\"><code>@font-face<\/code><\/a> rule which gave web designers and front-end developers new typographical powers unlike ever before. It allowed us to upload font files to a server and write a set of rules in our stylesheets that name the font and tell the browser where to download the files. It also gave rise to services like <a href=\"https:\/\/fonts.google.com\/\" rel=\"noopener\">Google Fonts<\/a> which brought custom fonts to the masses. Finally, a major hurdle that separated web design from print design had been toppled!<\/p>\n\n\n\n<p>However, custom fonts came (and continue to come) at a cost. Font files can be large and the extra time to download the files can slow the performance of a site, particularly for devices on a slower network connection. The extra cost to users on limited data plans also became a factor.<\/p>\n\n\n\n<p>One other particular concern that arose with custom fonts is what was dubbed a &#8220;flash of unstyled text&#8221; or FOUT for short. Browsers would default to showing a system font while waiting for the custom font to download. This allowed web pages to load faster but raised concerns among web designers who viewed this as hijacking the user experience and misrepresenting the intended design. Web browsers today generally hide the text until the custom font is downloaded, which we now refer to as a &#8220;flash of invisible text&#8221; or FOIT.<\/p>\n\n\n\n<p>Neither FOUT nor FOIT is great. We have <a href=\"https:\/\/css-tricks.com\/snippets\/css\/using-font-face\/#article-header-id-12\">ways to optimize<\/a> the performance of custom fonts to help ease the effects. However, now we have <code>font-display<\/code> to tell the browser whether we prefer FOUT, FOIT, or even something in between.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"testing-for-support\">Testing for Support<\/h3>\n\n\n<p>Interesting caveat noted by \u0160ime Vidas:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>CSS font-display is a <code>@font-face<\/code> descriptor and not a property, so its support in the browser cannot be tested with feature queries (CSS <code>@supports<\/code> rule and CSS.supports API).<\/p><\/blockquote>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More Information<\/h3>\n\n\n<ul><li><a href=\"https:\/\/tabatkins.github.io\/specs\/css-font-display\/#font-display-desc\" rel=\"noopener\">CSS Font Rendering Controls Module Level 1 Specification<\/a>: A draft of the specification for the property.<\/li><li><a href=\"https:\/\/css-tricks.com\/font-display-masses\/\"><code>font-display<\/code> for the masses<\/a>: Jeremy Wagner introduced us to the property here on CSS-Tricks.<\/li><li><a href=\"https:\/\/css-tricks.com\/snippets\/css\/using-font-face\/#article-header-id-12\">Using <code>@font-face<\/code><\/a>: A comprehensive explanation of the rule and best practices for how to use it.<\/li><li><a href=\"https:\/\/css-tricks.com\/snippets\/css\/system-font-stack\/\">System Font Stack<\/a>: A snippet for forgoing custom fonts altogether and rely solely on a user&#8217;s system fonts.<\/li><li><a href=\"https:\/\/developers.google.com\/web\/updates\/2016\/02\/font-display\" rel=\"noopener\">Controlling Font Performance with <code>font-display<\/code><\/a>: A fine write-up on the topic by Google.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser Support<\/h3>\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=css-font-rendering-controls\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">60<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">58<\/span><\/td><td class=\"n nope\" title=\"IE - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">79<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">11.1<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">11.3-11.4<\/span><\/td><\/tr><\/table><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>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.<\/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":[817,1107],"acf":[],"jetpack-related-posts":[{"id":322037,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-kerning\/","url_meta":{"origin":253584,"position":0},"title":"font-kerning","date":"September 25, 2020","format":false,"excerpt":"The CSS font-kerning property defines the way specific pairs of letters are spaced. You see, fonts often contain information about how much breathing room a character has on its left and right edges. The proper term for the spacing is sidebearings. When two characters are placed next to each other,\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":259792,"url":"https:\/\/css-tricks.com\/almanac\/properties\/u\/unicode-range\/","url_meta":{"origin":253584,"position":1},"title":"unicode-range","date":"September 8, 2017","format":false,"excerpt":"The unicode-range property in CSS is used by the @font-face to define the characters that are supported by the font face. @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 be downloaded *\/ unicode-range: U+00-FF; \/* Define\u2026","rel":"","context":"In \"unicode-range\"","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":253584,"position":2},"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":250398,"url":"https:\/\/css-tricks.com\/video-screencasts\/152-font-loading-zach-leatherman\/","url_meta":{"origin":253584,"position":3},"title":"#152: Font Loading with Zach Leatherman","date":"January 30, 2017","format":false,"excerpt":"Time for another pairing screencast! This time I have Zach Leatherman on, from Filament Group. Zach has done a lot of research, writing, and speaking about web font loading the past few years. He's got a comprehensive guide on it! There are some problems with the default way that custom\u2026","rel":"","context":"In \"performance\"","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":253584,"position":4},"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":22055,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-weight\/","url_meta":{"origin":253584,"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\/253584"}],"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=253584"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/253584\/revisions"}],"predecessor-version":[{"id":305667,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/253584\/revisions\/305667"}],"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=253584"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=253584"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}