Kohandatud fondide lisamine WordPressi


Kuidas WordPressile kohandatud fonte lisada


WordPressi saidi jaoks õige fondi valimine on veebidisaini ja veebisaidi kaubamärgi keskne osa.

Nagu värvid, pildid ja muud elemendid, tüpograafia mängib suurt osa kuidas külastajad teie saiti tajuvad.

Õnneks on WordPressi fondid üks paljudest asjadest, mida saate vabalt kohandada. Saate oma WordPressi saidil kasutada peaaegu kõiki tasuta kohandatud fonte.

Katame kõik, mida peate WordPressi fondide kohta teadma:

  • A) Kuidas lisada kohandatud fonte WordPressi (käsitsi)
  • B) Kuidas lisada kohandatud fonte WordPressi (plugina kaudu)
  • Miks kasutada WordPressis kohandatud fonte?
  • Kust leida kohandatud fonte
  • Järeldus

A) Kuidas kohandatud fonte WordPressile käsitsi lisada

Kui soovite kohandatud fonte käsitsi WordPressi lisada, on teil kolm peamist suvandit: HTML, JavaScript ja CSS. Igal meetodil on plusse ja miinuseid ning see, milline neist on teie jaoks õige, sõltub teie seadistusest. Ärge muretsege, me käsitleme neid kõiki üksikasjalikult.

1. CSS ja @import

Alustame kõige vähem soovitatud meetodiga. Kui kavatsete installida kohandatud kirjatüüpe Google Fontist, võisite märgata, et sellel on vahekaart märgistatud @import. Teenus annab teile tüki CSS-koodi.

google fontide vahekaarti importida

Võite võtta selle nii, nagu see on, ja sisestada selle päisesse (lähemalt allpool) või kopeerida ilma >sulud teie teema algusesse (või veel parem, kui lapseteema) stiil.css faili.

/ *
Teema nimi: Kakskümmend seitseteist last
Teema URI: https://wordpress.org/themes/twentyseventeen/
Mall: kahekümne seitseteist
Autor: WordPressi meeskond
Autori URI: https://wordpress.org/
Versioon: 1.0

* /

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


/ * siia läheb täiendav CSS * /

Nii laaditakse font teie saidile stiililehelt. See tundub lihtne lahendus, eks? Miks on see siis kõige vähem soovitatav?

Põhjus on jõudlusprobleemid. Kasutades @import pole enam soovitatav viis, sest see takistab brauseritel alla laadimast korraga mitu stiililehte. Tagajärg: aeglasemad lehe laadimisajad. Hoidke sellest eemal, kui saate.

2. WordPressi mallifaili kasutamine

Teine meetod fontide hankimiseks oma saidile on fondiraamatukogude pakutud koodi võtmine ja nende oma saidile kopeerimine header.php mallifail. Enamikul standardsetel WordPressi teemadel on see olemas.

Asetage see kindlasti kuskile ja sulgudes. Nii laaditakse teie font iga lehe laadimisel.

sisestage google fontide kood WordPressi päisesse

Kui kasutate lapseteemat, kopeerige kindlasti vanemateema header.php faili lapseteemakataloogi ja seal muudatusi teha.

Mõne teemaga on kaasas sätted, mis võimaldavad teil päise ja jaluse jaoks kohandatud koodi lisada taustaprogrammi kaudu. See on ka otstarbekas võimalus.

3. Kasutades @ font-face

Siiani oleme rääkinud ainult sellest, kuidas kasutada WordPressis kohandatud fonte, mida hostitakse kusagil mujal, nimelt Google'i ja Adobe'i serverites. Kuid fonte on võimalik hostida ka oma saidil ja pakkuda neid sealt külastajatele brauseritele.

Selleks peate esmalt alla laadima kõnealuse fondi. Kas mäletate allalaadimisnuppu Google Fontsis? See saab nüüd käepäraseks. Teised pakkujad võimaldavad teil ka fonte alla laadida.

Kui teete, veenduge, et saate selle veebifondivormingus. See tähendab TTF, OTF või WOFF. Selle kohta leiate lisateavet siin. Kui teil pole õiget veebifondivormingut, saate seda ka kasutada seda teenust fondi teisendamiseks toetatuks.

Kui olete oma fondifailid valmis, peate need FTP kaudu oma WordPressi saidile üles laadima. Hea koht nende hoidmiseks on teie lapseteema alamkataloogis nimega fonte (loominguline, me teame).

Pärast seda peate fondi laadima oma laadilehele @ font-face. See näeb välja järgmine:

@ font-face {
fondiperekond: Roboto;
src: url (http: //localhost/wordpress/wp-content/themes/twentyseventeen-child/fonts/Roboto-Regular.ttf);
kirjasuurus: normaalne;
}

Ärge unustage asendada fondi nime ja aadressi, mis asub teie saidil. Pärast seda saab teie uus kohandatud font kasutada.

Kuid see pole ka parim lahendus, eriti jõudluse osas. Google'i serverid on tõenäoliselt kiiremad kui teie serverid ja seetõttu on kohandatud fondide laadimine sealt tõenäoliselt parem lahendus.

4. Fontide võltsimine - „WordPress Way”

Kui soovite tõesti WordPressile kohandatud fonte õigesti lisada, kasutate oma funktsioonid.php fail (teie aktiivse teema kataloogi sees) ja funktsioon  wp_enqueue_script või wp_enqueue_style.

Nende abiga saame võtta fontsaidide pakutavad koodilõigud. Selle asemel, et neid faili kopeerida, lisame nad funktsiooni kaudu päisesse.

Mis vahet on wp_enqueue_script ja wp_enqueue_style? Nagu nende nimed näitavad, on üks skriptide lisamiseks, üks stiililehtede lisamiseks. Milline neist on õige kasutada, sõltub sellest, kuidas kohandatud fonte nende allikast pakutakse.

Näiteks Google Fonts annab teile stiililehtedena fonte. Sel juhul lisate need oma WordPressi saidile järgmisel viisil:

funktsioon 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');

Vastupidiselt sellele on Adobe Edge Web Fontide fondid JavaScript. Seetõttu näeks kood nende saidil valimiseks välja selline:

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

add_action ('wp_enqueue_scripts', 'add_adobe_fonts');

Kas see polnud nii keeruline, oli see nii? Lisaks saate WordPressi moodi kasutamise eest lisapunkte.

5. Helistage oma stiililehe kohandatud fondidele

Nüüd, kui fontid on teie saidile lisatud, saate neid ametlikult kasutada. Selleks jääb üle vaid lisada oma stiililehele uue fondi deklaratsioon. Näiteks päisesiltide fondi muutmiseks kasutaksite midagi sellist:

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

Märge: Pöörake tähelepanu sellele, kuidas teie kasutatav teenus määrab teie fondide CSS-i deklaratsiooni. Näib, et meie testimissaidil ei õnnestunud Adobe Edge Web Fonte tööle panna, kuna nad kutsuvad CSS-is Open Sans'i avatud sans vastandina 'Open Sans' Google Fontsis.

See selleks. Nüüd teate, kuidas WordPressile kohandatud fonte käsitsi lisada. Õnnitlege ennast, see on mingi järgmise taseme teadmine! Ilmselt on samad toimingud võimalikud pistikprogrammide kaudu. Sellest me räägime järgmisena.

B) Kuidas lisada kohandatud fonte WordPressi plugina kaudu

WordPressi sfäär poleks see, mis see oleks, kui kohandatud fondide platvormile lisamiseks poleks mitu pistiklahendust. Vaatame, kuidas kasutada Lihtsad Google'i fondid, mis on selle piirkonna üks populaarsemaid pistikprogramme.

1. Installige pistikprogramm

Esimene samm on pistikprogrammi installimine. Selleks minge edasi Pistikprogrammid> Installi uus. Seejärel otsige pistikprogrammi nime. Klõpsake otsingutulemustes nuppu Installeeri nüüd ja aktiveerige pistikprogramm, kui see teie saidil on.

2. Lisage / muutke oma saidil fonte

Kui pistikprogramm on aktiivne, leiate uue menüüelemendi nimega Tüpograafia all Välimus> Kohanda.

tüpograafiamenüü WordPress-kohandajas

Kui klõpsate sellel ja valite Vaikimisi tüpograafia, leiate juhtelementide loendi oma lõikude ja pealkirjade fondi muutmiseks.

google fontide lihtsad seaded WordPress-kohandajas

Nende kasutamine on tõesti lihtne. Klõpsake lihtsalt seal olevat rippmenüüd Redigeeri fonti selle saidi selle osa jaoks, mille jaoks soovite seda muuta. See annab teile juurdepääsu sellele menüüle:

google fontide lihtne muuta fonti

Siin on kõige olulisem osa all Fondiperekond. Siin saate valida uue fontüübi kogu Google Font'i teegi hulgast (kasutage Skript / alamkomplekt piirata fontide valimist erimärkidega).

Fondid on järjestatud tavaliste, serif-, sans-serif-, displei-, käsitsikirja- ja monospace-fontide järgi. Kuid võite neid ka lihtsalt nime järgi otsida.

Kui klõpsate fonti, saate paremal reaalajas muudatusi eelvaatena vaadata.

muudetud kohandatud font lihtsate google-fontide korral

3. Seadistage font

Kui olete fondi valinud, on tüpograafia kohandamiseks palju võimalusi.

Esiteks saate sama nime menüüst muuta fondi kaalu / stiili. See kontrollib tähtede paksust.

Lisaks all Teksti kaunistamine, saate lisada allajoonimise, läbikriipsutamise ja ülajoone. Teksti teisendamine võimaldab teil seada selle ka suurtäheks, kõigiks väiketähtedeks või suurtäheks suurtähtedega. All Välimus Üleval vahekaardil saate juhtida ka fondi värvi, taustavärvi, fondi suurust, rea kõrgust ja tähtede vahekaugust.

välimusseaded hõlpsates google-fontites

Lõpuks, Positsioneerimine saate muuta muid sätteid, nagu veeris, polster, ääris, äärise raadius ja kuvar.

positsioneerimisseaded hõlpsates google fontites

Lühidalt, peaksite saama oma saidil olevaid fonte täielikult oma maitse järgi kohandada. Lihtne, kas pole? Ärge unustage lüüa Salvesta ja avalda ülaosas, kui olete oma muudatustega rahul.

See ei tööta. Mida ma teen?

Mõnikord ei saa te oma saidil mõnda fonti muuta. See juhtub tavaliselt siis, kui kasutatava teemaga kaasnevad mittestandardsed CSS-i klassid ja nende stiilimiseks valijad.

Näiteks kahekümne kuueteistkümne teema puhul pole ajaveebipostituste pealkirjad lihtsalt määratletud kui H1, vaid neil on ka CSS-klass, mida nimetatakse .kanne-pealkiri. Sel põhjusel ei saa pistikprogramm neid muuta.

Selle probleemi lahendamiseks peate looma nn fondi juhtimine all Seadistused> Google Fonts.

lisage fontide juhtimine google'i hõlpsates fondides

CSS-selektorid saate seostada uue juhtimise ja vajaduse korral jõu alistamisega. Kui olete seda teinud, on uus fondi juhtimine täiendava suvandina saadaval WordPressi kohandajas jaotises Teema tüpograafia. Lihtne.

Muud kohandatud fondid WordPressi pluginad

Kohandatud fontide lisamiseks on saadaval ka muid WordPressi pluginaid:

  • Kasutage suvalist fonti - See aitab teil üleslaaditud fonte kasutada ilma CSS-ita. See majutab fonte teie enda serverisse ja pakub ka fondivormingute teisendustööriistu.
  • Typekiti WordPressi fondid - Kasutage Adobe'i fonte Typekit teenus (milleks peate registreeruma). See võimaldab sisestada manuskoode ja kohandatud CSS-i otse pistikprogrammi.
  • TK Google Fonts - Alternatiivne lahendus Google'i fondide manustamiseks, mis viib Google'i fontide kogemuse suures osas üle WordPressi taustaprogrammi. Proovige eelvaate ja kohandatud tekstiga fonte, seejärel muutke seda WordPress Customizeris.

Miks kasutada oma WordPressi veebisaidil kohandatud fonte??

Tüpograafia on omaette teadus ja me ei saa siin teile täielikku kursust fontide kasutamise kohta veebikujunduses pakkuda. Lõppude lõpuks ei puuduta see ainult fonti, vaid ka selle suurust, viltust, paksust ja paljusid muid asju. Kuid meie saab kajastage, miks on WordPressi saidil kohandatud fondide kasutamine hea mõte.

1. Tüpograafia on osa esmamuljest

Esiteks mõjutab teie kasutatav font palju teie saidi tajumist. Kas teie sait on lõbus ja mänguline? Kas olete äriprofessionaal? Külastajad otsustavad selle ühe pilguga ja teie tüpograafial on nende tajumisel suur roll.

2. Fontide mõju on palju suurem, kui te arvate

See võib mõjutada teie võimet õppida, tekste meelde jätta ja isegi meeleolu mõjutada.

Näiteks ühes uurimistöö, märgiti, et kui soovite mõne teksti lugemiseks kuluvat aega pikendada, peaksite kasutama serifi fonti. Kui soovite aga lühikese aja jooksul rohkem lugeda, peaksite minema üle sans-serif-fondi.

Veel üks uuring näitas inimestele samu treenimisjuhiseid erinevates kirjatüüpides. Seejärel palusid nad osalejatel hinnata, kui kaua võtab neil juhiste täitmiseks aega. Huvitaval kombel arvasid keerukama fondi kasutajad, et see võtab kauem aega kui lihtsama kirjaga grupp. Selle tagajärjel järgisid nad harjutusprogrammi vähem.

Kust leida kohandatud fonte

1. Kasutage kohandatud tüpograafia leidmiseks Google Fonte

Esimene teenus, mida vaatame, on Google'i fondid. Nagu nimigi ütleb, on see Google'i teenus, mis pakub üle 800 erineva fondi. Tasuta kasutamiseks. Igaühele.

Seda saab kasutada järgmiselt.

2. Leidke õige font

Esmakordselt Google'i fondide lehele minnes (tippige see lihtsalt Google'i otsingusse) näete järgmist:

kuidas lisada kohandatud fonte WordPressi google fontide kodulehele

Kasutajaliides on loodud eesmärgi jaoks sobiva fondi leidmiseks. Kui teil on font juba meeles, võite selle nime tippida paremas servas olevale otsinguväljale.

Kui ei, siis võite fonte filtreerida mitmel erineval viisil, näiteks kategooria järgi:

  • Serif - Tähendab fonte, mille lõpus on sirge sirge joon, nagu Times New Roman.
  • Sans-Serif - Lihtsad kirjamärgid ilma viperusteta, nagu Helvetica. Sellel veebisaidil kasutatavad fondid on selle näide.
  • Kuva - kirjatüübid, mida saab kasutada suuremates suurustes, näiteks pealkirjad.
  • Käekiri - Kas soovite, et teie tüpograafia näeks välja selline, nagu see oleks käsitsi kirjutatud? Siis see on teie seade.
  • Monospace - tüpograafia, kus kõik märgid hõivavad sama ruumi, nagu nii.

Muud filtrid hõlmavad järgmist:

  • Sorteerimine - Sorteeri fondid pärast trendimist, populaarsust, kuupäeva lisamist või tähestiku järjekorda.
  • Keeled -Piirake oma fondi valikut keeltega, mida pole kirjutatud ladina tähestikus, näiteks araabia, tai või vietnami.
  • Hulk stiile -Valige, kui palju saadaolevaid stiile teil on vaja, mis tähendab, kas font on saadaval erineva paksusega, kaldkirjas, paksus kirjas ja mujal.
  • Paksus - Valige oma fondi soovitud paksus.
  • Kaldus - Sama kui paksus, kuid kaldu. See ulatub sirgjoonest peaaegu horisontaalselt.
  • Laius - Filtreerige fonte nende tähtede laiuse ja vahekauguse järgi.

Mis tahes filtrite rakendamisel muutuvad teie otsingutulemid reaalajas. Vasakul pool näete oma kategoorias saadaolevaid fonte ja näidete lauseid.

Kui hõljutate kursorit fondi kohal, saate ülaosas asuvaid rippmenüüsid kasutada, et Google Fonts kuvaks näidislõigu, kogu tähestiku või numbrid. Võite klõpsata lihtsalt lauseväljal ja kirjutada mida iganes soovite.

redigeeri näidisteksti google fontites

Lisaks on ka fonti stiili ja suuruse muutmise võimalusi. Kui teete muudatusi, saate ka võimaluse neid kõikides otsingutulemustes rakendada. Lõpuks vaadake fondi üksikasjade lehte, klõpsates Vaadake näidist.

fondi üksikasjade leht google fontites

3. Lisage oma kollektsiooni fonte

Kui teile meeldib mõni font, saate selle kollektsiooni lisamiseks kasutada paremas ülanurgas olevat punast plussmärki. Nii avatakse allosas menüü, kus näete kõiki valitud fonte.

google fontites valitud fondid

Pange tähele, et saate lisada mitu fondiperekonda. See on mõttekas näiteks siis, kui valite ühe oma kehaeksemplari ja teise rubriikide jaoks.

4. Kohandage fondi sätteid

Kui olete oma kollektsiooniga rahul, klõpsake alumises menüüs. Nii avaneb see ekraan:

font seaded google fontites

Nagu näete, leiate oma saidil fontide manustamiseks ja kasutamiseks mõned kooditükid. See muutub hiljem oluliseks. Praegu klõpsake vahekaardil, mis ütleb Kohanda. See viib teid sellesse menüüsse:

kohandage fonte google fontites

Siin saate valida kõnealuste fontide stiilid. See on oluline, kui soovite kasutada erineva suurusega fonte, mis sageli juhtub.

Kuid olge ettevaatlik: mida rohkem stiile teie sait peab laadima, seda aeglasemalt see aeglustub (Google Fonts annab isegi paremas ülanurgas ülevaate praeguse kollektsiooni laadimiskiirusest). Niisiis, mõelge sellele, mida te tegelikult vajate, ja valige ainult see. Muide, WordPressi kiirendamiseks on veel mitu võimalust.

Kui vajate mõnda muud keelt peale tavalise ladina tähestiku, valige see kindlasti ka alt.

valige google fontites font keeled

Lisaks sellele peate teadma ainult kahte nooleikooni ülaosas.

google fontides allalaadimis- ja jagamisnupp

Vasakul olev võimaldab teil oma fontikogu eelvaadata ja jagada. Kui otsustate seda teha, avab see laiendatud lehe, kuhu saate sisestada näidisteksti ja näha seda korraga kõigis fondides. Seda lehte on hea ka inimestega jagada.

Veel olulisem on selle kõrval olev allalaadimisnupp. Sellel klikkides saate alla laadida fontfailid, et neid töölauaarvutis kasutada (näiteks Photoshopis). Kasutage Skyfonts et neid pidevalt kursis hoida.

Hiljem näitame teile ka viisi, kuidas neid faile oma serverisse üles laadida ja fonte hostida otse oma saidil. Pidage seda tuleviku jaoks meeles. Praegu näitame teile teist, sarnast fondi teeki.

Täiendav allikas kohandatud fondide jaoks

  • Soovitame vähemalt 15 veebiturvalist fonti

Ülaltoodu abil peaksite saama endale midagi leida. Viimane näpunäide - kui te ei tea, kuidas fonte õigesti ühendada, siis kasutage Fondi paar kus disainerid on teie jaoks jalavarred teinud.

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