Pielāgotu fontu pievienošana WordPress


Kā pievienot pielāgotus fontus WordPress


Pareizā fonta izvēle savai WordPress vietnei ir galvenā tīmekļa dizaina un vietņu zīmolrades sastāvdaļa.

Tāpat kā krāsas, attēli un citi elementi, tipogrāfija spēlē lielu lomu kā jūsu vietni uztver apmeklētāji.

Par laimi, WordPress fonti ir viena no daudzajām lietām, kuras varat brīvi pielāgot. Jūs varat izmantot gandrīz jebkuru bezmaksas pielāgotu fontu savā WordPress vietnē, kuru vēlaties.

Mēs apskatīsim visu, kas jums jāzina par WordPress fontiem:

  • A) Kā pievienot pielāgotos fontus WordPress (manuāli)
  • B) Kā pievienot pielāgotus fontus WordPress (izmantojot spraudni)
  • Kāpēc lietot Custom Fonts vietnē WordPress
  • Kur atrast pielāgotus fontus
  • Secinājums

A) Kā manuāli pievienot pielāgotos fontus WordPress

Runājot par pielāgotu fontu pievienošanu WordPress ar roku, jums ir trīs galvenās iespējas: HTML, JavaScript un CSS. Katrai metodei ir plusi un mīnusi, un kurš no jums ir piemērots, ir atkarīgs no iestatīšanas. Neuztraucieties, mēs detalizēti apskatīsim katru no tām.

1. CSS un @import

Sāksim ar vismazāk ieteikto metodi. Ja plānojat instalēt pielāgotos burtveidolus no Google Fonts, iespējams, pamanījāt, ka tam ir cilne ar apzīmējumu @import. Pakalpojums dod jums CSS koda gabalu.

importēt cilni google fontos

Varat to ņemt tādu, kāds tas ir, un ievietot to galvenē (vairāk par to zemāk), vai arī kopēt bez >iekavās jūsu tēmas sākums (vai, vēl labāk, bērna tēma) stils.css failu.

/ *
Tēmas nosaukums: Divdesmit septiņpadsmit bērns
Tēmas URI: https://wordpress.org/themes/twentyseventeen/
Veidne: divdesmit sešpadsmit
Autors: WordPress komanda
Autora URI: https://wordpress.org/
Versija: 1.0

* /

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


/ * šeit dodas papildu CSS * /

To darot, fonts jūsu vietnē tiks ielādēts no stila lapas. Tas šķiet vienkāršs risinājums, vai ne? Kāpēc tas ir tad vismazāk ieteicams?

Iemesls ir izpildes problēmas. Izmantojot @import vairs nav ieteicams ceļš, jo tas pārlūkprogrammām neļauj lejupielādēt vairākas stila lapas vienlaikus. Sekas: lēnāks lapu ielādes laiks. Palieciet prom no tā, ja varat.

2. Izmantojot WordPress veidnes failu

Otra metode, kā iegūt fontus jūsu vietnē, ir ņemt kodu, ko nodrošina fontu bibliotēkas, un nokopēt tos savā header.php veidnes fails. Lielākajai daļai standarta WordPress motīvu tā ir.

Pārliecinieties, ka tas atrodas kaut kur starp un iekavās. Tādā veidā jūsu fonts tiks ielādēts ikreiz, kad tiek ielādēta lapa.

ievadiet google fontu kodu WordPress galvenē

Ja jūs izmantojat bērnu motīvu, noteikti kopējiet vecāku motīvu header.php ievietojiet bērnu motīvu direktorijā un veiciet izmaiņas tajā.

Dažām tēmām ir iestatījumi, kas ļauj galvenei un kājenei, izmantojot aizmugures versiju, pievienot pielāgotu kodu. Šī ir arī reāla iespēja.

3. Izmantojot @ font-face

Līdz šim mēs esam runājuši tikai par to, kā WordPress lietot pielāgotos fontus, kas tiek mitināti kaut kur citur, proti, Google un Adobe serveros. Tomēr ir arī iespējams savā vietnē mitināt fontus un piedāvāt tos apmeklētāju pārlūkprogrammām no turienes.

Lai to izdarītu, vispirms ir jālejuplādē attiecīgais fonts. Vai atcerieties lejupielādes pogu vietnē Google Fonts? Tas tagad noderēs. Citi pakalpojumu sniedzēji arī ļauj lejupielādēt fontus.

Kad to darāt, pārliecinieties, vai esat to saņēmis tīmekļa fonta formātā. Tas nozīmē TTF, OTF vai WOFF. Jūs atradīsit vairāk informācijas par to šeit. Ja jums nav pareizā tīmekļa fonta formāta, varat arī to izmantot šo pakalpojumu lai pārveidotu savu fontu atbalstītā.

Kad fontu faili ir gatavi, tie ir jāaugšupielādē WordPress vietnē, izmantojot FTP. Piemērota vieta, kur tos uzglabāt, atrodas jūsu bērna nosauktajā apakšdirektorijā fontus (radoši, mēs zinām).

Pēc tam fonts savā stila lapā jāielādē caur @ font-face. Tas izskatās šādi:

@ font-face {
fontu saime: Roboto;
src: url (http: //localhost/wordpress/wp-content/themes/twentyseventeen-child/fonts/Roboto-Regular.ttf);
burtu svars: parasts;
}

Atcerieties nomainīt fonta nosaukumu un tā atrašanās vietas adresi savā vietnē. Pēc tam jūsu jaunais pielāgotais fonts būs izmantojams.

Tomēr tas arī nav labākais risinājums, īpaši veiktspējas ziņā. Iespējams, ka Google serveri darbojas ātrāk nekā jūsu serveri, tāpēc, iespējams, labāks risinājums būs pielāgotu fontu ielādēšana no turienes.

4. Fontu piespiešana - “WordPress Way”

Ja jūs patiešām vēlaties pareizi pievienot WordPress pielāgotos fontus, jūs izmantosit savu funkcijas.php fails (pašreiz aktīvās motīva direktorijā) un funkcija  wp_enqueue_script vai wp_enqueue_style.

Ar viņu palīdzību mēs varam ņemt koda fragmentus, ko nodrošina fontu vietnes. Tomēr tā vietā, lai kopētu tos failā, mēs tos pievienosim galvenē, izmantojot funkciju.

Kāda ir atšķirība starp? wp_enqueue_script un wp_enqueue_style? Kā norāda viņu vārdi, viens ir paredzēts skriptu pievienošanai, otrs - stilu lapām. Kurš ir piemērots lietošanai, ir atkarīgs no tā, kā pielāgotie fonti tiek nodrošināti no to avota.

Piemēram, Google Fonts piešķir jums fontus kā stila lapas. Tādā gadījumā jūs pievienojat tos savai WordPress vietnei šādā veidā:

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

add_action ('wp_enqueue_scripts', 'add_google_fonts');

Pretstatā Adobe Adobe Edge Web Fonti fonti tiek uzskatīti par JavaScript. Tāpēc, lai tos iekodētu savā vietnē, kods izskatās šādi:

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

add_action ('wp_enqueue_scripts', 'add_adobe_fonts');

Vai tas nebija tik grūti, vai ne? Turklāt jūs saņemat papildu punktus par to, kā to izdarīt WordPress veidā.

5. Izsauciet pielāgotos fontus sava stila lapā

Tagad, kad fonti ir pievienoti jūsu vietnei, varat tos oficiāli izmantot. Lai to izdarītu, atliek tikai pievienot stila lapā deklarāciju par jauno fontu. Piemēram, lai mainītu galvenes tagu fontu, jūs izmantojat kaut ko līdzīgu:

h1,
h2,
h3,
h4,
h5,
h6 {
fontu saime: 'Roboto';
}

Piezīme: Pievērsiet uzmanību tam, kā jūsu izmantotais pakalpojums nosaka jūsu fontu CSS deklarāciju. Šķiet, ka mūsu testa vietnē Adobe Edge Web Fonts nevarēja darboties, jo tie izsauc Open Sans CSS ar atklāti sans pretstatā 'Open Sans' vietnē Google Fonts.

Tieši tā. Tagad jūs zināt, kā WordPress manuāli pievienot pielāgotos fontus. Apsveiciet sevi, šīs ir dažas nākamā līmeņa zināšanas! Acīmredzot tās pašas darbības ir iespējamas, izmantojot spraudņus. Par to mēs runāsim nākamreiz.

B) Kā pievienot pielāgotos fontus WordPress caur spraudni

WordPress sfēra nebūtu tāda, kāda tā ir, ja nebūtu vairāku spraudņu risinājumu pielāgotu fontu pievienošanai platformai. Mēs pārdomāsim, kā izmantot Viegli Google fonti, kas ir viens no populārākajiem spraudņiem šajā jomā.

1. Instalējiet spraudni

Pirmais solis ir spraudņa instalēšana. Lai to izdarītu, dodieties tālāk uz Spraudņi> Instalēt jaunu. Pēc tam meklējiet spraudņa vārdu. Meklēšanas rezultātos noklikšķiniet uz Instalēt tagad un aktivizējiet spraudni, tiklīdz tas atrodas jūsu vietnē.

2. Pievienojiet / mainiet fontus savā vietnē

Kad spraudnis ir aktīvs, jūs atradīsit jaunu izvēlnes vienumu ar nosaukumu Tipogrāfija zem Izskats> Pielāgot.

tipogrāfijas izvēlne WordPress pielāgojumprogrammā

Noklikšķinot uz tā un izvēloties Noklusējuma tipogrāfija, atrodat vadības ierīču sarakstu, lai mainītu rindkopu un virsrakstu fontu.

viegli google fontu iestatījumi WordPress pielāgojumprogrammā

To izmantošana ir patiešām vienkārša. Vienkārši noklikšķiniet uz nolaižamās izvēlnes, kur teikts Rediģēt fontu vietnei, kurā vēlaties to mainīt. Tas dod jums piekļuvi šai izvēlnei:

viegli google fonti maina fontu

Šeit vissvarīgākā daļa ir tā, kas atrodas zem Fontu saime. Šeit no visas Google fontu bibliotēkas varat izvēlēties jaunu fonta veidu (izmantojiet Skripts / Apakšveļa ierobežot fontu izvēli ar tiem, kuriem ir īpašas rakstzīmes.

Fonti tiek sakārtoti pēc standarta, serif, sans-serif, displeja, rokraksta un monospace fontiem. Tomēr jūs varat arī vienkārši meklēt tos pēc nosaukuma.

Noklikšķinot uz fonta, labajā pusē varat priekšskatīt izmaiņas reāllaikā.

mainīts pielāgotais fonts viegli google fontos

3. Konfigurējiet fontu

Kad esat izvēlējies fontu, ir daudz iespēju, lai turpinātu pielāgot tipogrāfiju.

Pirmkārt, fonta svaru / stilu var mainīt tā paša nosaukuma izvēlnē. Tas kontrolē burtu biezumu.

Turklāt saskaņā ar Teksta dekorēšana, jūs varat pievienot pasvītrojumu, svītrojumu un pārsvītrojumu. Teksta pārveidošana ļauj arī iestatīt to uz lielajiem burtiem, visiem mazajiem burtiem vai lielajiem burtiem ar katru pirmo burtu. Saskaņā Izskats cilni augšpusē, jūs varat arī kontrolēt fonta krāsu, fona krāsu, fonta lielumu, rindas augstumu un burtu atstarpes.

izskata iestatījumi viegli google fontos

Visbeidzot, Pozicionēšana ļauj mainīt citus iestatījumus, piemēram, malu, polsterējumu, apmali, apmales rādiusu un displeju.

pozicionēšanas iestatījumi viegli google fontos

Īsāk sakot, jums vajadzētu būt iespējai pilnībā pielāgot savas vietnes fontus pēc jūsu vēlmēm. Viegli, vai ne? Neaizmirsti hit Saglabāt un publicēt augšā, kad esat apmierināts ar izmaiņām.

Tas nedarbojas, ko es daru?

Dažreiz jūs nevarat mainīt dažus savas vietnes fontus. Tas parasti notiek, ja jūsu izmantotajai tēmai ir nestandarta CSS klases un atlasītāji to veidošanai.

Piemēram, divdesmit sešpadsmit tēmā emuāru ierakstu nosaukumi nav definēti tikai kā H1, bet tiem ir arī CSS klase ar nosaukumu .ieraksts-nosaukums. Šī iemesla dēļ spraudnis tos nevar mainīt.

Lai novērstu šo problēmu, jums jāizveido tā sauktais fontu vadība zem Iestatījumi> Google fonti.

pievienojiet fontu vadību viegli google fontos

CSS atlasītājus varat saistīt ar jaunu kontroli un spēka pārsniegšanu, ja nepieciešams. Pēc tam, kad esat to izdarījis, jaunā fonta vadība ir pieejama kā papildu opcija WordPress pielāgošanas rīkā sadaļā Tēmas tipogrāfija. Vieglāk par vieglu.

Citi pielāgoti fonti WordPress spraudņi

Pielāgotu fontu pievienošanai ir pieejami arī citi WordPress spraudņi:

  • Izmantojiet jebkuru fontu - Tas palīdz izmantot augšupielādētos fontus bez CSS. Tajā ir fonti uz jūsu servera, kā arī tiek piedāvāti fontu formātu konvertēšanas rīki.
  • Typekit fonti WordPress - Izmantojiet Adobe Adobe fontus Typekit pakalpojums (kas jums jāreģistrējas). Tas ļauj ievadīt iegulšanas kodus un pielāgotu CSS tieši spraudnī.
  • TK Google Fonts - Alternatīvs risinājums Google fontu iegulšanai, kas Google Fonts pieredzi diezgan lielā mērā pārceļ uz WordPress aizmugures versiju. Izmēģiniet fontus ar priekšskatījumu un pielāgotu tekstu, pēc tam mainiet tos WordPress pielāgošanas rīkā.

Kāpēc savā WordPress vietnē izmantot pielāgotus fontus?

Tipogrāfija pati par sevi ir zinātne, un mēs šeit nevarēsim jums sniegt pilnu kursu par fontu izmantošanu tīmekļa dizainā. Galu galā tas attiecas ne tikai uz fontu, bet arī uz tā lielumu, slīpi, biezumu un daudzām citām lietām. Tomēr mēs var apskatiet, kāpēc ir laba ideja izmantot pielāgotos fontus savā WordPress vietnē.

1. Tipogrāfija ir pirmā iespaida daļa

Pirmkārt, jūsu izmantotais fonts daudz ietekmē jūsu vietnes uztveri. Vai jūsu vietne ir jautra un rotaļīga? Vai jūs esat biznesa profesionālis? Apmeklētāji to izlemj viena acu uzmetiena laikā, un viņu tipogrāfijai ir liela loma viņu uztverē.

2. Fonti ietekmē daudz vairāk, nekā jūs domājat

Tas var ietekmēt jūsu spēju mācīties, iegaumēt tekstus un pat ietekmēt jūsu garastāvokli.

Piemēram, vienā izpēte, tika atzīmēts, ka, ja vēlaties palielināt laiku, kas pavadīts kāda teksta lasīšanai, jums jāizmanto serif fonts. Tomēr, ja vēlaties īsā laikā lasīt vairāk, jums vajadzētu pārslēgties uz sans-serif fontu.

Cits pētījums parādīja cilvēkiem vienādas vingrinājumu instrukcijas dažādos burtveidos. Pēc tam viņi lūdza dalībniekus novērtēt, cik ilgs laiks būs vajadzīgs, lai izpildītu minētos norādījumus. Aizraujoši, bet tie, kuriem ir sarežģītāks fonts, uzminēja, ka viņiem tas prasīs vairāk laika nekā grupai ar vienkāršāku fontu. Tā rezultātā viņiem bija mazāka iespēja ievērot vingrinājumu kārtību.

Kur atrast pielāgotus fontus

1. Izmantojiet Google Fonts, lai atrastu pielāgoto tipogrāfiju

Pirmais pakalpojums, kuru mēs apskatīsim, ir Google fonti. Kā norāda nosaukums, tas ir Google pakalpojums, kas piedāvā vairāk nekā 800 dažādus fontus. Brīvi izmantot. Ikvienam.

To var izmantot šādi:

2. Atrodiet labo fontu

Pirmoreiz dodoties uz lapu Google fonti (vienkārši ierakstiet to Google meklēšanā), to redzēsit:

kā pievienot pielāgotos fontus WordPress google fontu mājaslapā

Lietotāja saskarne ir izveidota, lai palīdzētu jums atrast savam mērķim piemērotāko fontu. Ja jums jau ir fonts prātā, varat vienkārši ierakstīt tā nosaukumu meklēšanas laukā labajā pusē.

Ja nē, varat filtrēt fontus dažādos veidos, piemēram, pēc kategorijas:

  • Serifs - Nozīmē fontus ar gludām līnijām beigās, piemēram, Times New Roman.
  • Sans serif - Vienkārši fonti bez savirknēm, piemēram, Helvetica. Šajā vietnē izmantotie fonti ir piemērs.
  • Displejs - burtveidoli, kurus var izmantot lielākos izmēros, piemēram, virsraksti.
  • Rokraksts - Vai vēlaties, lai jūsu tipogrāfija izskatās tā, kā tā ir uzrakstīta ar roku? Tad tas ir jūsu iestatījums.
  • Monospace - tipogrāfija, kurā visas rakstzīmes aizņem vienā telpā, kā šis.

Pie citiem filtriem ietilpst:

  • Šķirošana - Kārtojiet fontus pēc populārākajiem, pievienotajiem datumiem vai alfabēta secībā.
  • Valodas -Ierobežojiet savu fonta izvēli valodās, kas nav rakstītas latīņu alfabētā, piemēram, arābu, taju vai vjetnamiešu.
  • Vairāki stili -Izvēlieties, cik pieejamo stilu jums ir nepieciešams, tas nozīmē, vai fonts ir pieejams dažādos biezumos, slīprakstā, treknrakstā un citur.
  • Biezums - Izvēlieties vēlamo sava fonta biezumu.
  • Slīps - tāds pats kā biezums, bet slīpumam. Tas svārstās no taisna līdz gandrīz horizontālam.
  • Platums - Filtrējiet fontus pēc to burtu platuma un atstarpes.

Lietojot filtrus, meklēšanas rezultāti tiek reāllaikā pielāgoti. Kreisajā pusē redzēsit pieejamos fontus jūsu kategorijā un teikumu piemērus.

Virzot peles kursoru virs fonta, augšdaļā esošās nolaižamās izvēlnes varat izmantot, lai Google Fonts parādītu rindkopas paraugu, visu alfabētu vai ciparus. Jūs varat arī vienkārši noklikšķināt uz teikuma lauka un rakstīt visu, ko vēlaties.

rediģēt teksta paraugu google fontos

Papildus tam ir arī iespējas mainīt fonta stilu un lielumu. Veicot izmaiņas, jūs arī iegūstat iespēju tās piemērot visiem jūsu meklēšanas rezultātiem. Visbeidzot apskatiet fonta informācijas lapu, noklikšķinot Skatīt paraugu.

font font page google fontos

3. Pievienojiet kolekcijai fontus

Ja jums patīk noteikts fonts, augšējā labajā stūrī varat izmantot sarkano plus zīmi, lai to pievienotu kolekcijai. To darot, apakšā tiks atvērta izvēlne, kurā redzami visi jūsu izvēlētie fonti.

fontus, kas atlasīti google fontos

Ņemiet vērā, ka varat pievienot vairāk nekā vienu fontu saimi. Tam ir jēga, piemēram, kad jūs izvēlaties vienu ķermeņa kopijai, bet otru - virsrakstiem.

4. Pielāgojiet fonta iestatījumus

Kad esat apmierināts ar kolekciju, noklikšķiniet uz apakšējās izvēlnes. To darot, tiks atvērts šis ekrāns:

fontu iestatījumi google fontos

Kā redzat, jūs varat atrast dažus koda gabalus, lai vietnē iegultu un izmantotu fontus. Tas vēlāk kļūs svarīgi. Pagaidām noklikšķiniet uz cilnes, kas saka Pielāgot. To darot, jūs nokļūsit šajā izvēlnē:

pielāgojiet fontus google fontos

Šeit jūs varat izvēlēties attiecīgo fontu stilus. Tas ir svarīgi, ja vēlaties izmantot dažādu izmēru fontus, kā tas bieži notiek.

Tomēr esiet piesardzīgs: jo vairāk stilu jūsu vietnei ir jāielādē, jo vairāk tas palēnināsies (Google Fonts pat sniedz norādi par pašreizējās kolekcijas ielādes ātrumu augšējā labajā stūrī). Tāpēc padomājiet par to, kas jums patiešām nepieciešams, un izvēlieties tikai to. Starp citu, ir arī citi veidi, kā jūs varat paātrināt WordPress.

Ja jums ir nepieciešama kāda cita valoda, nevis parastais latīņu alfabēts, noteikti atlasiet to arī apakšā.

atlasiet fontu valodas google fontos

Turklāt viss, kas jums jāzina, ir divas bultiņu ikonas augšpusē.

lejupielādēt un koplietot pogu google fontos

Kreisajā pusē esošais ļauj priekšskatīt un koplietot savu fontu kolekciju. Kad izvēlaties to darīt, tiek atvērta paplašināta lapa, kurā varat ievietot teksta paraugu un redzēt to visos fontos vienlaikus. Šī lapa ir arī laba, lai dalītos ar cilvēkiem.

Svarīgāka ir blakus tai esošā lejupielādes poga. Noklikšķinot uz tā, jūs varat lejupielādēt fontu failus, lai tos izmantotu darbvirsmas mašīnā (piemēram, Photoshop). Izmantojiet Skyfonts lai viņus atjauninātu.

Vēlāk mēs parādīsim arī veidu, kā augšupielādēt šos failus uz jūsu serveri un resursdatoru fontus tieši uz jūsu vietni. Paturiet to prātā nākotnē. Pagaidām mēs jums parādīsim otru, līdzīgu fontu bibliotēku.

Papildu avots pielāgotajiem fontiem

  • Mēs iesakām izmantot vairāk nekā 15 drošus Web fontus

Izmantojot iepriekš minēto, jums vajadzētu būt iespējai kaut ko atrast sev. Pēdējais padoms - ja jūs nezināt, kā pareizi apvienot fontus, izmantojiet Fontu pāris kur dizaineri ir paveikuši jūsu darbu.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me