elegant-themes-a-google-fontsPři úpravách stránek o filmových novinkách FilmFan.cz jsme se stále potýkali s problémem nekorektního zobrazování některých českých znaků v šabloně od Elegant Themes. Nakonec se nám to povedlo a je to poměrně jednoduché řešení, pokud víte co změnit. Abych ostatním ušetřil čas, sepsal jsem návod jak na to.

Na stránkách je použitá šablona Aggregate od Elegant Themes, která má poměrně sofistikované nastavení a možnost volby z mnoha fontů. Je možné vybrat jiný font pro Header, tedy titulky a pro text jako takový. K zobrazení se používá Google Web Fonty, které umožňují použít hezké fonty a nejen nějaké základní. Tato řešení má ale jeden zádrhel, ne všechny Google fonty umí češtinu. Druhým zádrhelem je to, že zahraniční tvůrce šablon s češtinou a vůbec neanglickými znaky ani nepočítá. Takže i když mezi nabízenými fonty jsou 3, které by češtinu měli umět, tak se ani po jejich výběr správně znaky nezobrazují. Projeví se to tak, že se doplní z Arialu nebo jiného základního fontu s jinou velikostí a vzhledem. Důvodem je to, že v šabloně se používá základní znaková sada a nikoliv rozšířená, tedy s podporou češtiny.

Celý problém zobrazení Google web fontů v češtině se tak rozdělil na 3 body:

  1. Jak zjistit, které z Goole fontů umí česky 
  2. Jak přidat font, který není v šabloně ve výběru, ale umí česky
  3. Jak změnit šablonu, aby se české fonty správně zobrazovali

Jak zjistit, které z Goole fontů umí česky

Na stránce Google Web Fonts zadejte ve výběru Script volbu Latin Extended a pro otestování českých znaků vložte český text. Ideální je použít známou testovací větu: "Příliš žluťoučký kůň úpěl ďábelské ódy". V případě že si chcete ověřit, zda vybraný font z šablony umí češtinu, po tomto nastavení začněte zadávat do Search jméno fontu. Pokud není žádný výsledek, znamená to, že font rozšířenou latinku neumí a češtinu s ním nelze použít.

Google-Web-Fonts-cestina
Ukázka stránky Google Web Fonts s nastavením pro češtinu

Jak přidat font, který není v šabloně ve výběru, ale umí česky

V šabloně je na výběr jen omezené množství Google fontů, jsou to ty, které se líbily tvůrcům šablony, protože zapadaly do designu. Neznamená to ale, že nemůžete přidat další. Pro různé šablony od Elegant Themes se to zde bude maličko různit. Nicméně v adresáři s šablonou je složka epanel v ní najdete soubor options_aggregate.php (zde se bude název lišit pro jinou šablonu to bude options_nazevsablony.php). Uvnitř tohoto souboru najdete nastavení proměnné $et_google_fonts, konkrétně v Aggregates šabloně to vypadá takto:

$et_google_fonts = apply_filters( 'et_google_fonts', array('Kreon','Droid Sans','Droid Serif','Lobster','Yanone Kaffeesatz','Nobile','Crimson Text','Arvo','Tangerine','Cuprum','Cantarell','Philosopher','Josefin Sans','Dancing Script','Raleway','Bentham','Goudy Bookletter 1911','Quattrocento','Ubuntu') );

Stačí tedy do seznamu přidat názvy fontů, tak jak je najdete v Google Fonts, uložit a načíst znovu stránku s nastavením šablony v administraci. Přidané fonty se zobrazí v seznamu. Stačí ho pouze vybrat a nic víc není třeba nastavovat.

Jak změnit šablonu, aby se české fonty správně zobrazovali

Na závěr to nejdůležitější, do šablony musíme přidat parametr pro použití latin extended, jinak se bude i font s českými znaky tvářit, že česky neumí. Podstatné je přidat parametr &subset=latin-ext pro HTML respektive &subset=latin-ext pro XHTML.

Vnořený kód pro použití Google Web Fontů vypadá například takto (bez českých znaků):

http://fonts.googleapis.com/css?family=Titillium+Web

S využitím rozšířené znakové sady a tedy i češtinou:

http://fonts.googleapis.com/css?family=Titillium+Web&subset=latin-ext

Ideálně hledejte v šabloně textový výskyt "http://fonts.googleapis.com", v Agrreagate šabloně je to v souborech header.php a functions.php. V headeru je změna nebyla nutná také protože fonty Droid Sans a Kreon také česky neumí. V souboru functions.php, bylo potřeba upravit kód na dvou místech

Změna pro šablonu Aggreagate ve functions.php

Původní

if ( $et_header_font <> '' ) {
$font_style .= "<link id='" . esc_attr($et_header_font_id) . "' href='" . esc_url( "http://fonts.googleapis.com/css?family=" . str_replace( ' ', '+', $et_header_font ) . ( 'Raleway' == $et_header_font ? ':100' : '' ) ) . "' rel='stylesheet' type='text/css' />";
$font_family = "font-family: '" . str_replace( '+', ' ', $et_header_font ) . "', Arial, sans-serif !important; ";
}

Změnit na

if ( $et_header_font <> '' ) {
$font_style .= "<link id='" . esc_attr($et_header_font_id) . "' href='" . esc_url( "http://fonts.googleapis.com/css?family=" . str_replace( ' ', '+', $et_header_font ) ."&amp;subset=latin-ext"  . ( 'Raleway' == $et_header_font ? ':100' : '' ) ) . "' rel='stylesheet' type='text/css' />";
$font_family = "font-family: '" . str_replace( '+', ' ', $et_header_font ) . "', Arial, sans-serif !important; ";
}

A podobně pak pro body font

Původní

if ( $et_body_font <> '' ) {
$font_style .= "<link id='" . esc_attr($et_body_font_id) . "' href='" . esc_url( "http://fonts.googleapis.com/css?family=" . str_replace( ' ', '+', $et_body_font ) . ( 'Raleway' == $et_body_font ? ':100' : '' ) ) . "' rel='stylesheet' type='text/css' />";
$font_family = "font-family: '" . str_replace( '+', ' ', $et_body_font) . "', Arial, sans-serif !important; ";
}

Změnit na

if ( $et_body_font <> '' ) {
$font_style .= "<link id='" . esc_attr($et_body_font_id) . "' href='" . esc_url( "http://fonts.googleapis.com/css?family=" . str_replace( ' ', '+', $et_body_font ) ."&amp;subset=latin-ext". ( 'Raleway' == $et_body_font ? ':100' : '' ) ) . "' rel='stylesheet' type='text/css' />";
$font_family = "font-family: '" . str_replace( '+', ' ', $et_body_font) . "', Arial, sans-serif !important; ";
}

Změna pro šablonu Aggreagate v header.php

V header.php je třeba změnit fonty na nějké co umí česky a přidat rozšíření Latin Extended. My jsme vybrali fonty Average Sans a Bitter. Pokud má font v názvu mezeru, do kódu se místo mezery dává +.

Před změnou

<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Kreon:light,regular' rel='stylesheet' type='text/css'/>

Po změně

<link href='http://fonts.googleapis.com/css?family=Average+Sans:regular,bold&#038;subset=latin-ext' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Bitter:light,regular&#038;subset=latin-ext' rel='stylesheet' type='text/css'/>

Tím je změna hotová a češtině by se měla začít korektně zobrazovat.

Komentáře   

MOnty70
0 #1 MOnty70 2013-09-27 18:26
Podobný problém se ěablonou od Elegantheme jsem řešil přímo v menu wordpessu:

Vzhled - šablony - (u aktivní šablony) přizpůsobit - font - Header font.
Tam jsem vybral font který podporuje češtinu.
Stanislav Duben
0 #2 Stanislav Duben 2013-09-29 18:34
Monty díky za komentář. Naštěstí u novějších šablon už to takhle jde. U Starších byl omezený výběr fontů a navíc ještě neměli správně nastavenou podporu pro rozšířenou znakovou sadu.
Luke
0 #3 Luke 2013-12-05 08:21
Pěkný návod. Jen nevím, zda jsem to správně pochopil. Protože např. uváděný font ve vašich příkladech "Raleway" právě český není. Nebo je možné ho někde sehnat?
Stanislav Duben
0 #4 Stanislav Duben 2013-12-05 09:05
Luke: Ano Raleway český není, proto ho v příkladu nahrazujeme jiným, který české znaky má. Asi jste se překouknul při čtení a zaměnil kód před změnou a po změně.
Stanislav Duben
0 #5 Stanislav Duben 2013-12-05 09:15
Luke: Při hledání fontu je dobré hledat rovnou podle toho zda mají extended latin, nebo unicode. Tím se dá vyhnout vybírání z fotnů, které nakonec nelze použít.
Alena
0 #6 Alena 2014-01-07 21:43
Dobrý den,
můžete poradit kam mám v tomto kódu:

wp_register_style('pw_google_font', 'http://fonts.g oogleapis.com/c ss?family='.str _replace(" ", "+", implode("|", $pw_google_fonts)));

přidat "&subset=la tin-ext" ?
Stanislav Duben
0 #7 Stanislav Duben 2014-01-07 21:58
Dobrý den Aleno, pokud se nemýlím mělo by to být takto:

wp_register_style('pw_google_font', 'http://fonts.g oogleapis.com/c ss?family='.str _replace(" ", "+", implode("|", $pw_google_font s)).'&subset=la tin-ext');
BegOkon
0 #8 BegOkon 2015-03-26 06:41
Mám tuto stránku už ve svých záložkách. Co jsem se natrápil s těmi fonty. Nějak jsme to slepil podle googlu, ale tady je to všechno pohromadě a pěkně vysvětleno. Díky.
Martin Jurča
0 #9 Martin Jurča 2016-09-06 20:05
Díky za článek! Ušetřil mi spoustu času a nervů.

Přehazoval jsem písma v adminu i v CSS a divil se, proč to sakra nejde česky, když to na Google s háčkama a čárkama je.

Už to konečně chápu.

Přidat komentář


Bezpečnostní kód
Obnovit