Timesoft

Osobní stránky webkonzultanta

Český google font pro wordpress

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 ctverecek si zobrazíte přehled jednotlivých písmen, které font podporuje. Pokud font české znaky podporuje, je vyhráno. Stačí kliknout na šipku sipkahned 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“.

firebug3

 

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.

firebug

 

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.

firebug2

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í

<link href=’http://fonts.googleapis.com/…

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.

Líbil se vám článek? Sdílejte jej prosím:

15 Comments

  1. 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.

    • Radomír Panna

      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.

    • 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.

      • Radomír Panna

        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?

  2. 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.

    • Radomír Panna

      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.

  3. Díky za radu – funguje!

  4. 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

    • Radomír Panna

      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.

      • Matěj Matolín

        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ší.

  5. Martin Valeš

    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.

  6. 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

  7. Díky za perfektní článek. Moc mi pomohl.
    🙂

  8. 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

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.

© 2024 Timesoft

Autor šablony Anders NorenNahoru ↑