Vytisknout
Internet a tvorba webu
Zobrazeno: 10140

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.

Joomla SEF URLs by Artio