Slide 1

Slide 1 text

Optimalizace webových fontů @[email protected] #webperf

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

/ˈhækə(r)/ a person who uses or writes computer programs with enthusiasm and skill /ˈstjuːdiəʊ/ a room where an artist works

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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); };

Slide 7

Slide 7 text

Webové fonty • Řeší problém distribuce • Optimalizace velikosti • Komprese (gzip - woff, brotli - woff2) • Subsetting

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

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 }

Slide 10

Slide 10 text

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 }

Slide 11

Slide 11 text

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 }

Slide 12

Slide 12 text

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 }

Slide 13

Slide 13 text

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 }

Slide 14

Slide 14 text

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 }

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

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/

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Subsetting pyftsubset Iosevka-Regular.ttf \ --output-file=iosevka-regular.latin.woff2 \ --flavor=woff2 \ --layout-features='*' \ --unicodes=…

Slide 19

Slide 19 text

Moderní font stacky • system-ui • 🔜 ui-serif, ui-sans-serif, ui-monospace, ui-rounded • https://modernfontstacks.com/

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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; }