Ke článku o 0 Rh- mi pan A. P. napsal komentář o divném chování fontu nadpisu. Že totiž nula vypadá jako malé o:

Je to chování na iOS a ve Windows, takže to já s Androidem a Linuxem nezaznamenal, zato už nějakou dobu pozoruji, že na Linuxu font sice diakritiku umí, ale špatně. Vykresluje ji větší, všimněte si písmen ř, ě a č:

Zkrátka, nejvyšší čas font upravit. Definici jsem sice pro blog zvolil podle – tehdy aktuálního – doporučení od největšího experta na CSS Pixyho, ale od roku 2003 už přece jen nějaký čas uplynul, že.

Georgia ve Windows a iOS existuje stále, ale ta čísla jsou vážně divná, podívejte se na Wikipedii.

Na Google fonts je kolekce fontů zdarma a s dostatečně otevřenými licencemi (viz faq). Nechci žádnou radikální změnu, hledal jsem tedy font co možná nejpodobnější; protože nejsem první, našel jsem odpověď na Quora.

Nejpodobnější prý je font Tinos – a opravdu, když jsem si přepnutý web porovnával po korekci velikosti písma, všiml jsem si snad jen toho, že Tinos je štíhlejší.

Co se týče zapojení fontu, řídil jsem se článkem o zrychlení webu od Lukáše Ptoška. Tedy uložení fontu na svém webu, vygenerování odkazů (a balíčku fontů ke stažení) pomocí google-webfonts-helperu a zapojení výsledků do CSS:

/* tinos-regular - latin_latin-ext */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Tinos';
font-style: normal;
font-weight: 400;
src: url('../fonts/tinos-v24-latin_latin-ext-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('../fonts/tinos-v24-latin_latin-ext-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}


/* tinos-italic - latin_latin-ext */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Tinos';
font-style: italic;
font-weight: 400;
src: url('../fonts/tinos-v24-latin_latin-ext-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('../fonts/tinos-v24-latin_latin-ext-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}


/* tinos-700 - latin_latin-ext */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Tinos';
font-style: normal;
font-weight: 700;
src: url('../fonts/tinos-v24-latin_latin-ext-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('../fonts/tinos-v24-latin_latin-ext-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}


/* tinos-700italic - latin_latin-ext */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Tinos';
font-style: italic;
font-weight: 700;
src: url('../fonts/tinos-v24-latin_latin-ext-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('../fonts/tinos-v24-latin_latin-ext-700italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

A pak samozřejmě ten preload, o kterém psal Lukáš Ptošek. Do šablony pro jednotlivé stránky, před definici načítající CSS jsem přidal preload WOFF2 verze fontů:

<link rel="preload" as="font" type="font/woff2" href="/fonts/tinos-v24-latin_latin-ext-regular.woff2" crossorigin="crossorigin" />
<link rel="preload" as="font" type="font/woff2" href="/fonts/tinos-v24-latin_latin-ext-italic.woff2" crossorigin="crossorigin" />
<link rel="preload" as="font" type="font/woff2" href="/fonts/tinos-v24-latin_latin-ext-700.woff2" crossorigin="crossorigin" />
<link rel="preload" as="font" type="font/woff2" href="/fonts/tinos-v24-latin_latin-ext-700italic.woff2" crossorigin="crossorigin" />