Kuidas lisada kohandatud fonte oma WordPressi saidile

Kuidas lisada kohandatud fonte oma WordPressi saidile

Miks teha teie ajaveeb tavaliste fondide abil igavaks? Laske oma ajaveebil rääkida teie erksast isiksusest ja teemadest, mida te hõlmate mitmesuguste kohandatud fondidega. Kohandatud fondid on kena funktsioon, mis võimaldab teie ajaveebil teistega võrreldes eelistada.


Olgem ausad; me kõik armastame õigete fontidega ajaveebe ja saite. Need mitte ainult ei kaunista saiti, vaid aitavad ka meelitada kasutajat teie sisu juurde. Tavaliste WordPress-fondide valik on aga piiratud ja sõltub kasutatavast teemast. Hea uudis on see, et saate neid käsitsi või spetsiaalsete pistikprogrammidega lisada.

Ja siin kerkib kaks küsimust – kust saada kohandatud fonte jaoks WordPress ja kuidas kohandatud fonte installida oma WordPressi saidil.

Uurime välja.

 Miks ma peaksin kasutama kohandatud fonte??

Ajad on möödas, kui Times New Romani ja Gruusiat peeti veebisaitide tekstide ainsateks fondideks. Viimase paari aasta jooksul on fontide ruum muudetud selliste fondide ilmumisega nagu Google Fonts ja teised.

Täna on Internetis saadaval sadu tasuta fonte, teabe- ja koolitusvahendeid ning disaini jaoks mõeldud ressursse. Erinevalt Adobe Illustratorist, Photoshopist ja muudest klassikalistest rakendustest ei anna WordPress vaikimisi fontide üle täielikku kontrolli. Ainult mõned teemad valivad kohandatud fondide toetamise ja kasutamise.

Seetõttu saate sellest postitusest teada, kuidas leida oma WordPressi saidilt sobivaid kohandatud fonte ja kuidas neid kasutada.

Kohandatud fontide kasutamise olulisus

Miks peaksite küsima fonte, taanet sõnade vahel, reavahe, tähtede vahetust või fondi küllastust? Olgu kuidas on, mõned uuringud tõestavad seda tüpograafia parandab lugemisoskust.

Palju sõltub fondide ehitamisest. Teadlikul ja alateadlikul tasandil – igaüks hindab veebilehe sisu kujunduse järgi.

Fondi kujundus mõjutab lugejaid, isegi kui nad sellele tähelepanu ei pööra. Fondikujundusest loobumine tähendab loobumist ise arendusest! Sellest sõltub lugeja meeleolu. Fond muudab lugemise hõlpsamaks või sunnib kasutajaid lehelt lahkuma.

Kõik veebibrauserid sisaldavad vaikefontide komplekti. See tähendab, et kui fonti lehe CSS-is ei täpsustata, kasutatakse standardversiooni. Võite alati kasutada vaikimisi kasutatavaid fonte, kuid need raskendavad kasutajate tööd. Seetõttu on oluline kasutada kohandatud fonti. Kui teie teema ei anna teile võimalusi fondi muutmiseks, võivad aidata paljud veebisaidid ja tööriistad.

Google Fontide alternatiivid

Kust leida kohandatud fonte

Paljud teist teavad tasuta Google’i fontide kohta. Seal on veel palju saite, kust leiate ilusaid fonte. Mõned neist on isiklikuks kasutamiseks tasuta. Kui vajate äriliseks kasutamiseks, siis vajate litsentsi. Google Fonts ja Adobe Edge Fonts on tasuta. Sellepärast pole nad nii ainulaadsed. Ja see ei sobi meile.

Siin on mõned muud ressursid fontide leidmiseks tasuta ja äriliseks kasutamiseks:

  1. TemplateMonster – TemplateMonsteri turuplatsilt leiate kõik veebidisaini jaoks vajaliku. Samuti on väikese hinna eest palju isiklikuks kasutamiseks mõeldud fonte ja fondipakke. Neid tutvustatakse ka ühes veebiarenduskomplektis. Kollektsioon on tohutu ja loominguline. Valiku hõlbustamiseks kõik brošüüridel või raamidel olevad fondid. Igal fondil on ka ärilitsents.
  2. MyFonts – MyFonts pakub praegu suurimat fontide valikut maailmas. Siinsed hinnad on aga ka kõrgemas segmendis. Seega, kui teil on piiratud eelarve, ei pruugi see teie jaoks olla.
  3. FontSpring – Fontspring müüb väljamõeldud fonte äriliseks kasutamiseks. Kuid peaaegu igas peres on 1-2 tasuta fonti, mida saab kasutada isiklikel eesmärkidel. Lisaks on eraldi osa tasuta fontidega. Kollektsioon on elav. Kuid enne allalaadimist peate hoolikalt uurima konkreetse fondi litsentside teavet.
  4. Cufonfonts – See on ka ulatuslik kogumik erinevaid fonte. Valige mõni ja näete lehte selle kohta üksikasjaliku teabega. Tasuta fonte on palju ja need on jagatud üksikuteks osadeks. CufonFontsi sorteerimissüsteem on üsna paindlik ja mugav. Samuti on kaasas Webfonti tugi.
  5. Dafont – Veel üks 3500 tasuta fondi kättesaadav kogum. Enamik neist on mõeldud ainult isiklikuks kasutamiseks. Tore funktsioon DaFont on kategooriate süsteem. Võite valida fonte koomiksite, videomängude, vanaaegsete või stiliseeritud jaapani tähtedega stiilidena.

Fontide valik on väga ahvatlev, kuna need on kõik ilusad. Kuid te ei tohiks palju valida. Kasutage saidil mitte rohkem kui kaks fonti. Siis on teie veebisaidi välimus ühtlane. Kui olete oma fondi valinud, laadige kindlasti alla failid iga kasutatava stiili jaoks (tavaline, paks, kaldkiri jne)..

Nüüd, kui olete saidile sobiva fondi valinud, uurime, kuidas seda lisada.

Kuidas lisada kohandatud fonte WordPressi

Fontide lisamiseks WordPressi saidile on mitu võimalust:

  1. Pluginad: sel juhul kasutatakse protsessi hõlbustamiseks erinevaid WordPressi pluginaid.
  2. Käsitsi: seda meetodit kasutades peate saidile alla laaditud fondi üles laadima ja CSS-faili redigeerima.
  3. Teemad: paljude populaarsete teemade hulgas on sisseehitatud suvandid teie fontide kohandamiseks (märkus. me ei kata seda võimalust, kuna protsess sõltub kasutatavast teemast, kuid kvaliteetseid premium-teemasid, nagu teema WordPress kokku, pakutakse veebis dokumente, mida saate hõlpsalt jälgida – nagu see juhend kohandatud fondide lisamiseks kogusse)

1. võimalus – WordPressi fontide muutmine pistikprogrammidega

Kui me globaalsetest muudatustest ei hooli, saame installida WordPressi pluginad, mis muudavad teie saidi fonte.

Kohandatud fondi pistikprogrammide omadused

Avatud lähtekoodiga tarkvaral on eelis kogukonna huvides ja ka WordPressil on see eelis. Mitmed WordPressi pluginad võimaldavad teil lisada kohandatud fonte. Kuidas valida nii paljude jaoks sobiv pistikprogramm? Millised on kohandatud font-pistikprogrammide omadused?

Siin on mõned punktid, mida tuleks arvesse võtta:

  • Võimalus kasutada kohandatud fonti
  • Võimalus kasutada rohkem kui ühte fonti
  • Sihtpäised ja komponendid
  • Boonus: võimalus muuta fondi sätteid visuaalsest redaktorist

See on kõik. Nimekirja esimene funktsioon on väga oluline. Saate fonte alati alla laadida sellistelt saitidelt nagu DaFont, Font Squirrel jne, kuid peate saama neid WordPressi üles laadida..

Vaatame mõnda WordPressi pistikprogrammi, mis võimaldavad teil üles laadida kohandatud fonte.

Kohandatud fondi üleslaadija

Kohandatud fondi üleslaadija

See pistikprogramm võimaldab teil alla laadida Google’i fonte ja rakendada neid oma ajaveebi erinevatele elementidele. Näiteks artikli või lehe pealkirjadesse või ossa.

Kasutage suvalist fonti

Kasutage suvalist fonti

See on WordPressi pistikprogramm, mis annab teile mugava liidese fontide allalaadimiseks ja nende kasutamiseks otse visuaalse redaktori kaudu. WordPressi visuaalne redaktor saab automaatselt muuta mis tahes teksti fonti. See pistikprogramm pakub mitmeid funktsioone, mis muudab kohandatud fondide lisamise protsessi palju paremini hallatavaks.

WP Google Fonts

WP Google Fonts

WP Google Fonts võimaldab teil kasutada Google’i fontide kataloogi. Selle pistikprogrammi üks hämmastavaid eeliseid on peaaegu 1000 Google’i fondi lisamine. Ehkki saate Google’i fonte käsitsi võltsida, on enamiku kasutajate jaoks pistikprogrammi kasutamine palju lihtsam.

Kuidas installida fonte pistikprogrammiga?

Võtame näiteks WP Google Fonts. Lihtsalt installige see pistikprogramm ametlikust WordPressi hoidlast ja avage jaotis Google Fonts.

WP Google Fonts

Siin näete Google’i fontide juhtpaneeli. Valige fondid ja muutke mitmesuguseid sätteid, näiteks kirjastiili, elemente, millele see rakendatakse jne.

2. võimalus – WordPressi kohandatud fondide installimine käsitsi

@ Font-face direktiivi kaudu saate oma saidiga ühendada nii ühe kui mitu fonti. Kuid sellel meetodil on oma plussid ja miinused.

Plussid:

  • CSS-i kaudu saate ühendada suvalises vormingus fonte: ttf, otf, woff, svg.
  • Fondifailid asuvad teie serveris – te ei sõltu kolmandate osapoolte teenustest.

Miinused:

  • Iga stiili õige fondiühenduse jaoks peate registreerima eraldi koodi.
  • CSS-i teadmata võite kergesti segi minna.

Kuid see pole tõeline probleem, kui saate lihtsalt kopeeri valmis kood ja kus peate oma väärtused täpsustama.

Märge: Enne alustamist looge oma saidile kindlasti lapseteema. Nii saate oma lapseteemas kõiki muudatusi teha, jättes põhiteema taktitundele, et saaksite seda tulevikus vastavalt vajadusele värskendada.

1. samm: looge fondide kaust

Looge oma lapse teema sees uus kaust „font”: wp-sisu / teemad / teie lapse teema / fondid

2. samm. Laadige allalaaditud fontfailid oma veebisaidile üles

Seda saab teha teie hostingu juhtpaneeli või FTP kaudu.

Lisage kõik fondifailid äsja lisatud fontide kausta: wp-sisu / teemad / teie lapse teema / fondid sa lõid.

3. samm. Importige fonte lapseteemalise stiililehe kaudu

Avage lapseteema fail style.css ja lisage järgmine kood CSS-faili algusesse (pärast alateema kommenteerimist):

@ font-face {
fondiperekond: 'MyWebFont';
src: url ('fonts / WebFont.eot');
src: url ('fonts / WebFont.eot? #iefix') vorming ('embedded-opentype'),
url ('fonts / WebFont.woff') vorming ('woff'),
url ('fonts / WebFont.ttf') vorming ('truetype'),
url ('fonts / WebFont.svg # svgwebfont') vorming ('svg');
kirjasuurus: normaalne;
kirjastiil: tavaline;
}

Kus MyWebFont on fondi nimi ja src-i omaduse (jutumärkides sulgudes olevad andmed) väärtus on nende asukoht (suhtelised lingid). Peame iga stiili eraldi määrama.

Kuna ühendame esmalt tavalise stiili, seadsime fondi kaalu ja fondi stiili omadused normaalseks.

4. samm. Lisamisel kaldkiri, kirjutage järgmine:

@ font-face {
fondiperekond: 'MyWebFont';
src: url ('font / WebFont-Italic.eot');
src: url ('fonts / WebFont-Italic.eot? #iefix') vorming ('embedded-opentype'),
url ('fonts / WebFont-Italic.woff') vorming ('woff'),
url ('fonts / WebFont-Italic.ttf') vormingus ('truetype'),
url ('font / WebFont-Italic.svg # svgwebfont') vorming ('svg');
kirjasuurus: normaalne;
kirjastiil: kaldkiri;
}

Seal, kus kõik on sama, lisasime fondi stiili atribuudid kaldkirjaga.

5. samm. Rasvases kirjas fondi lisamiseks lisage järgmine kood:

@ font-face {
fondiperekond: 'MyWebFont';
src: url ('font / WebFont-Bold.eot');
src: url ('fonts / WebFont-Bold.eot? #iefix') vorming ('embedded-opentype'),
URL-i ('font / WebFont-Bold.woff') vorming ('woff'),
url ('fonts / WebFont-Bold.ttf') vorming ('truetype'),
url ('font / WebFont-Bold.svg # svgwebfont') vorming ('svg');
kirjasuurus: paks;
kirjastiil: tavaline;
}

Kui me seadsime fondi kaalu omaduse paksuks.

Pidage kindlasti meeles, et peate iga stiili jaoks märkima failifailide õige asukoha.

6. samm. Paksus kaldkirjas ühendamiseks tippige järgmine tekst.

@ font-face {
fondiperekond: 'MyWebFont';
src: url ('font / WebFont-Italic-Bold.eot');
src: url ('fonts / WebFont-Italic-Bold.eot? #iefix') vorming ('embedded-opentype'),
url ('font / WebFont-Italic-Bold.woff') vorming ('woff'),
url ('fonts / WebFont-Italic-Bold.ttf') vorming ('truetype'),
url ('font / WebFont-Italic-Bold.svg # svgwebfont') vorming ('svg');
kirjasuurus: paks;
kirjastiil: kaldkiri;
}

Noh, see on kõik �� Nüüd olete oma veebisaidiga ühendanud neli kirjastiili.

Kuid on üks märkus – seda fondiühendust kuvatakse Internet Explorer 8-s valesti. Lohutuseks on see, et IE8 kasutab endiselt väga vähe inimesi.

WordPressi kohandatud fondide pakkimine

Mis on esimene, mida kasutajad teie saiti külastades märkavad? Õige, selle disain! Suurem osa kujundusest toetub ilusate fondide õigele kasutamisele. Nii et peate hoolitsema oma saidi fondi kujunduse eest. Uue kirjastiili manustamiseks lisage kood või kasutage mõnda ülalnimetatud pistikprogrammidest. Milline viis te selle valite, on teie enda otsustada.

Veenduge, et te ei kasutaks samal saidil rohkem kui kahte fonti. Kuna rohkem kohandatud fonte saidile lisate, seda aeglasemaks muutub saidi kiirus.

See on kõik, kommenteerige julgesti. 

Samuti kuuleme hea meelega, millise valiku valisite oma veebisaidile kohandatud fondi lisamiseks ja kust leiate oma fondi.

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