Poslední dobou se velice často setkávám s weby běžící na WordPressu, které mají problém s českými znaky – špatně se zobrazující ščřž. Nedávno jsem tady umístil návod, jak na opravu. Byl to však všeobecný návod, WordPressu se moc netýkající. Pojďme to tedy napravit.
K uvedenému problému nejčastěji dochází koupením nebo stažením free šablony. Autor pravděpodobně vůbec netuší, že existuje jakými malý státeček uprostřed Evropy, který nad znaky používá háčky a čárky. Proto tento problém vůbec neřeší. Použije většinou základní nastavení Google fontu a o víc se nestará. Jemu se to zobrazuje bez chyb.
Teorie
Google fonty je možné najít zde: http://www.google.com/fonts
V přehršli fontů si vybere každý. Použití je velmi jednoduché a návodné. Kliknutím na ikonu čtverečku 
si zobrazíte přehled jednotlivých písmen, které font podporuje. Pokud font české znaky podporuje, je vyhráno. Stačí kliknout na šipku 
hned vedle. Dostanete se k návodu, jak font aplikovat na svých stránkách.
V kroku prvním vybíráme typ písma. Většinou je již zaškrtnut. Důležitý je krok 2, kdy je potřeba zaškrtnout volbu Latin Extended (latin-ext). Třetí krok ukazuje již kus kódu, který je potřeba vložit do stránek, ať již pomocí standardního linku, nebo pomocí @importu. Praktické použití si ukážeme za chvíli. Poslední čtvrtý bod je již aplikace v CSS.
Praxe
Tolik teorie a nyní se podíváme na samotný WordPress a to, co jste si nainstalovali. WordPress ukládá šablony do adresáře themes, který naleznete v v adresáři wp-content. Jako první potřebujete zjistit, jaký font autor šablony použil. Jak na to? Existují dvě cesty:
- proberete se soubory šablony a najdete zmínku o použitém fontu – pracné zdlouhavé
- do prohlížeče Firefox si nainstalujete doplněk Firebug a na dvě kliknutí zjistíte požadovanou informaci
Já ke své práci používám Firebug dost často. Je to perfektní nástroj na zjišťování případných chyb, ladění webu, atd. Proto následující postup ukáži na něm. Po instalaci se v horní liště prohlížeče usadí „brouček“.
Nyní stačí otevřít svou stránku, kliknout pravým tlačítkem přímo nad problémovým fontem a z kontextové nabídky vybrat Prozkoumat prvek ve Firebugu.
V prohlížeči se otevře okno rozdělené na dvě části. V levé je vidět kód stránky, v pravé pak použité styly.
Nás bude zajímat pravá strana se styly, kde hledáme zmínku o stylu. Kaskádové styly se dědí, tj. je zde zachována hierarchie. Nahoře je zobrazen styl týkající se právě tohoto prvku. Nejníže jsou pak styly týkající se například celého dokumentu. Nás v textu zajímá položka font-family. Nejčastěji ji najdete úplně dole v prvku body. Font-family je rodina písem, které se mají aplikovat na webu. Firefox, oproti jiným prohlížečům, ukazuje přímo písmo, které je použito, ostatní jsou zašedlá.
Nalezené písmo se nyní pokusíme vyhledat v Google Fonts. Pokud máte štěstí, font podporuje české znaky, pokud ne, je potřeba si vybrat jiný obdobný font.
Pokud máme vybráno, ať již upravený font podle popisu výše, nebo zcela nový font, je potřeba jej aplikovat. Ve složce šablony nás zajímá soubor s příponou css. Většinou bývá umístěn v základu šablony a je označen style.css. O který přesně soubor css se jedná však naleznete zase ve Firebugu – v pravé části je u jednotlivých stylů napravo modře napsán název dokumentu a řádek, kde je styl popsán. Když na něj najedete myší, ukáže se celá adresa, která k tomu souboru vede.
Soubor rozklikneme. Definice importu stylu bývá na začátku dokumentu. Pomocí crtl+f prohledejte dokument na výskyt značky @import. V případě nálezu, řádek upravíme podle pokynů v bodě 3 Google Fonts.
Pokud @import nenajdeme, otevřeme si soubor header.php v základním adresáři šablony. Toto je soubor s hlavičkou webu a nalezneme řádek začínající
Malá zrada bývá o rozsáhlých šablon, které si font řeší jinak. V tom případě aplikujte bod 3 z google fonts např. do souboru header a soubor uložte.
Pokud jste font neměnili, zůstal zachován, je vše hotovo a práci si můžete na svých stránkách zkontrolovat. Pokud jste font naprosto změnili, je situace trošku jiná, a je potřeba upravit všechny výskyty, kde se font v souboru css vyskytuje. Hledejte záznamy font nebo font-family.
Pokud si s úpravou nevíte rady, neváhejte mě kontaktovat.
29. 5. 2014 at 19.07
Dobrý den, snažím se podle Vašeho užitečného návodu upravit písmo, ale stále se mi to nedaří. Zakládám si nové stránky a o html kódu toho vím jen málo. Chci také použít šablonu Hemingway jako Vy. Vybrala jsem font, ale mám problém, kam ho vložit na stránkách. V souboru style.css jsem nenašla @import. V souboru header žádný font uvedený není, takže se ani nedá změnit. Když jsem naslepo do header vložila link na písmo, také to (očekávatelně) nefungovalo. Víte, kam bych v této šabloně měla vložit link? Děkuji.
30. 5. 2014 at 5.01
Dobrý den, Katko. Zkuste mi prosím napsat dnes večer na skype (rapanna). Mrkneme se na to spolu.
5. 12. 2014 at 10.31
Jelikož používám také šablonu Hemingway (aha, asi bych si měl pořídit nějakou placenou :-)) osvědčil se mi plugin WP Google Fonts – lze v něm nastavit i sadu Latin Extended.
8. 12. 2014 at 6.30
Určitě plugin je také řešení, ale proč si systém zaplácávat dalšími a dalšími pluginy, když si to můžu vyřešit sám?
7. 8. 2014 at 22.30
Zdravim.
Tiez som sa pokusal zmenit font podla vasho skveleho navodu ale v tejto teme je font robeny inac.
Su tam dve zlozky kde sa nachadza vyskyt fontu:
1. CSS a v nej subor: font-awesome.min.css kde sa nachadzaju linky do druhej zlozky.
2. Fonts a v nej je 5 suborov fontov s koncovkami otf, eot, svg, ttf a woff.
Takze problem je skor zohnat font s tymto koncovkami.
Da sa to nejako vyriesit alebo ani velmi nie?
Tema: OneTone (https://wordpress.org/themes/onetone).
Font: FontAwesome
Font ktory by som chcel pouzit je: Roboto
Vopred Dakujem za radu.
8. 8. 2014 at 4.44
Dobrý den, Honzo. Awesome jsou ikony. Více zde. Jinak jsem se díval na tu šablonu a Vaše fonty jsou definovány přímo ve style.css v root složce šablony. Nahradit je tady za jiný font není problém. Pokud by byl problém, ozvěte se.
1. 9. 2014 at 14.06
Díky za radu – funguje!
8. 10. 2014 at 8.58
Dobrý den,
font jsem si změnil a české znaky jsou v pohodě. Ale když si stránku zobrazím na mobilu (huawei/android), tak ščž zase nefunguje, čím to může být?
Ještě bych se chtěl zeptat na jednu věc: při zobrazení v exploreru a firefoxu jsou fonty hezky vyhlazené, ale v chromu jsou kostrbaté a vyloženě ošklivé.
Díky
Matěj
8. 10. 2014 at 9.08
Dobrý den, je možné že na webu máte zvlášť styl pro mobily. Zkuste se podívat jak je to definováno ve zdrojovém kódu – pravé tlačítko myši, zdrojový kód
Druhý problém jsem na svých webech zaregistroval také, chrome nějak změnil vykreslování. Prozatím se mi nepodařilo zjistit, jak vykreslovat písmo lépe.
8. 10. 2014 at 21.32
Už jsem to našel. Díky 😉
A ty kostrbaté fonty… asi zkusím pár různých fontů a uvidím, co bude na chromu nejlepší.
27. 2. 2015 at 23.50
Děkuji! =)
4. 4. 2015 at 11.50
Dobrý den,
mám jeden problém. Na Win s Chromem mi font funguje, ale na mac/Safari se změny nezobrazuji. Nevíte, kde může být problém?
Šablona: Themify Base
Font: Arimo (nastaven přes uživatelské rozhraní/přizpůsobit)
V kódu upraveno z sans-serif na sans-serif&subset=latin-ext.
Děkuji.
3. 7. 2015 at 20.43
Dobrý den, mám problém se zobrazením fontu v ios, na androidu bez problému nevíte čím to může být díky za info
18. 7. 2016 at 13.12
Díky za perfektní článek. Moc mi pomohl.
🙂
15. 4. 2017 at 0.35
ok ale i vy tu máte problém se zobrazováním znaků pod EDGE, to je brutální zrada ostatní prohlížeče fungujou ok, ale edge nikoliv: je to velká bolest pro webaře