Želite li biti kreativniji u pogledu tipografije na svojoj web stranici pokretanoj WordPressom, preporučujemo korištenje vrhunskih Google fontova. Osim što je korištenje istih jednostavno, izbor fontova je odličan i naravno sve je besplatno.
Ako ste se već razgledavali koji Google fontovi postoje te kako ih implementirati na svoju web stranicu vjerojatno ste vidjeli da su upute koje Google pruža jednostavne i da jednostavnim copy/paste potezom u vaš header.php priča završava.
No, postoji bolji način kako ih implementirati u vašu (bilo koju WordPress temu) i to korištenjem wp_enqueue_style funkcijom, ili za one manje vične diranju koda, upotrebom pluginova.
Kada ste na www.google.com/fonts izabrali font, dodatne stilove i tzv. skup znakova (character sets), Google nudi Standard opciju, odnosno link tag koji treba dodati unutar head sekcije vaše stranice.
Druga opcija koja se učestalo koristi je @import opcija.
Najjednostavnije je kopirati ponuđeni kod u css.style datoteku aktivne teme. Ukoliko vam je stalo do brzine učitavanja vaše web stranice, ovaj postupak nećete koristiti. Koje su mane ovakvog postupka pročitajte u odličnom članku Steve Soudersa.
No, ako baš morate koristiti @import opciju, te želite dodati više fontova (često se koriste barem 2 fonta), kombinirajte višestruke Google font zahtjeve (requests) kako biste izbjegli dodatne HTTP upite (queries). To možete učiniti na način da ćete dodati željene fontove u Collection te zatim kliknuti Use te bi @import kod trebao izgledati ovako:
Kako biste mogli koristiti hrvatske, dijakritičke znakove, nemojte zaboraviti u opciji character sets izabrati Latin Extended (latin-ext).
Javascript opcija se rijetko koristi pa je nismo ni posebno isticali.
Kako dodati Google font uz pomoć plugina ?
Ukoliko se odlučite za korištenje pluginova kako biste mogli koristiti Google fontove u svojoj temi, izdvojiti ćemo WP Google Fonts i Easy Google Fonts pluginove.
WP Google Fonts
Nakon što instalirate WP Google Fonts plugin, postavke možete podešavati pod Postavke -> Google fonts. Zaslon će izgledati ovako:
Iz padajućeg izbornika izaberite prvi font koji želite korisititi i podesite njegove postavke.
Odaberite gdje (na koje elemente) će se font primjenjivati, stilove fonta (normal, bold, italic i sl.), character set (ne zaboravite latin-ext !) i po potrebi CSS pravila za pojedine ID-e i klase. Postupak ponovite za svaki dodatni željeni font.
Easy Google Fonts
Nakon što instalirate Easy Google Fonts plugin, postavke možete podešavati pod Izgled -> Teme.
Plugin se integrira s WordPress Customizerom tema. Klikom na opciju “Customize” primjetiti ćete nove opcije za prilagodbu tipografije.
Izaberite Font family, weight, decoration i transform za paragrafe i headinge. Možete birati između zadanih fontova teme, standardnih web fontova (Arial, Courier new…) i preko 600 Google fontova.
Odlična je stvar live preview, što znači da se svaka promjena odmah prikazuje na desnoj strani zaslona, bez potrebe za osvježivanjem stranice.
Kako biste uvijek koristili najnovije Google fontove, u postavkama plugina Postavke -> Google fonts -> Advanced, upišete Google Fonts API Key te će vaša tema automatski koristiti posljednje verzije fontova.
[clear]
Osim toga, možete birati boje veličinu fontova, letter spacing i line height, također koristeći Live preview.
[clear]
Kako dodati Google font bez korištenja plugina ?
Kao što sam spomenuo na početku članka, ne želimo mjenjati header.php već ćemo fontove dinamički ubaciti u header koristeći functions.php.
Naravno, to ćemo odraditi u child temi, jer u njoj functions.php ne “gazi” functions.php iz parent teme. Drugim riječima, sve funkcije iz child teme biti će pokrenute tek nakon onih iz parent teme.
Da bi dinamički ubacili Google fontove u header, koristiti ćemo wp_enqueue_style funkciju.
function load_fonts() { wp_register_style('googleFonts', 'http://fonts.googleapis.com/css?family=PT+Sans:400,700|Open+Sans:400,700&subset=latin,latin-ext'); wp_enqueue_style( 'googleFonts'); } add_action('wp_print_styles', 'load_fonts');
Pomoću ovog koda, Google kod je automatski uključen u header a vaša child tema će ipak naslijediti netaknuti header.php roditeljske, parent teme.
Općenito, preporučujem dodavanje svih stylesheetova u temu na ovaj način, koristeći wp_enqueue_style funkciju. Isto vrijedi i za skripte, i to koristeći wp_enqueue_script funkciju.
Na taj način će se vaša tema uvijek moći nadograđivati, bez straha da ćete izgubiti custom funkcije, te ćete izbjeći mogućnost konflikta sa pluginovima !
Kako ukloniti Google font iz WordPress teme ?
Možda vas je potonji naslov pomalo iznenadio, no postoji i mogućnost da netko želi spriječiti korištenje Google fontova u temi.
Naime, u WordPress verziji 3.8, koja samo što nije ugledala svjetlo dana, Nadzorna ploča će koristiti Open Sans font. To znači da će svaka administracijska stranica koristiti Google font stylesheet. Osim toga, koriste ga i WordPress defaultne teme (Twenty Twelve, Twenty Thirteen, Twenty Fourteen). Pročitajte argumente za/protiv korištenja Google fontova u make.wordpress.org članku.
Razlozi za NEkorištenje Google fontova u mogu biti : sigurnost i privatnost, razvijanje ili produkcija lokalno (offline), poboljšanje performansi i slično.
Za ovu zadaću možete instalirati Disable Google Fonts plugin. Nakon instalacije nema nikakvog podešavanja postavki. Jednostavno, korisnik koji pristupi web stranici koristiti će fallback, odnosno neki sans serif font.
Disable Google font plugin je dostupan i na Github-u
Pozdrav!
Imam problema sa renderiranjem hrvatskih znakova u Roboto Condensed.
http://www.google.com/fonts/specimen/Roboto+Condensed
Isprobavao sam razne encoding sustave ali bez uspjeha. Na mapi znakove hrvatska slova postoje.
Koristim OS X 10.7.5 i pretežno Chrome.
Molim vas savjet.
Pozdrav!
U startu da pitam da li ste dodali latin-ext pod subset? To bi u kodu trebalo izgledati otprilike ovako:
…/css?family=Roboto+Condensed&subset=latin,latin-ext’…
Ne znam koju temu koristite pa stoga ne znam na koji način importirate Google fontove. Često je to unutar style.css-a.
Ako nije problem, upišite ili pošaljite URL vaše stranice putem naše kontakt forme pa mogu pogledati.
Latin extended je implementiran, a link dodan u header teme i to izgleda ovako:
https://www.dropbox.com/s/a5nue09d0bebkvd/Screenshot%202014-01-21%2001.16.17.png
http://www.skolskikurikulum.com.hr/
kao što možete vidjeti, ne prikazuju se “č” i “ć”, a prikazuju “š” i “ž”. “đ” je također na crnoj listi.
Problem je tome što se meni hrvatski znakovi ne prikazuju čak ni na:
http://typecast.com/preview/google/Roboto%20Condensed
https://www.dropbox.com/s/pyj1quhepvce7j8/Screenshot%202014-01-21%2001.19.22.png
Hvala za brzi odgovor – očekivao sam ga na mail ali nije došao pa sam tek sad provjerio na stranici.
Pozdrav, pokušao sam i s plugin-ovima i s umetanjem “wp_enqueue_style funkcijom” ali ništa. Idalje mi na stranci izbaciva umjesto Č i Ć samo ?. Stvarno neznam što da poduzmem?
Pokušala sam umetnuti font sa “wp_enqueue_style funkcijom”, ali ništa. Probala sam obrisati predzadnju zagradu iz drugog reda (činila se nepotrebnom) i sad radi savršeno!!!