{"id":4035,"date":"2020-01-22T10:00:38","date_gmt":"2020-01-22T10:00:38","guid":{"rendered":"http:\/\/vakgroep.cmd.hr.nl\/algemeen\/inspiratie\/?p=4035"},"modified":"2020-01-22T10:00:38","modified_gmt":"2020-01-22T10:00:38","slug":"preloading-fonts-when-does-it-make-sense","status":"publish","type":"post","link":"https:\/\/vakgroep.cmd.hr.nl\/algemeen\/inspiratie\/2020\/01\/22\/preloading-fonts-when-does-it-make-sense\/","title":{"rendered":"PRELOADING FONTS: WHEN DOES IT MAKE SENSE?"},"content":{"rendered":"

https:\/\/betterwebtype.com\/articles\/2019\/11\/02\/preloading-fonts-when-does-it-make-sense\/?utm_source=Better+Web+Type&utm_campaign=191aa8129f-EMAIL_CAMPAIGN_2019_11_18-BWT-NEWS-NC_COPY_01&utm_medium=email&utm_term=0_b76a5d78ca-191aa8129f-1210061005&mc_cid=191aa8129f&mc_eid=aac30bb19a<\/a><\/p>\n

\"\"<\/p>\n

FONT-DISPLAY: SWAP<\/strong>
\nPros
\nThe website becomes readable pretty much immediately
\nImproved perceived performance
\nCons
\nThe jarring transition from the fallback to the custom font (nasty FOUT)
\nCan take a while to load the custom font<\/p>\n

FONT-DISPLAY:BLOCK<\/strong>
\nPros
\nNo jarring transition from the fallback to the custom font (nasty FOUT), the text is hidden, the browser starts rendering the website regardless of the custom font being loaded or not
\nCons
\nThe website isn\u2019t readable for a longer time (especially on mobile devices)
\nIt\u2019s pretty much a different way of achieving FOIT (flash of invisible text)
\nCan take a while to load the custom font
\nPossible negative impact on perceived performance<\/p>\n

FONT PRELOADING<\/strong>
\nPros
\nNo jarring transition from the fallback to the custom font (nasty FOUT), the browser starts rendering the website once the custom font is loaded
\nShorter time to load the custom font
\nThe website becomes readable sooner (than the block option)
\nCons
\nCan have an impact on perceived performance<\/p>\n

So there you have it, I hope this helps you with choosing a good custom font loading approach for your next project. Cheers! ?<\/p>\n","protected":false},"excerpt":{"rendered":"https:\/\/betterwebtype.com\/articles\/2019\/11\/02\/preloading-fonts-when-does-it-make-sense\/?utm_source=Better+Web+Type&utm_campaign=191aa8129f-EMAIL_CAMPAIGN_2019_11_18-BWT-NEWS-NC_COPY_01&utm_medium=email&utm_term=0_b76a5d78ca-191aa8129f-1210061005&mc_cid=191aa8129f&mc_eid=aac30bb19a FONT-DISPLAY: SWAP Pros The website becomes readable pretty much immediately Improved perceived performance Cons The jarring transition from the fallback to the \n [...]<\/a>","protected":false},"author":1,"featured_media":4036,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[14,208],"class_list":["post-4035","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-typografie","tag-letterontwerp","tag-webfonts"],"_links":{"self":[{"href":"https:\/\/vakgroep.cmd.hr.nl\/algemeen\/inspiratie\/wp-json\/wp\/v2\/posts\/4035","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vakgroep.cmd.hr.nl\/algemeen\/inspiratie\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vakgroep.cmd.hr.nl\/algemeen\/inspiratie\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vakgroep.cmd.hr.nl\/algemeen\/inspiratie\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vakgroep.cmd.hr.nl\/algemeen\/inspiratie\/wp-json\/wp\/v2\/comments?post=4035"}],"version-history":[{"count":1,"href":"https:\/\/vakgroep.cmd.hr.nl\/algemeen\/inspiratie\/wp-json\/wp\/v2\/posts\/4035\/revisions"}],"predecessor-version":[{"id":4038,"href":"https:\/\/vakgroep.cmd.hr.nl\/algemeen\/inspiratie\/wp-json\/wp\/v2\/posts\/4035\/revisions\/4038"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vakgroep.cmd.hr.nl\/algemeen\/inspiratie\/wp-json\/wp\/v2\/media\/4036"}],"wp:attachment":[{"href":"https:\/\/vakgroep.cmd.hr.nl\/algemeen\/inspiratie\/wp-json\/wp\/v2\/media?parent=4035"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vakgroep.cmd.hr.nl\/algemeen\/inspiratie\/wp-json\/wp\/v2\/categories?post=4035"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vakgroep.cmd.hr.nl\/algemeen\/inspiratie\/wp-json\/wp\/v2\/tags?post=4035"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}