Dodavanje prilagođenih fontova u WordPress


Kako dodati prilagođene fontove u WordPress


Odabir pravog fonta za web mjesto WordPress središnji je dio web dizajna i brendiranja web stranica.

Kao boje, slike i drugi elementi, tipografija igra veliku ulogu u načinu na koji posjetitelji doživljavaju vašu web lokaciju.

Srećom, WordPress fontovi jedna su od mnogih stvari koje možete slobodno prilagoditi. Na WordPress web mjestu koje želite možete koristiti gotovo bilo koji besplatni prilagođeni font.

Pokrivat ćemo sve što trebate znati o WordPress fontovima:

  • A) Kako dodati prilagođene fontove u WordPress (ručno)
  • B) Kako dodati prilagođene fontove u WordPress (putem dodatka)
  • Zašto koristiti prilagođene fontove na WordPressu
  • Gdje pronaći prilagođene fontove
  • Zaključak

A) Kako ručno dodati prilagođene fontove u WordPress

Kada je u pitanju ručno dodavanje prilagođenih fontova u WordPress, imate tri glavne mogućnosti: HTML, JavaScript i CSS. Postoje prednosti i nedostaci svake metode, a koji je pravi za vas, ovisi o vašem postavljanju. Ne brinite, detaljno ćemo proći kroz svaki od njih.

1. Korištenje CSS-a i @uvoz

Krenimo od najmanje preporučene metode. Ako namjeravate instalirati prilagođene tipove iz Google fontova, možda ste primijetili da na njemu ima kartica s oznakom @uvoz. Usluga vam daje dio CSS koda.

kartica za uvoz u googleovim fontovima

Možete ga uzeti takvog kakav je i umetnuti ga u zaglavlje (više o tome u nastavku) ili ga kopirati bez oznake >uglati za početak teme (ili još bolje, podređena tema) style.css datoteka.

/ *
Naziv teme: Dvadeset sedamnaesto dijete
URI teme: https://wordpress.org/themes/twentyseventeen/
Predložak: dvadeset sedamnaest
Autor: WordPress tim
Autor URI: https://wordpress.org/
Verzija: 1.0

* /

@import url ('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');


/ * ovdje dolazi dodatni CSS * /

Ako to učinite, učit ćete font na vašu web lokaciju s tablice sa stilovima. Čini se kao jednostavno rješenje, zar ne? Zašto se to onda najmanje preporučuje?

Razlog su problemi s izvedbom. koristeći @uvoz više nije preporučeni način rada jer sprječava preglednike da preuzmu nekoliko listova stila odjednom. Posljedica: sporije vrijeme učitavanja stranica. Ostanite dalje od toga ako možete.

2. Korištenje datoteke predloška WordPressa

Druga metoda dobivanja fontova na vašoj web lokaciji je preuzimanje koda koje pružaju biblioteke fontova i kopiranje u svoju header.php datoteka predloška. Ima ga većina standardnih WordPress tema.

Obavezno ga stavite negdje između i zagrade. Na taj će se način vaš font učitavati kad god stranica bude učitana.

unesite kôd google fontova u zaglavlje wordpressa

Ako koristite podređenu temu, obavezno kopirajte roditeljsku temu header.php datoteke u direktorij podređene teme i tamo izvršite promjene.

Neke teme dolaze s postavkama koje vam omogućuju dodavanje prilagođenog koda u zaglavlje i podnožje putem pomoćnog spiska. To je i održiva opcija.

3. Korištenje 'Font-lica

Do sada smo razgovarali samo o tome kako koristiti prilagođene fontove u WordPressu koji se nalaze negdje drugdje, naime poslužitelje Googlea i Adobe. No, također je moguće postaviti fontove na svojoj web lokaciji i nuditi ih preglednicima posjetitelja.

Da biste to učinili, prvo morate preuzeti dotični font. Sjećate se gumba za preuzimanje na Google Fontima? Taj će vam sad postati koristan. Ostali davatelji vam također omogućuju preuzimanje fontova.

Kad to učinite, obavezno ga nabavite u formatu web fonta. To znači TTF, OTF ili WOFF. Pronaći ćete više informacija o njemu ovdje. Ako nemate pravi format web slova, možete je upotrijebiti ova usluga kako biste pretvorili svoj font u podržani.

Nakon što pripremite datoteke sa fontom, morate ih prenijeti na svoju WordPress web lokaciju putem FTP-a. Dobro mjesto za njihovo pohranjivanje nalazi se u poddirektoriju naziva vašeg djeteta fontovi (kreativno, znamo).

Nakon toga morate unijeti font u svoju stilsku tablicu putem 'Font-lica. Evo kako to izgleda:

@ font-face {
obitelj fontova: Roboto;
src: url (http: //localhost/wordpress/wp-content/themes/twentyseventeen-child/fonts/Roboto-Regular.ttf);
težina slova: normalno;
}

Ne zaboravite zamijeniti naziv fonta i adresu za njegovu lokaciju na vlastitoj web lokaciji. Nakon toga vaš novi prilagođeni font bit će upotrebljiv.

Međutim, to također nije najbolje rješenje, posebno za izvedbu. Googleovi poslužitelji vjerojatno su brži od vaših, pa će stoga tamo bolje rješenje učitavati prilagođene fontove.

4. Enqueueing Fontovi - "WordPress način"

Ako doista želite dodati prilagođene fontove u WordPress na ispravan način, upotrijebit ćete svoj functions.php datoteka (unutar mape trenutno aktivne teme) i funkcije  wp_enqueue_script ili wp_enqueue_style.

Uz njihovu pomoć možemo uzeti isječke koda koje pružaju stranice s fontom. Međutim, umjesto da ih kopiramo u datoteku, dodaćemo ih u zaglavlje putem funkcije.

U čemu je razlika između njih wp_enqueue_script i wp_enqueue_style? Kao što njihova imena sugeriraju, jedna je za dodavanje skripti, a jedna za stilske tablice. Koji je pravi način upotrebe ovisi o načinu na koji se vaši prilagođeni fontovi daju iz izvora.

Na primjer, Google Fontovi daju vam font kao stilske tablice. U tom slučaju biste ih dodali na svoje mjesto za WordPress na ovaj način:

funkcija add_google_fonts () {
wp_enqueue_style ('google_web_fonts', 'https://fonts.googleapis.com/css?family=Open+Sans|Roboto');
}

dodavanje ('wp_enqueue_scripts', 'add_google_fonts');

Nasuprot tome, fontovi iz Adobe Edge Web Fonts dolaze kao JavaScript. Prema tome, za ulazak na njihovu web lokaciju kôd će izgledati ovako:

funkcija add_adobe_fonts () {
wp_enqueue_script ('adobe_edge_web_fonts', '//use.edgefonts.net/open-sans.js');
}

dodavanje ('wp_enqueue_scripts', 'add_adobe_fonts');

Zar nije bilo tako teško, zar ne? Osim toga, dobivate dodatne bodove za rad na WordPress putu.

5. Nazovite prilagođene fontove u svom listu stilova

Sada kada su fontovi dodani na vašu web lokaciju, službeno ih možete koristiti. Da biste to učinili, preostalo je samo dodavanje deklaracije za novi font u vašu listu stilova. Na primjer, da biste promijenili font za oznake zaglavlja, upotrijebili biste nešto poput ovoga:

h1,
h2,
H3,
H4,
h5,
h6 {
obitelj fontova: 'Roboto';
}

Bilješka: Obratite pažnju na to kako usluga koju koristite određuje CSS deklaraciju za vaše fontove. Na našoj probnoj stranici, izgleda da nismo mogli navesti Adobe Edge Web Fontove jer u CSS-u nazivaju Open Sans pomoću otvorenog sans za razliku od 'Otvori bez sučelja' u Google Fontovima.

To je to. Sada znate kako ručno dodati prilagođene fontove u WordPress. Čestitajte sebi, ovo je neko znanje sljedeće razine! Očito su iste akcije moguće putem dodataka. O tome ćemo razgovarati dalje.

B) Kako dodati prilagođene fontove u WordPress putem dodatka

Sfera WordPressa ne bi bila ono što jest da nije bilo nekoliko dodataka za dodavanje prilagođenih fontova na platformu. Mi ćemo istražiti kako koristiti Jednostavni Google fontovi, koji je jedan od najpopularnijih dodataka na ovom području.

1. Instalirajte dodatak

Prvi korak je instalacija dodatka. Da biste to učinili, prijeđite na Dodaci> Instaliraj novo. Zatim potražite ime dodatka. U rezultatima pretraživanja kliknite na Sada instalirati i aktivirajte dodatak nakon što se nađe na vašoj web lokaciji.

2. Dodavanje / promjena fontova na vašoj web lokaciji

Kad je dodatak aktivan, možete pronaći novu stavku izbornika koja se zove Tipografija pod, ispod Izgled> Prilagodi.

izbornik tipografije u alatu za prilagođavanje riječi

Kada kliknete na njega i odaberete Zadana tipografija, možete pronaći popis kontrola za promjenu fonta svojih odlomaka i naslova.

jednostavne postavke google fontova u alatu za prilagođavanje riječi

Korištenje njih je stvarno jednostavno. Samo kliknite padajući izbornik gdje piše Uredi font za dio vaše web lokacije koji želite promijeniti. To vam daje pristup ovom izborniku:

lako google fontovi mijenjaju font

Ovdje je najvažniji dio onaj pod Obitelj fontova. Ovdje možete odabrati novu vrstu fonta iz čitave knjižnice Google Font (upotrijebite Skripta / Podskup ograničiti izbor fonta na one s posebnim znakovima).

Fontovi su poredani standardnim, serif, sans-serif, prikazom, rukopisom i jednoosnim fontom. Međutim, možete ih i jednostavno pretraživati ​​po imenu.

Kada kliknete na font, možete pogledati promjene u stvarnom vremenu s desne strane.

promijenio vlastiti font u jednostavnim fontovima google

3. Konfigurirajte Font

Nakon što odaberete font, postoji mnogo opcija za dodatno prilagođavanje tipografije.

Prije svega, možete promijeniti težinu / stil fonta u istoimenom izborniku. Time se kontrolira debljina slova.

Nadalje, pod Dekoracija teksta, možete dodati podcrtavanje, precrtavanje i podvlačenje. Transformiranje teksta također vam omogućuje postavljanje svih velikih slova, svih malih slova ili velikih slova uz svako veliko slovo. Ispod Izgled karticu na vrhu, možete također kontrolirati boju fonta, boju pozadine, veličinu fonta, visinu linije i razmak slova.

postavke izgleda u jednostavnim googleovim fontovima

Konačno, namještanje omogućuje vam da promijenite druge postavke kao što su margina, oblaganje, obrub, obrub obruba i prikaz.

postavke pozicioniranja u jednostavnim google fontima

Ukratko, trebali biste biti u mogućnosti prilagoditi fontove na vašoj web lokaciji u potpunosti po vašoj želji. Lako, zar ne? Ne zaboravite pogoditi Spremi i objavi na vrhu kad ste zadovoljni svojim promjenama.

Što ne radim, što da radim?

Ponekad niste u mogućnosti promijeniti neke od fontova na vašem web mjestu. To se obično događa kada tema koju koristite sadrži nestandardne CSS klase i odabire za njihovo oblikovanje.

Primjerice, u temi Dvadeset šesnaest naslovi blogova nisu samo definirani kao H1, već imaju i CSS klasu koja se naziva .početne naslovni. Iz tog razloga, dodatak ih ne može promijeniti.

Da biste otklonili ovaj problem, morate stvoriti tzv kontrola fonta pod, ispod Postavke> Google fontovi.

dodajte kontrolu fonta u jednostavnim google fontima

Možete spojiti CSS selektore s novom kontrolom i prisilno prevrtanje kad je potrebno. Nakon što ste to učinili, nova kontrola fonta dostupna je kao dodatna opcija u programu WordPress Customizer ispod Tema tipografija. Lako grašak.

Ostali prilagođeni fontovi WordPress dodataka

Na raspolaganju su i drugi WordPress dodaci za dodavanje prilagođenih fontova:

  • Koristite bilo koji font - Pomaže vam da koristite prenesene fontove bez ikakvog CSS-a. Na njemu se nalaze fontovi na vašem vlastitom poslužitelju, a također se nude alati za konverziju formata fontova.
  • Typekit fontove za WordPress - Koristite fontove tvrtke Adobe Typekit usluga (za koju se morate prijaviti). Omogućuje vam unos ugrađenih kodova i prilagođenog CSS-a izravno u dodatak.
  • TK Google Fontovi - Alternativno rješenje za ugradnju Google fontova koji uvelike premješta doživljaj Google Fontova u podlogu za WordPress. Isprobajte fontove s pregledom i prilagođenim tekstom, a zatim ga promijenite unutar WordPress Customizer-a.

Zašto koristiti prilagođene fontove na vašoj web stranici WordPress?

Tipografija je sama po sebi nauka i nećemo vam moći dati cjeloviti tečaj o korištenju fontova u web dizajnu ovdje. Naposljetku, ne radi se samo o fontu, već i njegovoj veličini, nagibu, debljini i mnogim drugim stvarima. Međutim, mi limenka Pokrijte zašto je korištenje prilagođenih fontova na vašem web mjestu WordPress dobra ideja.

1. Tipografija je dio prvog dojma

Prije svega, font koji upotrebljavate u mnogome utječe na percepciju vaše web lokacije. Je li vaša web lokacija zabavna i razigrana? Jeste li poslovni profesionalac? Posjetitelji to odlučuju u jednom pogledu i vaša tipografija igra veliku ulogu u njihovoj percepciji.

2. Fontovi imaju puno veći utjecaj nego što mislite

To može utjecati na vašu sposobnost učenja, pamćenja tekstova, pa čak i na vaše raspoloženje.

Na primjer, u jednom istraživanje, zabilježeno je da ako želite povećati vrijeme provedeno u čitanju nekog teksta, trebate koristiti serif font. Međutim, ako želite pročitati više u kratkom vremenu, trebali biste se prebaciti na sans-serif font.

Druga studija pokazala je ljudima iste upute za vježbanje u različitim tipovima znakova. Zatim su od sudionika tražili da procijene koliko će im trebati da ispune navedene upute. Fascinantno, pretpostavljali su da će im trebati više vremena nego grupi s jednostavnijim fontom. Kao posljedica toga, manje su vjerojatno slijedili rutinu vježbanja.

Gdje pronaći prilagođene fontove

1. Upotrijebite Google Fontove za pronalaženje prilagođene tipografije

Prva usluga koju ćemo pogledati je Google fontovi. Kao što ime sugerira, to je Googleova usluga koja nudi 800+ različitih fontova. Besplatno za korištenje. Za svakoga.

Evo kako ga koristiti:

2. Pronađite pravu font

Kada prvi put otvorite stranicu Google fontovi (samo je upišite u Google pretraživanje), vidjet ćete ovo:

kako dodati prilagođene fontove u početnu stranicu wordpress google fontove

Korisničko sučelje izrađeno je kako bi vam pomoglo u pronalaženju odgovarajućeg fonta za svoju svrhu. Ako već imate na umu font, jednostavno možete upisati njegovo ime u polje za pretraživanje s desne strane.

Ako ne, možete filtrirati fontove na mnogo različitih načina, na primjer, po kategoriji:

  • crtica - Znači fontove sa škakljivim crtama na kraju, kao Times New Roman.
  • Bez vitica - Jednostavni fontovi bez škljocanja, poput Helvetice. Fontovi korišteni na ovoj web stranici su primjer toga.
  • Prikaz - Slojevi koji se mogu koristiti u većim veličinama, poput naslova.
  • Rukopis - Da li želite da vaša tipografija izgleda kao da je napisana rukom? Tada je to vaša postavka.
  • monospace - Tipografija u kojoj svi likovi zauzimaju isti prostor, kao ovo.

Ostali filtri uključuju:

  • Sortiranje - Razvrstajte fontove prema trendovima, popularnim, datumima dodanim ili abecednim redom.
  • Jezici -Ograničite izbor slova na jezicima koji nisu napisani latiničnim pismom, poput arapskog, tajlandskog ili vijetnamskog.
  • Broj stilova -Odaberite koliko vam je dostupnih stilova, znači ima li font različitih debljina, kurziv, podebljan i više.
  • Debljina - Odaberite željenu debljinu slova.
  • Nagib - Isto kao i debljina, ali za nagib. Raste od ravne do gotovo vodoravne.
  • Širina - Filtrirajte fontove po širini slova i razmaku.

Kada primijenite bilo koji filtar, rezultati pretraživanja prilagođavaju se u stvarnom vremenu. Na lijevoj strani vidjet ćete dostupne fontove u vašoj kategoriji i primjere rečenica.

Kad miša pređete preko fonta, možete upotrijebiti padajuće izbornike na vrhu da Google Fontovi prikazuju primjer odlomaka, cijelu abecedu ili brojeve. Možete jednostavno kliknuti i polje rečenice i napisati što želite.

uređivanje uzorka teksta u google fontima

Uz to, postoje mogućnosti za promjenu stila i veličine fonta. Kada napravite promjene, također imate mogućnost da ih primijenite na sve svoje rezultate pretraživanja. Na kraju, pogledajte stranicu s pojedinostima o fontu klikom na Vidi primjerak.

stranicu detalja o fontu u google fontima

3. Dodajte Fontove u svoju zbirku

Ako vam se sviđa određeni font, upotrijebite znak crveni plus u gornjem desnom kutu da biste ga dodali svojoj kolekciji. Ako na taj način otvorite izbornik na dnu, na kojem ćete vidjeti sve svoje odabrane fontove.

fontovi odabrani u google fontima

Imajte na umu da možete dodati više obitelji fontova. To ima smisla, na primjer, kada jedan odabirete kopiju tijela, a drugi za zaglavlja.

4. Prilagodite postavke fonta

Nakon što ste zadovoljni sa svojom kolekcijom, kliknite na donji izbornik. Na taj će se način otvoriti ovaj zaslon:

postavke fonta u google fontima

Kao što vidite, možete pronaći neke dijelove koda za umetanje i korištenje fontova na vašoj web lokaciji. To će kasnije postati važno. Za sada kliknite karticu na kojoj piše Prilagodba. Samim time odvest ćete se na ovaj izbornik:

prilagodite fontove u google fontima

Ovdje možete odabrati stilove dotičnih fontova. Ovo je važno ako želite koristiti fontove različitih veličina, što je često slučaj.

Međutim, budite oprezni: što više stilova mora učitati vaše web mjesto, to će se i usporiti (Google Fontovi čak vam u gornjem desnom uglu daju naznaku brzine učitavanja trenutne kolekcije). Dakle, razmislite o tome što vam stvarno treba i izaberite samo to. Usput, postoji više načina na koje možete ubrzati WordPress.

U slučaju da vam treba neki drugi jezik osim standardne latinične abecede, obavezno ga odaberite i na dnu.

odaberite jezike fontova u google fontima

Uz to, sve što trebate znati su dvije ikone strelice na vrhu.

gumb za preuzimanje i dijeljenje u googleovim fontovima

Ona s lijeve strane omogućuje vam pregled i dijeljenje kolekcije fontova. Kada se odlučite za to, otvara se proširena stranica na koju možete umetnuti ogledni tekst i vidjeti ga u svim fontima odjednom. Ova je stranica također dobra za dijeljenje s ljudima.

Važniji je gumb za preuzimanje pored njega. Klikom na njega možete preuzeti datoteke fonta da biste ih koristili na radnoj površini (na primjer, u Photoshopu). Koristiti Skyfonts kako bi ih zadržali u tijeku.

Kasnije ćemo vam pokazati i način na koji te datoteke prenosite na vaš poslužitelj i fontove domaćina izravno na vašu web lokaciju. Imajte to na umu za budućnost. Za sada ćemo vam pokazati drugu sličnu biblioteku fontova.

Dodatni izvor za prilagođene fontove

  • 15+ web sigurnih fontova koje preporučujemo

Uz gore navedeno, trebali biste biti u mogućnosti pronaći nešto za sebe. Još posljednji savjet - ako ne znate pravilno kombinirati fontove, upotrijebite Par fontova gdje su dizajneri napravili nogu za vas.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
Like this post? Please share to your friends:
Adblock
detector
map