{"id":250398,"date":"2017-01-30T08:05:01","date_gmt":"2017-01-30T15:05:01","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=250398"},"modified":"2017-02-20T06:53:23","modified_gmt":"2017-02-20T13:53:23","slug":"152-font-loading-zach-leatherman","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/video-screencasts\/152-font-loading-zach-leatherman\/","title":{"rendered":"#152: Font Loading with Zach Leatherman"},"content":{"rendered":"
Time for another pairing screencast! This time I have Zach Leatherman<\/a> on, from Filament Group<\/a>. Zach has done a lot of research, writing, and speaking about web font loading the past few years. He’s got a comprehensive guide<\/a> on it! <\/p>\n There are some problems with the default way that custom fonts are loaded. As in, just linking up a font in some CSS through @font-face<\/a>. Even the way Google Fonts provides you to use their fonts Zach calls an anti-pattern (ultimately it’s just vanilla @font-face). Different browsers do different things with @font-face. For example, some versions of Safari make type set in a custom font invisible until the font loads, but has no timeout, so if the font fails for any reason, you could be in the ultimate worst-case scenario: forever-invisible text on the site.<\/p>\n You don’t have a heck of a lot of control over how @font-face fonts load, unless you take matters into your own hands. That means things like: inlining the font, subsetting the font (either with a “critical” set of glyphs, or at least reducing glyphs to the language in use), using font loaders to determine when the fonts load and altering classes to use them. That last one is particularly interesting. When exerting control over font loading, you not only have to deal with when\/how the browser loads the CSS that contains the @font-face, but also when\/how the browser comes across text elements that are told to use those fonts. Fonts that aren’t used aren’t downloaded. So sometimes the procedure is to force them to download, wait for them to download, then apply classes to actually use them.<\/p>\n Some tools we looked at:<\/p>\n 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 fonts are loaded. As in, […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1283,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"video-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":[592,1107],"acf":[],"jetpack-related-posts":[{"id":3318,"url":"https:\/\/css-tricks.com\/snippets\/css\/using-font-face-in-css\/","url_meta":{"origin":250398,"position":0},"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 "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":253584,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-display\/","url_meta":{"origin":250398,"position":1},"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":18273,"url":"https:\/\/css-tricks.com\/lodge\/v10\/035-preventing-typekit-fout\/","url_meta":{"origin":250398,"position":2},"title":"#035: Preventing Typekit FOUT","date":"September 13, 2012","format":false,"excerpt":"We take a little break from working on search to solve a little niggling issue. \"FOUT\" being \"Flash of Unstyled Text\". This is phenomenon where @font-face fonts take a little bit to load and thus you see the fallback font before the custom font. This is normally not a problem\u2026","rel":"","context":"With 4 comments","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":250398,"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":192724,"url":"https:\/\/css-tricks.com\/snippets\/sass\/simple-asset-helper-functions\/","url_meta":{"origin":250398,"position":4},"title":"Simple Asset Helper Functions","date":"January 9, 2015","format":false,"excerpt":"Dealing with paths is always a bit annoying, you will concede. Fortunately, it is extremely easy with Sass to have a beautiful API to manage assets and to keep the code simple to maintain. The only thing we need is to store the base asset path in a variable, and\u2026","rel":"","context":"With 3 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6602,"url":"https:\/\/css-tricks.com\/snippets\/css\/basics-of-google-font-api\/","url_meta":{"origin":250398,"position":5},"title":"Basics of Google Font API","date":"June 15, 2010","format":false,"excerpt":"Link to CSS files You essentially hotlink directly to CSS files on Google.com. Through URL parameters, you specificity which fonts you want, and what variations of those fonts. ... Idea: You can avoid an extra network request by opening that stylesheet and copy-and-pasting the @font-face stuff into your main stylesheet.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/250398"}],"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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=250398"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/250398\/revisions"}],"predecessor-version":[{"id":251712,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/250398\/revisions\/251712"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=250398"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=250398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n