Diagnostika - Zajistěte, aby text při načítání webfontů zůstal viditelný
Pomocí funkce font-display stylů CSS zajistěte, aby byl text při načítání webfontů viditelný uživatelům. Další informace."Další informace" odkazují na článek Controlling Font Performance with font-display, podle kterého je třeba doplnit do definice písma přístup k vykreslení
@font-face {font-display: fallback; ... }Prosté? Ne tak moc, když importujete, a chcete importovat, webová písma přímo od Googlu. Jako třeba
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700&subset=latin-ext');Je tu takový drobný paradox, jak poznamenávají v článku Google Fonts and font-display s osvětlením situace dalšími užitečnými tipy:
Google Developers suggests using Lighthouse -> Lighthouse warns about not using font-display on loading fonts -> Web page uses Google Fonts the way it's suggested on Google Fonts -> Google Fonts doesn't supports font-display -> Facepalm.Jednoho by z toho...
Ale zpět k projektu. Máme tu {less}, Grunt (zatím ještě) a Node (samozřejmě). Importované definice se do výsledného stylu vloží celé. Někdo přeci musel už připravit nějaký plugin... Dva dny jsem (mimo jiné práce) hledal, ale nenalézal. Našel jsem a vyzkoušel nějaké jiné pluginy, ale bez úspěchu.
A pak najednou na mě vyskočí přesně to, co hledám od začátku: dkrnl/postcss-font-display. Tento PostCSS plugin vloží do všech definic @font-face ve style kýžený parametr font-display. Hotovo. Uff :-)
