Kako dodati prilagođene fontove na WordPress web stranicu

Želite li naučiti kako dodati prilagođene fontove na WordPress web stranicu?

Zašto učiniti svoj blog dosadnim korištenjem standardnih fontova? Neka vaš blog govori o vašoj živopisnoj osobnosti i temama koje pokrivate uz širok izbor prilagođenih fontova. Prilagođeni fontovi su cool značajka zbog koje vaš blog izgleda bolje od drugih.

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

I tu se postavljaju dva pitanja: gdje nabaviti prilagođene fontove za WordPress i kako instalirati prilagođene fontove na vašoj web stranici.

Idemo saznati.

Zašto bih trebao koristiti prilagođene fontove?

Prošla su vremena kada su Times New Roman i Georgia smatrani jedinim fontovima za tekst na web stranicama. Tijekom proteklih nekoliko godina, prostor fontova se potpuno promijenio pojavom fontova kao npr Google Fontovi i drugi.

Danas postoje stotine besplatnih fontova, informacija i pomagala za obuku te resursa za dizajn dostupnih na Internetu. Za razliku od Adobe Illustrator, Photoshop i drugih klasičnih aplikacija, WordPress vam ne daje potpunu kontrolu nad zadanim fontovima. Samo određene WordPress teme odlučuju podržavati i koristiti prilagođene fontove.

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

Važnost korištenja prilagođenih fontova

Zašto mijenjati fontove, uvlačenje riječi, razmak između redaka, razmak između slova ili zasićenost fonta, pitate se? Međutim, neke studije to pokazuju tipografija poboljšava razumijevanje čitanja.

Mnogo ovisi o konstrukciji fontova. Na svjesnoj i podsvjesnoj razini – svatko dizajnom procjenjuje sadržaj web stranice.

Dizajn fontova utječe na čitatelje, čak i ako na njega ne obraćaju pažnju. Odustajanje od dizajna fontova znači odustajanje od samog razvoja! O tome ovisi raspoloženje čitatelja. Font olakšava čitanje ili tjera korisnike da napuste stranicu.

Svi web preglednici uključuju skup zadanih fontova. To znači da ako font nije naveden u CSS-u stranice, koristit će se standardna verzija. I dalje možete koristiti zadane fontove, ali oni otežavaju korisnicima. Zbog toga je bitno koristiti prilagođeni font. Ako vam vaša WordPress tema ne daje opcije za promjenu fonta, postoji mnogo web-mjesta i alata koji vam mogu pomoći.

Alternative Google fontovima

Mnogi od vas znaju Google fontovi. Postoji mnogo više web stranica na kojima možete pronaći prekrasne fontove. Neki od njih su besplatni za osobnu upotrebu. Ako trebate komercijalnu upotrebu, trebat će vam licenca. Google Fontovi i Adobe Edge Fontovi su besplatni. Zbog toga nisu toliko jedinstveni.

evo nekih drugi resursi za pronalaženje fontova za besplatnu i komercijalnu upotrebu:

1. Template Monster — Na web stranici TemplateMonster pronaći ćete sve što vam je potrebno za web dizajn. Također postoji mnogo fontova i paketa fontova za osobnu upotrebu za malu cijenu. Osim toga, kako bi vam pomogli pri odabiru, svi fontovi predstavljeni na brošurama ili okvirima. Svaki font ima i komercijalnu licencu.
2. MyFonts — MyFonts trenutno nudi najveći izbor fontova na svijetu. No, i ovdje su cijene u gornjem segmentu. Dakle, ako imate ograničen budžet, ovo možda nije za vas.
3. FontSpring — Fontspring prodaje nove fontove za komercijalnu upotrebu. Ali u gotovo svakoj obitelji mogu se koristiti 1-2 besplatna fonta u osobne svrhe. Također, postoji poseban odjeljak s besplatnim fontovima. Kolekcija je živahna. Ali morat ćete pažljivo proučiti informacije o licenci za određeni font prije preuzimanja.
4. Cufonfontovi — To je također ogromna zbirka različitih fontova. Odaberite bilo koju i vidjet ćete stranicu s detaljnim informacijama o njoj. Postoji mnogo besplatnih fontova, a podijeljeni su u pojedinačne odjeljke. Sustav razvrstavanja na CufonFonts je prilično fleksibilan i praktičan. Također, uključena je podrška za Webfont.
5. Dafont — Još jedna dostupna zbirka od 3 besplatnih fontova. Većina ih je dizajnirana samo za osobnu upotrebu. Cool DaFont značajka je sustav kategorija. Možete odabrati fontove u stilu stripova, videoigara, vintage itd….

Izbor fontova je vrlo primamljiv jer su svi lijepi. Ali ne treba birati puno. Nemojte koristiti više od dva fonta na web mjestu mreža. Ondaizgled vaše web stranice bit će dosljedan. Nakon što odaberete svoje fontove, svakako učitajte datoteke za svaki stil koji ćete koristiti (običan, podebljan, kurziv itd.).

Sada kada ste odabrali odgovarajući font za svoju web stranicu, doznajmo kako ga dodati.

Kako dodati prilagođene fontove u WordPress

Postoji nekoliko načina za dodavanje fontova na WordPress web stranicu:

1. Dodaci : u ovom slučaju drugačije WordPress plugins koriste se za olakšavanje procesa.
2. ručno : koristeći ovu metodu, trebate preuzeti font sa stranice i izmijeniti CSS datoteku.
3. teme: Mnoge popularne teme imaju ugrađene opcije za prilagodbu vaših fontova (napomena – ovu opciju nećemo pokrivati ​​jer će se proces razlikovati ovisno o temi koju koristite.

Opcija 1 – Promijenite WordPress fontove s dodacima

Ako nam nije stalo do globalnih promjena, možemo instalirati WordPress plugins koji će promijeniti fontove na vašoj web stranici.

Značajke prilagođenih dodataka za fontove

Softver otvorenog koda ima prednost za interes zajednice, a WordPress također ima tu prednost. Nekoliko WordPress dodataka omogućuje vam dodavanje prilagođenih fontova. Kako odabrati odgovarajući dodatak kada ih ima toliko? Koje su značajke WordPress dodataka za prilagođene fontove?

Evo nekoliko točaka koje treba uzeti u obzir:

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

To je sve. Prva karakteristika na popisu je vrlo važna. I dalje možete preuzimati fontove s web-mjesta kao što su DaFont, Font Squirrel, itd., ali morate ih moći prenijeti na WordPress.

Pogledajmo neke dodatke za WordPress koji vam omogućuju prijenos prilagođenih fontova.

1. Bolje Awesome Font

Ovaj WordPress dodatak omogućit će svojim korisnicima da automatski kombiniraju najnoviju verziju Better Font Awesome fontova sa CSS, kratke kodove i još mnogo toga. Pored toga, ovaj WordPress dodatak se automatski ažurira.

Kao funkcionalnost ćete pronaći: redovita ažuriranja, generator kratkih kodova, kompatibilnost s drugim dodacima za WordPress itd.

Preuzmite | demo | Web hosting

2. Google Fontovi za WordPress

Ovaj WordPress dodatak sastoji se od 877 posebnih fontova koji će vam omogućiti korištenje svih fontova na vašim web stranicama WordPressa. Zahvaljujući pretpregledu u stvarnom vremenu, omogućit će vam da vidite kako će izgledati vaša web stranica nakon što se primijeni font. 

Osim toga, moći ćete ga spremiti i urediti na pročelju kada pronađete kombinaciju u kojoj ćete uživati.

Njegove značajke uključuju: pregled u stvarnom vremenu, a prilično napredan SEO, višejezična podrška, podrška za više 870 + Google fontova, jednostavna ažuriranja i još mnogo toga.

Preuzmite | demo | Web hosting

3. Dodatak za fontove

Fontovi dodatak je besplatni WordPress dodatak koji korisnicima omogućuje pristup bibliotekama Google Fontova i Adobe Fontova. S ovim dodatkom za WordPress možete birati između više od 1000 Google i Adobe fontova, koristiti više fontova na svojoj web stranici i testirati različite opcije uz značajku pregleda dodatka u stvarnom vremenu u alatu za prilagođavanje WordPressa.

Za više načina prilagođavanja tipografije vaše web stranice kao što su veličina fonta, razmak između slova i visina redaka, možete nadograditi na premium verziju, Fontovi Plugin Pro.Preuzmite | demo | Web hosting

4. Jednostavni Google fontovi

Easy Google Fontovi jedan su od najbolji WordPress dodaci prilagoditi tipografiju vaše web stranice. Poput dodatka za fontove, omogućuje vam odabir između stotina Google fontova i njihov pretpregled u alatu za prilagodbu prije nego što ih dodate na svoju web stranicu.

Iako omogućuje pristup manjem broju Google fontova, jedinstven je po tome što vam omogućuje stvaranje prilagođenih kontrola i pravila fontova u admin području, koji će se odmah pojaviti u alatu za prilagođavanje WordPressa.

Preuzmite | demo | Web hosting

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

Pomoću direktive @font-face možete povezati jedan ili više fontova na svoju web stranicu. Ali ova metoda ima svoje prednosti i nedostatke.

prednosti:

• Zahvaljujući CSS-u, možete povezati fontove bilo kojeg formata: ttf, otf, woff, svg.
• Datoteke fontova bit će smještene na vašem poslužitelju – nećete ovisiti o uslugama trećih strana.

nedostaci :

• Za ispravnu vezu fonta za svaki stil, morate registrirati zaseban kod.
• Bez poznavanja CSS-a možete se lako zbuniti.

Ali to nije pravi problem ako možete samo kopirajte gotov kod i gdje trebate navesti svoje vrijednosti.

Bilješka : Prije nego što počnete, svakako stvoriti dječju temu za vašu web stranicu. Na taj način možete unijeti sve promjene u svoju dječju temu, ostavljajući svoju glavnu temu tako da je možete lako ažurirati ako bude potrebno u budućnosti.

Korak 1: Napravite mapu "fontovi".

U svojoj dječjoj temi stvorite novu mapu "fontovi" pod: wp-content/themes/your-child-theme/fonts

Korak 2. Prenesite preuzete datoteke fontova 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 fontova u novododanu mapu fontova: wp-content/themes/ U svojoj dječjoj temi stvorite novu mapu "fontovi" pod: wp-content/themes/your-child-theme/fonts koje si stvorio.

Korak 3. Uvezite fontove putem stilova podređene teme

Otvorite datoteku style.css vaše podređene teme i dodajte sljedeći kod na početak CSS datoteke (nakon komentara podređene teme):

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont.eot');
src: url('fonts/WebFont.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont.woff') format('woff'),
url('fonts/WebFont.ttf') format('truetype'),
url('fonts/WebFont.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: normal;
}

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

Budući da prvo povezujemo normalni stil, svojstva font-weight i font-style postavljamo na normalne.

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

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic.eot');
src: url('fonts/WebFont-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic.woff') format('woff'),
url('fonts/WebFont-Italic.ttf') format('truetype'),
url('fonts/WebFont-Italic.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: italic;
}

Kad je sve po starom, mi jedini pridajemo svojstvo stila fonta kurzivu.

Korak 5. Da biste dodali podebljani font, dodajte sljedeći kod:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Bold.eot');
src: url('fonts/WebFont-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Bold.woff') format('woff'),
url('fonts/WebFont-Bold.ttf') format('truetype'),
url('fonts/WebFont-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: normal;
}

Gdje smo svojstvo font-weight postavili na podebljano.

Ne zaboravite navesti ispravno mjesto datoteka fontova za svaki stil.

Korak 6. Da biste povezali podebljani kurziv, upišite sljedeće:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic-Bold.eot');
src: url('fonts/WebFont-Italic-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic-Bold.woff') format('woff'),
url('fonts/WebFont-Italic-Bold.ttf') format('truetype'),
url('fonts/WebFont-Italic-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: italic;
}

Pa to je to. Sada kada ste na svoju web stranicu povezali četiri stila fonta.

Ali postoji jedna napomena: ova veza fonta neće se ispravno prikazati u Internet Exploreru 8. Utjeha je da vrlo malo ljudi još uvijek koristi IE8.

Ostali preporučeni resursi

Također vas pozivamo da se savjetujete sa donjim izvorima kako biste poboljšali i kontrolirali svoju web stranicu i blog.

• 10 WordPress dodataka za harmoniku za web stranicu
• Kako dodati više stupaca u WordPress
• Neki dodaci za integraciju Googleovih usluga na svom blogu
• 5 WordPress dodaci za prikaz obavijesti
• Kako koristiti različite pozadine na WordPressu

Zaključak

Što je prva stvar koju korisnici primijete kada posjete vašu web stranicu? Tako je, njegov dizajn! Većina dizajna se oslanja na pravilnu upotrebu prekrasnih fontova. Dakle, morate se pobrinuti za dizajn fontova vaše web stranice. Dodajte kod ili upotrijebite jedan od gore navedenih dodataka da ugradite novi stil fonta. Kako ćete to izabrati ovisi o vama.

Pazite da ne koristite više od dva fonta na istoj web stranici. Budući da što više prilagođenih fontova dodate na web stranicu, brzina web stranice će više pasti.

To je to za ovaj članak koji vam pokazuje kako dodati prilagođene fontove WordPress web stranici. Pozivamo vas da probate. Ako imate bilo kakvih nedoumica ili prijedloga, javite nam unutar Komentari.

Međutim, također ćete moći konzultirati naše sredstva, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.

U međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.   

...