Marek Olšavský: blog

Nedávno napsal Ondřej Ilinčev pěkný článek o správné volbě písma na webu, která výrazně ovlivňuje čitelnost webů a následně i prodej služeb, či zboží. Nesprávná volba fontu může znamenat i volbu fontu, který nemá českou variantu, což působí rušivě a ve výsledku zákazník třeba nenakoupí, protože jej texty „tahají za oči“.

Před několika lety jsem se sám spálil, nasadil jsem šablonu, upravil si barvy, nějaké detaily rozložení a nechal jsem web být. Reakce přišla záhy, kolega mi napsal, že se to „nedá číst“, zpozorněl jsem a ačkoliv jsem se dříve zajímal o typografii, volba fontu mi naprosto unikla. Ponechal jsem font bez podpory češtiny, tudíž písmena s nabodeníčky byla z jiného fontu.

Toto je ukázka toho, co zákazník nesmí dostat. I kdyby si toho nevšiml on, tak pro návštěvníky webu to může být jeden z důvodů, proč jít ke konkurenci.

Pro vysvětlení jsem si vybral základní a velmi povedenou šablonu Twenty Seventeen, která již není čistě blogová a dá se z ní udělat i velmi pěkný web pro firemního klienta. U ostatních šablon používám stejný postup. Samozřejmě že veškerá práce by se měla dělat na odvozené šabloně (child theme), aby nebyla znemožněna aktualizace.

Nepreferuji použití pluginu pro každou maličkost. Podle mého názoru znamená každý další zásuvný modul malé zpomalení WordPressu a pokud jich je moc, tak se bude WP chovat pomalu.

Téma Twenty Seventeen používá font Libre Franklin, který se nemusí líbit každému. Mě se lépe čte Open Sans, ale je to volba designera.

Změna fontu pluginem

Pro základní šablonu Twenty Seventeen existuje hezký plugin Customize Twenty Seventeen, který toho nabídne trochu více, než jen změnu fontu.

Pokud nechcete dělat vlastní odvozené téma a vystačíte si jen s úpravami umožněnými WordPressem, tak je to dobré volba.

Změna fontu vlastním kódem

Jedna z cest je přidat do souboru header.php link pro stažení fontu do prohlížeče: <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i&subset=latin-ext" rel="stylesheet">. Snadná cesta, má „ale“, objasněné no konci této kapitolky.

Další cestou pro přidání fontu stačí zaregistrovat takovouto funkci:

function mytheme_add_google_fonts() {
  wp_enqueue_style(
    'mytheme-google-fonts',
    'https://fonts.googleapis.com/css?family=Open+Sans:400,400i&subset=latin-ext',
    false
  ); 
}
add_action( 'wp_enqueue_scripts', 'mytheme_add_google_fonts' );

Pohled do vygenerované stránky napoví, že font byl prohlížečem stažen. Zbývá jej tedy použít (krátce ve style.css):

html {
  font-family: 'Open Sans', sans-serif !important;
}

body,
button,
input,
select,
textarea {
  color: #333;
  font-family: "Open Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 16px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

V CSS nastavuji i „failover“ s generickým bezpatkovým fontem a přidávám !important proti přepisu od dalšího stylu v kaskádě.

A máme téměř hotovo. Zapoměli jsme na jedinou věc, odebrat původně stahovaný font. Návštěvníkovi webu by se zbytečně načítalo i nepoužívané písmo, musel by čekat delší dobu a možná mu plýtváme mobilní data.

K odebrání výchozího fontu šablony stačí krátký sniplet, kterému je nutné nastavit vyšší prioritu (v tomto případě 20) než má výchozí volání (10):

function scfq_deq_fonts_scripts() {
    wp_dequeue_style('twentyseventeen-fonts');
}
add_action( 'wp_enqueue_scripts', 'scfq_deq_fonts_scripts', 20 );

Pokud vyjdeme z toho, že první natažené functions.php jsou ty z odvozeného tématu a že se definice nepřepisují, stačí jen velmi malá úprava, ve které se přepíšeme defaultní font a rodičovské téma takovou definici znovu nepřepisuje.

function scfq_fonts_scripts() {
    wp_enqueue_style(
        'twentyseventeen-fonts',
        'https://fonts.googleapis.com/css?family=Open+Sans:300,300i&subset=latin-ext',
        array(),
        null
    );
}
add_action( 'wp_enqueue_scripts', 'scfq_fonts_scripts' );

A co tisk?

Tiskárny mají mnohem jemnější rastr, než monitor, byť se moderní technologie displejů (Retina od Apple) přibližují. Při jemném rastru již není problém s čitelností patkových písem. Za sebe přiznávám, že se mi patkový font na papíře čte lépe, patky „vytváří linku a vedou oči po řádku“.

Pokud nestačí generický Times New Roman, jež se velmi dobře čte, tak je potřebné připojení dalšího fontu. WP nabízí funkci wp_is_mobile(), jež detekuje mobilní zařízení, podle níž se dá poznat, jestli má význam stahovat tiskové styly a patřičné fonty při načítání stránky. Má to „ale“; tablet se detekuje jako počítač, nikoliv jako mobilní zařízení.