Ugradnja Google fontova u web-mjesto Wordpress

Google Fontovi postali su glavni izvor za prilagođenu web tipografiju od svog razvoja 2010. Tri su glavna razloga zašto je Google ovdje postao predvodnik. Prvo, nije bilo dovoljno pristojnih servisa fontova, pa je Google popunio prazninu. Drugo, čak i na početku, raznolikost koju su nudili bila je relativno velika. Trenutno je dostupno preko 800 fontova u brojnim stilovima. Treće, ovi su fontovi dostupni besplatno, što ih čini posebno atraktivnim.

Osim toga, iznenađujuće ih je lako integrirati u vaše dizajnerske projekte. Pokazat ćemo vam kako možete uključiti ove Google fontove u svoju WordPress stranicu.

Google Fontovi

Za početak, morat ćete odabrati font s kojim želite raditi. Postoje razne opcije, tako da imate prilično velik jelovnik za odabir. Možete ih pronaći ako odete na Googleova stranica fontova. Ako tražite određeni font, jednostavno upišite naziv fonta u okvir za pretraživanje i trebao bi doći do uzorka.

Postoje i drugi parametri pretraživanja koje možete koristiti. Odmah ispod okvira za pretraživanje nalazi se gumb pod nazivom Kategorije. Ako kliknete na ovo, prikazat će vam se padajući izbornik s pet opcija. To su kako slijedi:

  • Serif – To su fontovi s kratkim linijama koje proizlaze iz gornjih i donjih crta slova. Times New Roman i Sylfaen su dobri primjeri.
  • Sans Serif – Kao što ime govori, ovo su fontovi bez tih malih linija. Nastoje imati jednostavnu i čistu estetiku.
  • Zaslon – To su ono što se može nazvati fontovima koji privlače pozornost. Najbolji su za naslove, a ne za dugi tekst.
  • Rukopis – Ovi fontovi čine da se čini da ih je netko napisao rukom. Utvrdit ćete da su mnogi u kurzivu ili imaju manje dosljedan razmak.
  • Monospace – Poput pisaćeg stroja, njihova slova zauzimaju istu horizontalnu širinu. Vrlo su dosljedno raspoređeni.

Uz to, imate i druge opcije za odabir, poput odabira svojstava jezika i fonta. Potonji uključuje broj stilova, debljinu, nagib i širinu.

Ugradnja fontova u WordPress

Ako želite uključiti ove jedinstvene fontove u svoju WordPress stranicu, postoji nekoliko metoda koje možete isprobati.

Korištenje CSS-a

Kliknite na Font iz Googleovog odabira i odvest će vas na stranicu s detaljnim fontovima. U gornjem desnom kutu nalazi se znak "+". Kliknite na to i otvorit će se bočni prozor. Kliknite na "Ugradi".

Sada možete kliknuti @uvoz. Ovo će otvoriti CSS kod koji trebate kopirati. Idite na tablicu stilova vaše WordPress teme i zalijepite je na početak. Provjerite jeste li kopirali vezu za uvoz bez  zagrade. Provjerite jeste li spremili i dodali ste font.

Upotreba PHP-a

Slijedite prvih nekoliko koraka i kopirajte vezu koju dobijete nakon što kliknete znak "+". Sada ga jednostavno dodajte u datoteku header.php svoje teme. Ne zaboravite spremiti kako bi se font mogao dodati.

Upotreba Javascript funkcije

Možete isprobati i nešto poznato kao "u redu čekanja". Za to ćete morati koristiti funkciju wp_enqueue_style. Ovom metodom možete dodati odabrani font u zaglavlje svih stranica vaše web stranice. To je sjajan način za dodavanje više izmjena odjednom.

Samo nabavite vezu fonta (od http do ”) i dodajte je u datoteku functions.php svoje teme s dodatnim kodom oko nje. Evo koda koji trebate upotrijebiti:

funkcija custom_add_google_fonts() {

wp_enqueue_style( 'custom-google-fonts', https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap, lažno );

}

add_action( 'wp_enqueue_scripts', 'custom_add_google_fonts' );

Svaka od ovih opcija će dobro funkcionirati za integraciju Google Fontova u vaše WordPress web-mjesto, stoga je važno odabrati onu koja vam najviše odgovara.