{"id":4287,"date":"2017-10-31T18:38:17","date_gmt":"2017-10-31T17:38:17","guid":{"rendered":"https:\/\/florianbrinkmann.com\/en\/?p=4287"},"modified":"2020-02-09T10:59:41","modified_gmt":"2020-02-09T09:59:41","slug":"typekit-dynamic-subsetting","status":"publish","type":"post","link":"https:\/\/florianbrinkmann.com\/en\/typekit-dynamic-subsetting-4287\/","title":{"rendered":"Use dynamic subsetting in Typekit"},"content":{"rendered":"<p>Typekit provides a large library of fonts for easy use in web and offline sync. If using a font as a web font, the font size should \u2013 obviously \u2013 be as small as possible, and Typekit is providing the Dynamic Subsetting feature since 2015, which is a useful tool for keeping the size small.<\/p>\n\n\n\n<!--more-->\n\n\n\n<div class=\"update-box\">\n<p><strong>Update from November 6, 2017:<\/strong> <a href=\"https:\/\/twitter.com\/HeikoMamerow\/\">Heiko Mamerow<\/a> ran a short test with Dynamic Subsetting and noticed, that his site made more requests and was a little bigger:<\/p>\n<p>https:\/\/twitter.com\/HeikoMamerow\/status\/925442356261933058<\/p>\n<p>After that, I compared it on my site too and got a slightly heavier site for one of the two tested views as well. Because of that, I switched back to the CSS variant \u2013 <strong>Dynamic subsetting is not better in every case<\/strong>.<\/p>\n<\/div>\n\n\n\n<p>With Dynamic Subsetting, only the characters that are used on the current page are loaded from Typekit \u2013 that can reduce the file size of the fonts drastically. Typekit introduces this feature with the announcement of <a href=\"https:\/\/blog.typekit.com\/2015\/06\/15\/announcing-east-asian-web-font-support\/\">support for Chinese, Japanese, and Korean fonts<\/a>, because these fonts are very large (multiple megabytes).<\/p>\n\n\n\n<figure class=\"wp-block-image alignnone size-full wp-image-4288\"><noscript><img decoding=\"async\" width=\"1075\" height=\"391\" src=\"https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/10\/typekit-dynamic-subsetting.png\" alt class=\"wp-image-4288\" srcset=\"https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/10\/typekit-dynamic-subsetting.png 1075w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/10\/typekit-dynamic-subsetting-550x200.png 550w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/10\/typekit-dynamic-subsetting-300x109.png 300w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/10\/typekit-dynamic-subsetting-768x279.png 768w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/10\/typekit-dynamic-subsetting-806x293.png 806w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/10\/typekit-dynamic-subsetting-600x218.png 600w\" sizes=\"(max-width: 1075px) 100vw, 1075px\"><\/noscript><img decoding=\"async\" width=\"1075\" height=\"391\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201075%20391%22%3E%3C%2Fsvg%3E\" alt class=\"wp-image-4288 lazyload\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201075%20391%22%3E%3C%2Fsvg%3E 1075w\" sizes=\"(max-width: 1075px) 100vw, 1075px\" data-srcset=\"https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/10\/typekit-dynamic-subsetting.png 1075w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/10\/typekit-dynamic-subsetting-550x200.png 550w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/10\/typekit-dynamic-subsetting-300x109.png 300w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/10\/typekit-dynamic-subsetting-768x279.png 768w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/10\/typekit-dynamic-subsetting-806x293.png 806w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/10\/typekit-dynamic-subsetting-600x218.png 600w\" data-src=\"https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/10\/typekit-dynamic-subsetting.png\"><figcaption>Detail view of the kit for this site with the option for dynamic subsetting (\u00bbDynamisches teilweises Laden\u00ab, the German term for that).<\/figcaption><\/figure>\n\n\n\n<p>This option is not available by default for all kits. To activate it, you have to add a font which supports Chinese, Japanese, or Korean \u2013 for example, <a href=\"https:\/\/typekit.com\/fonts\/source-han-sans-japanese\">Source Han Sans Japanese<\/a>. You will be asked if you want to convert the kit to a dynamic kit and get the new option after doing this, as shown in the screenshot.<\/p>\n\n\n\n<p>Now you can remove the Source Han Sans font again and enable the option for the font(s) in the kit.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Typekit provides a large library of fonts for easy use in web and offline sync. If using a font as a web font, the font size should \u2013 obviously \u2013 be as small as possible, and Typekit is providing the Dynamic Subsetting feature since 2015, which is a useful tool for keeping the size small.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wpf_show_in_dewp_planet_feed":false,"flobn_post_versions":"","webmentions_disabled_pings":false,"webmentions_disabled":false,"lazy_load_responsive_images_disabled":false,"footnotes":""},"categories":[3],"tags":[],"class_list":["post-4287","post","type-post","status-publish","format-standard","hentry","category-tips"],"wp-worthy-pixel":{"ignored":false,"public":null,"server":null,"url":null},"wp-worthy-type":"normal","_links":{"self":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/4287","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/comments?post=4287"}],"version-history":[{"count":5,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/4287\/revisions"}],"predecessor-version":[{"id":5836,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/4287\/revisions\/5836"}],"wp:attachment":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/media?parent=4287"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/categories?post=4287"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/tags?post=4287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}