Kako dodati prilagođene fontove na svoju web lokaciju WordPress

Kako dodati prilagođene fontove na svoju web lokaciju WordPress

Zašto blog učiniti dosadnim koristeći standardne fontove? Neka vaš blog govori o vašoj živopisnoj osobnosti i temama koje pokrivate velikim brojem prilagođenih fontova. Prilagođeni fontovi lijepa su značajka koja omogućuje vašem blogu da izgleda preferirano od drugih.


Suočimo se; svi volimo blogove i web stranice s pravim fontom. Oni ne samo da ukrašavaju web mjesto, već također pomažu privući korisnika na vaš sadržaj. Međutim, izbor standardnih WordPress fontova ograničen je i ovisi o temi koju koristite. Dobra vijest je da ih možete dodavati ručno ili specijaliziranim dodacima.

I evo, postavljaju se dva pitanja – gdje dobiti prilagođene fontove za WordPress i kako instalirati prilagođene fontove na vašoj web stranici WordPress.

Hajde da vidimo.

 Zašto trebam koristiti prilagođene fontove?

Prolaze dani kada su Times New Roman i Georgia smatrani jedinim fontom za tekstove na web stranicama. Proteklih nekoliko godina prostor za font potpuno se promijenio pojavom fontova poput Google Fonts i drugih.

Danas su na Internetu dostupne stotine besplatnih fontova, pomagala za informiranje i obuku i resursa dizajniranih za dizajn. Za razliku od Adobe Illustrator, Photoshop i ostalih klasičnih aplikacija, WordPress vam ne daje potpunu kontrolu nad fontovima prema zadanim postavkama. Samo neke teme odlučuju podržati i koristiti prilagođene fontove.

Stoga ćete u ovom postu naučiti kako pronaći prikladne prilagođene fontove i kako ih koristiti na web mjestu WordPress.

Važnost korištenja vlastitih fontova

Zašto mijenjate fontove, uvlake između riječi, razmake redaka, razmake slova ili zasićenje slova, pitate? Bilo kako bilo, neke studije to dokazuju tipografija poboljšava razumijevanje čitanja.

Mnogo ovisi o izgradnji fontova. Na svjesnoj i podsvjesnoj razini – svi dizajniraju sadržaj web stranica.

Dizajn fonta utječe na čitatelje, čak i ako na to ne obraćaju pažnju. Napustiti dizajn fonta znači odustati od samog razvoja! O tome ovisi raspoloženje čitatelja. Font olakšava čitanje ili prisiljava korisnike da napuste stranicu.

Svi web-preglednici sadrže skup zadanih fontova. To znači da ako font nije naveden u CSS stranice, tada će se koristiti standardna verzija. Uvijek možete koristiti zadane fontove, ali oni kompliciraju rad korisnika. Zbog toga je ključno koristiti prilagođeni font. Ako vam tema ne daje mogućnosti za promjenu fonta, mnoge web stranice i alati mogu vam pomoći.

Alternativa Google fontova

Gdje pronaći prilagođene fontove

Mnogi od vas znaju o besplatnim Googleovim fontovima. Postoji još mnogo web lokacija na kojima možete pronaći prekrasne fontove. Neki su besplatni za osobnu upotrebu. Ako vam je potrebna za komercijalnu upotrebu, trebate licencu. Google fontovi i Adobe Edge Fontovi su besplatni. Zato nisu toliko jedinstveni. A to nam ne odgovara.

Evo nekoliko ostali resursi za pronalaženje fontova za besplatno i komercijalno korištenje:

  1. Template Monster – Na web lokaciji TemplateMonster market naći ćete sve što vam treba za web dizajn. Postoji i mnogo fontova i paketa fontova za osobnu upotrebu za malu cijenu. Također, predstavljeni su u ONE web razvojnom kompletu. Kolekcija je ogromna i kreativna. Da biste vam pomogli u izboru, svi fontovi predstavljeni na brošurama ili okvirima. Svaki je font predstavljen i s komercijalnom licencom.
  2. MyFonts – MyFonts trenutno nudi najveći izbor fontova na svijetu. No cijene su ovdje i u višem segmentu. Dakle, ako imate uski proračun, to vam možda neće biti.
  3. FontSpring – Fontspring prodaje fantastične fontove za komercijalnu upotrebu. Ali u gotovo svakoj obitelji 1-2 besplatna slova koja se mogu koristiti u osobne svrhe. Osim toga, postoji zaseban odjeljak sa besplatnim fontovima. Kolekcija je vibra. Ali morat ćete pažljivo proučiti podatke o licenci za pojedini font prije preuzimanja.
  4. Cufonfonts – To je također opsežna zbirka različitih fontova. Odaberite bilo koju i vidjet ćete stranicu s detaljnim informacijama o njoj. Mnogo je besplatnih fontova i oni su podijeljeni u pojedinačne odjeljke. Sustav sortiranja na CufonFontsu prilično je fleksibilan i praktičan. Također, uključena je i podrška za Webfont.
  5. Dafont – Još jedna dostupna zbirka 3.500 besplatnih fontova. Većina ih je dizajnirana samo za osobnu upotrebu. Lijepa značajka DaFont je sustav kategorija. Možete odabrati font u stilu stripa, video igara, vintage ili stiliziran kao japanske znakove.

Izbor fontova vrlo je primamljiv jer su svi lijepi. Ali ne biste trebali birati puno. Koristiti ne više od dva slova na mjestu. Tada će izgled vašeg web mjesta biti dosljedan. Nakon što odaberete fontove, svakako preuzmite datoteke za svaki stil koji koristite (uobičajeni, podebljani, kurziv i sl.).

Sada kada ste odabrali odgovarajući font za web lokaciju, saznajmo kako ga dodati.

Kako dodati prilagođene fontove u WordPress

Postoji nekoliko načina dodavanja fontova na web mjesto WordPress:

  1. Dodaci: u ovom slučaju koriste se različiti WordPress dodaci za olakšavanje postupka.
  2. ručno: pomoću ove metode potreban vam je preneseni font na web mjesto i uređivanje CSS datoteke.
  3. teme: mnoge popularne teme uključuju ugrađene opcije za prilagođavanje fontova (napomena – ovu opciju nećemo pokrivati ​​jer će se postupak razlikovati ovisno o temi koju koristite, ali kvalitetne premium nagrade poput teme Total WordPress nudit će se na mreži dokumenti koje lako možete pratiti – poput ovog vodiča za dodavanje prilagođenih fontova u Ukupno)

Opcija 1 – Promjena fontova WordPress pomoću dodataka

Ako nas ne zanimaju globalne promjene, možemo instalirati WordPress dodatke koji će mijenjati fontove na vašoj web lokaciji.

Karakteristike prilagođenih dodataka za font

Softver s otvorenim kodom ima prednost zbog interesa zajednice, a WordPress također ima tu prednost. Nekoliko WordPress dodataka omogućuje vam dodavanje prilagođenih fontova. Kako odabrati prikladan dodatak s toliko? Koje su značajke prilagođenih dodataka za font?

Evo nekoliko točaka koje morate uzeti u obzir:

  • Sposobnost korištenja prilagođenog fonta
  • Sposobnost korištenja više fontova
  • Ciljana zaglavlja i komponente
  • Bonus: mogućnost promjene postavki fonta iz vizualnog uređivača

To je sve. Prva značajka na popisu vrlo je važna. Uvijek možete preuzeti fontove sa web lokacija poput DaFont, Squirrel Font, itd., Ali morate ih moći prenijeti na WordPress.

Pogledajmo nekoliko dodataka za WordPress koji vam omogućuju prijenos prilagođenih fontova.

Prilagođeni alat za prijenos fontova

Prilagođeni alat za prijenos fontova

Ovaj dodatak omogućuje vam preuzimanje Googleovih fontova i primjenjivanje ih na razne elemente vašeg bloga. Na primjer, do naslova ili tijela članka ili stranice.

Koristite bilo koji font

Koristite bilo koji font

Ovo je WordPress dodatak koji vam nudi prikladno sučelje za preuzimanje fontova i njihovo izravno korištenje putem vizualnog uređivača. WordPress vizualni uređivač može automatski promijeniti font bilo kojeg teksta. Ovaj dodatak nudi nekoliko značajki, zbog čega je postupak dodavanja prilagođenih fontova mnogo upravljiviji.

WP Google Fontovi

WP Google Fontovi

WP Google Fontovi omogućuju vam upotrebu kataloga Google fontova. Jedna od nevjerojatnih prednosti ovog dodatka je dodavanje blizu 1000 Googleovih fontova. Iako možete ručno dodijeliti Google fontove, mnogo je jednostavnije koristiti dodatak za većinu korisnika.

Kako instalirati fontove s dodatkom?

Uzmimo, na primjer, WP Google fontove. Samo instalirajte ovaj dodatak iz službenog skladišta WordPress-a i otvorite odjeljak Google fontovi.

WP Google Fontovi

Ovdje ćete vidjeti upravljačku ploču s fontom Google. Odaberite fontove i promijenite različite postavke, poput stila fonta, elemenata na koje se primjenjuje itd.

Opcija 2 – Ručno instalirajte prilagođene fontove WordPress

Putem @ font-face direktive možete na jedno mjesto povezati jedan ili više fontova. Ali ova metoda ima svoje prednosti i nedostatke.

prozodija:

  • Putem CSS-a možete povezati fontove bilo kojeg formata: ttf, otf, woff, svg.
  • Datoteke fontova nalazit će se na vašem poslužitelju – nećete ovisiti o uslugama treće strane.

kontra:

  • Za ispravnu vezu fonta za svaki stil, morate registrirati zasebni kôd.
  • Bez poznavanja CSS-a, lako se možete zbuniti.

Ali nije stvarni problem ako možete jednostavno kopirajte gotov kod i gdje trebate navesti vrijednosti.

Bilješka: Prije početka obavezno izradite dječju temu za svoju web lokaciju. Na ovaj način možete izvršiti sve izmjene na svojoj podređenoj temi, ostavljajući svoju osnovnu temu u taktima i kako biste je mogli lako ažurirati prema potrebi u budućnosti.

Korak 1: Stvorite mapu “fontovi”

Unutar teme vašeg djeteta stvorite novu mapu fontova ispod: wp-content / themes / vaše-dijete-tema / fontovi

Korak 2. Prenesite preuzete datoteke sa fontom na svoju web stranicu

To se može učiniti putem upravljačke ploče vašeg hostinga ili putem FTP-a.

Dodajte sve datoteke fonta u novo dodanu mapu fontova: wp-content / themes / vaše-dijete-tema / fontovi ti si stvorio.

Korak 3. Uvezi fontove preko podređene tematske tablice

Otvorite datoteku style.css svoje tematike i dodajte sljedeći kôd na početak CSS datoteke (nakon komentiranja podređene teme):

'Font-lica {
obitelj fontova: "MyWebFont";
src: url ('fontovi / WebFont.eot');
src: url ('fonts / WebFont.eot? #iefix') format ('embedded-opentype'),
url ('fontovi / WebFont.woff') format ('woff'),
url ('fontovi / WebFont.ttf') format ('truetype'),
url ('fontovi / WebFont.svg # svgwebfont') format ('svg');
težina slova: normalno;
font fonta: normalan;
}

Gdje MyWebFont je naziv fonta, a vrijednost src svojstva (podaci u zagradama u navodnicima) njihova je lokacija (relativne veze). Svaki stil moramo specificirati zasebno.

Budući da prvo spajamo normalan stil, svojstva težine i veličine fonta postavili smo na normalna.

Korak 4. Prilikom dodavanja kurziv, napišite sljedeće:

'Font-lica {
obitelj fontova: "MyWebFont";
src: url ('fontovi / WebFont-Italic.eot');
src: url ('fonts / WebFont-Italic.eot? #iefix') format ('embedded-opentype'),
url ('fontovi / WebFont-Italic.woff') format ('woff'),
url ('fontovi / WebFont-Italic.ttf') format ('truetype'),
url ('fontovi / WebFont-Italic.svg # svgwebfont') format ('svg');
težina slova: normalno;
font fonta: kurziv;
}

Tamo gdje je sve isto, samo smo svojstvo slova fonta dodali kurzivom.

Korak 5. Da biste dodali podebljani font, dodajte sljedeći kôd:

'Font-lica {
obitelj fontova: "MyWebFont";
src: url ('fontovi / WebFont-Bold.eot');
src: url ('fonts / WebFont-Bold.eot? #iefix') format ('embedded-opentype'),
url ('fontovi / WebFont-Bold.woff') format ('woff'),
url ('fontovi / WebFont-Bold.ttf') format ('truetype'),
url ('fontovi / WebFont-Bold.svg # svgwebfont') format ('svg');
težina slova: podebljano;
font fonta: normalan;
}

Tamo smo svojstvo težine fonta postavili podebljano.

Ne zaboravite navesti točnu lokaciju datoteka sa fontom za svaki stil.

Korak 6. Za spajanje podebljanog kursa upišite sljedeće:

'Font-lica {
obitelj fontova: "MyWebFont";
src: url ('fontovi / WebFont-Italic-Bold.eot');
src: url ('fonts / WebFont-Italic-Bold.eot? #iefix') format ('embedded-opentype'),
url ('fontovi / WebFont-Italic-Bold.woff') format ('woff'),
url ('fontovi / WebFont-Italic-Bold.ttf') format ('truetype'),
url ('fontovi / WebFont-Italic-Bold.svg # svgwebfont') format ('svg');
težina slova: podebljano;
font fonta: kurziv;
}

Pa, to je sve �� Sada ste na svoju web stranicu povezali četiri stila fonta.

Ali postoji jedna primjedba – ova će veza fontova biti pogrešno prikazana u programu Internet Explorer 8. Uteha je u tome što je vrlo malo ljudi koji još uvijek koriste IE8.

Prekrivanje vlastitih fontova za WordPress

Što je prvo što korisnici primijete kad posjete vašu web lokaciju? Dobro, njegov dizajn! Većina dizajna oslanja se na pravilno korištenje prekrasnih fontova. Stoga se morate pobrinuti za dizajn fonta svoje web stranice. Dodajte kôd ili koristite neki od spomenutih dodataka za umetanje novog stila fonta. Na koji ćete način izabrati ovisi o vama.

Na istoj web lokaciji ne upotrebljavate više od dva slova. Budući da više prilagođenih fontova dodate na web mjesto, postaje sporija brzina web lokacije.

To je sve, slobodno komentirajte. 

Također ćemo rado čuti koju opciju odaberete da biste dodali prilagođeni font na svoju web stranicu i gdje ćete pronaći svoj font.

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