Optimalizace webových fontů

## Odkazy

https://www.rarous.net/weblog/2008/06/05/zvyste-vykon-vaseho-webu
https://youtu.be/Ue-VygGkn-A
https://web.archive.org/web/20070404214111/http://www.dgx.cz/tools/fonts/
https://mikeindustries.com/blog/sifr
https://v-fonts.com/
https://www.rarous.net/weblog/2024/02/27/optimalizace-fontu
https://modernfontstacks.com/

Transcript

1. Optimalizace webových fontů @alesroubicek@indieweb.social #webperf
3. /ˈhækə(r)/ a person who uses or writes computer programs with enthusiasm and skill /ˈstjuːdiəʊ/ a room where an artist works
4. Kdo jsem • Weby dělám 25 let • Bloguju 20 let • Zkušenosti z Atlas.cz, startupů i korporátů • Web Performance se věnuji dlouho a soustavně • https://www.rarous.net/weblog/2008/06/05/zvyste- vykon-vaseho-webu • https://youtu.be/Ue-VygGkn-A
5. Zpátky do minulosti • Bezpečné font stacky • https://web.archive.org/web/20070404214111/http://www.dgx.cz/tools/fonts/ • Nápisy v obrázcích • sIFR • https://mikeindustries.com/blog/sifr
6. sIFR if(typeof sIFR == "function"){ // This is the preferred "named argument" syntax sIFR.replaceElement(named({sSelector:"body h1", sFlashSrc:"vandenkeere.swf", sColor:"#000000", sLinkColor:"#000000", sBgColor:"#FFFFFF", sHoverColor:"#CCCCCC", nPaddingTop:20, nPaddingBottom:20 sFlashVars:"textalign=center&offsetTop=6"})); // This is the older, ordered syntax sIFR.replaceElement("h5#pullquote", "vandenkeere.swf", "#000000", "#000000", "#FFFFFF", "#FFFFFF", 0, 0, 0, 0); sIFR.replaceElement("h2", "tradegothic.swf", "#000000", null, null, null, 0, 0, 0, 0); sIFR.replaceElement("h4.subhead", "tradegothic.swf", "#660000", null, null, null, 0, 0, 0, 0); sIFR.replaceElement("h3.sidebox","tradegothic.swf","#000000", "#000000", "#DCDCDC", "#DCDCDC", 0, 0, 0, null); sIFR.replaceElement("h3", "tradegothic.swf", "#000000", null, null, null, 0, 0, 0, 0, null); };
7. Webové fonty • Řeší problém distribuce • Optimalizace velikosti • Komprese (gzip - woff, brotli - woff2) • Subsetting
9. Webové fonty @font-face { font-family: "IBM Plex Sans Var"; font-style: italic; font-display: swap; src: local("IBM Plex Sans Var Italic"), local("IBMPlexSansVar-Italic"), url("/assets/css/IBMPlexSansVar-Italic-Latin1-5cb3a21093.woff2") format("woff2"); unicode-range: U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2 014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044 ,U+20AC,U+2122,U+2212,U+FB01-FB02 }
10. Webové fonty @font-face { font-family: "IBM Plex Sans Var"; font-style: italic; font-display: swap; src: local("IBM Plex Sans Var Italic"), local("IBMPlexSansVar-Italic"), url("/assets/css/IBMPlexSansVar-Italic-Latin1-5cb3a21093.woff2") format("woff2"); unicode-range: U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2 014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044 ,U+20AC,U+2122,U+2212,U+FB01-FB02 }
11. Webové fonty @font-face { font-family: "IBM Plex Sans Var"; font-style: italic; font-display: swap; src: local("IBM Plex Sans Var Italic"), local("IBMPlexSansVar-Italic"), url("/assets/css/IBMPlexSansVar-Italic-Latin1-5cb3a21093.woff2") format("woff2"); unicode-range: U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2 014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044 ,U+20AC,U+2122,U+2212,U+FB01-FB02 }
12. Webové fonty @font-face { font-family: "IBM Plex Sans Var"; font-style: italic; font-display: swap; src: local("IBM Plex Sans Var Italic"), local("IBMPlexSansVar-Italic"), url("/assets/css/IBMPlexSansVar-Italic-Latin1-5cb3a21093.woff2") format("woff2"); unicode-range: U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2 014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044 ,U+20AC,U+2122,U+2212,U+FB01-FB02 }
13. Webové fonty @font-face { font-family: "IBM Plex Sans Var"; font-style: italic; font-display: swap; src: local("IBM Plex Sans Var Italic"), local("IBMPlexSansVar-Italic"), url("/assets/css/IBMPlexSansVar-Italic- Latin1-5cb3a21093.woff2") format("woff2"); unicode-range: U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2 014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044 ,U+20AC,U+2122,U+2212,U+FB01-FB02 }
14. Webové fonty @font-face { font-family: "IBM Plex Sans Var"; font-style: italic; font-display: swap; src: local("IBM Plex Sans Var Italic"), local("IBMPlexSansVar-Italic"), url("/assets/css/IBMPlexSansVar-Italic-Latin1-5cb3a21093.woff2") format("woff2"); unicode-range: U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02 DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2 022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122,U+2 212,U+FB01-FB02 }
16. Variabilní fonty • Řezy jsou řešeny pomocí vektorových os ✅ • ➡ méně souborů • Často distribuované jako TTF v plném unicode ⛔ • https://v-fonts.com/
17. Subsetting • Výběr sub-setu znaků z fontu • Možnost rozložit font do vrstev, které se načítají podle potřeby • Možnost vybrat si jen konkrétní znaky, třeba pro logo • https://www.rarous.net/weblog/2024/02/27/ optimalizace-fontu
18. Subsetting pyftsubset Iosevka-Regular.ttf \ --output-file=iosevka-regular.latin.woff2 \ --flavor=woff2 \ --layout-features='*' \ --unicodes=…
19. Moderní font stacky • system-ui • 🔜 ui-serif, ui-sans-serif, ui-monospace, ui-rounded • https://modernfontstacks.com/
20. Tipy na závěr • Nepoužívejte custom fonty • Když je musíte používat používejte variable fonty • Hostujte si fonty sami (v CDN) a optimalizujte je
21. Tipy na závěr body { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-rendering: geometricPrecision; font-kerning: normal; }