Bæti sérsniðnum leturgerðum við WordPress


Hvernig á að bæta við sérsniðnum letri við WordPress


Að velja rétt letur fyrir WordPress síðuna þína er aðal hluti af vefhönnun og vörumerki vefsíðna.

Eins og litir, myndir og aðrir þættir, leturfræði á stóran þátt í því hvernig gestir líta á síðuna þína.

Sem betur fer eru WordPress letur eitt af mörgu sem þú getur aðlagað að vild. Þú getur notað nokkurn veginn hvaða ókeypis sérsniðna leturgerð sem þú vilt á WordPress síðuna þína.

Við munum fjalla um allt sem þú þarft að vita um WordPress letur:

  • A) Hvernig á að bæta við sérsniðnum letri við WordPress (handvirkt)
  • B) Hvernig á að bæta við sérsniðnum letri við WordPress (með viðbót)
  • Af hverju að nota sérsniðnar leturgerðir á WordPress
  • Hvar er hægt að finna sérsniðnar leturgerðir
  • Niðurstaða

A) Hvernig á að bæta við sérsniðnum letri við WordPress handvirkt

Þegar það kemur að því að bæta við sérsniðnum letri við WordPress fyrir hönd, þá hefur þú þrjá helstu valkosti: HTML, JavaScript og CSS. Það eru kostir og gallar við hverja aðferð og hver rétt er fyrir þig fer eftir skipulagi þínu. Ekki hafa áhyggjur, við munum fara í gegnum hvert þeirra í smáatriðum.

1. Notkun CSS og @flytja inn

Við skulum byrja á aðferðinni sem mælt er með. Ef þú ætlar að setja upp sérsniðin leturgerð frá Google leturgerðum gætirðu tekið eftir því að það er með flipa merktan @flytja inn. Þjónustan gefur þér stykki af CSS kóða.

innflutningsflipi í google leturgerðum

Þú getur annað hvort tekið það eins og það er og sett það í hausinn þinn (meira um það hér að neðan) eða afritað það án >sviga til upphafs þemu þinnar (eða enn betra, þema barna) style.css skjal.

/ *
Þemaheiti: Tuttugu sautján barn
Þema URI: https://wordpress.org/themes/twentyseventeen/
Snið: tuttugasta
Höfundur: WordPress teymið
Höfundur URI: https://wordpress.org/
Útgáfa: 1.0

* /

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


/ * viðbótar CSS fer hingað * /

Ef þú gerir það mun hlaða letrið inn á síðuna þína úr stílblaði. Það virðist vera einföld lausn, ekki satt? Af hverju er þá minnst mælt með því?

Ástæðan er afkomumál. Að nota @flytja inn er ekki lengur mælt með því að fara því það kemur í veg fyrir að vafrar sæki nokkur stílblöð í einu. Afleiðingin: hægari hleðslutími síðna. Vertu í burtu frá því ef þú getur.

2. Notkun WordPress sniðmátaskrár

Önnur aðferð til að fá letrið á síðuna þína er að taka kóðann sem leturbókasöfnin bjóða upp á og afrita þau á haus.php sniðmátaskrá. Flest venjuleg WordPress þemu hafa það.

Gakktu úr skugga um að setja það einhvers staðar á milli og sviga. Þannig hleðst letrið þitt inn þegar blaðsíða er hlaðin.

settu inn Google letur kóða í wordpress haus

Ef þú ert að nota barn þema, vertu viss um að afrita foreldra þemað haus.php skrá í þemavistun barnsins og gerðu breytingarnar þar.

Sum þemu eru með stillingum sem gera þér kleift að bæta sérsniðnum kóða við hausinn og fótinn í gegnum stuðninginn. Þetta er líka raunhæfur valkostur.

3. Notkun @ font-face

Enn sem komið er höfum við aðeins talað um hvernig eigi að nota sérsniðnar leturgerðir í WordPress sem eru hýst annars staðar, nefnilega netþjóna Google og Adobe. Hins vegar er einnig mögulegt að hýsa letur á eigin síðu og bjóða þeim vafra gesta þaðan.

Til að gera þetta þarftu fyrst að hala niður umrædda leturgerð. Manstu eftir niðurhnappinum á Google leturgerðum? Sá mun verða handlaginn núna. Aðrir veitendur leyfa þér einnig að hlaða niður letri.

Þegar þú gerir það skaltu ganga úr skugga um að þú fáir það á leturgerðarsniðinu. Það þýðir TTF, OTF eða WOFF. Þú munt finna frekari upplýsingar um það hér. Ef þú hefur ekki rétt leturgerð á vefnum geturðu líka notað það þessa þjónustu til að umbreyta letri þínu í stuðning.

Þegar þú hefur leturgerðirnar þínar tilbúnar þarftu að hlaða þeim inn á WordPress síðuna þína í gegnum FTP. Góður staður til að geyma þá er í undirskrá yfir þemað barnsins sem heitir letur (skapandi, við vitum).

Eftir það þarftu að hlaða letrið í sniðmátinu þínu í gegnum @ font-face. Svona lítur það út:

@ font-face {
leturfjölskylda: Roboto;
src: url (http: //localhost/wordpress/wp-content/themes/twentyseventeen-child/fonts/Roboto-Regular.ttf);
leturþyngd: eðlilegt;
}

Mundu að skipta um nafn leturs og heimilisfangs fyrir staðsetningu þess á eigin síðu. Eftir það verður nýja sérsniðna letrið þitt nothæft.

Samt sem áður er þetta ekki besta lausnin, sérstaklega árangursmikil. Netþjónar Google eru líklega hraðari en þínir og því er líklega betri lausnin að hlaða sérsniðin letur þaðan.

4. Að nota leturgerðir - „WordPress leiðin“

Ef þú vilt sannarlega bæta við sérsniðnum letri við WordPress á réttan hátt notarðu þitt aðgerðir.php skrá (í skránni yfir virka þema þitt) og aðgerðina  wp_enqueue_script eða wp_enqueue_style.

Með hjálp þeirra getum við tekið kóðabitana sem leturvefsíðurnar bjóða upp á. Í staðinn fyrir að afrita þær í skrá munum við bæta þeim við hausinn í gegnum aðgerð.

Hver er munurinn á milli wp_enqueue_script og wp_enqueue_style? Eins og nöfn þeirra gefa til kynna er eitt til að bæta við forskriftum, einu fyrir stílblöð. Hvaða rétt er að nota veltur á því hvernig sérsniðnar leturgerðir þínar eru fengnar frá uppruna sínum.

Til dæmis gefur Google Fontur þér letur sem stílblöð. Í því tilfelli myndirðu bæta þeim við WordPress síðuna þína á þennan hátt:

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

Öfugt við það eru leturgerðir frá Adobe Edge Web Fontur sem JavaScript. Þess vegna, til að setja þá á síðuna þína, myndi kóðinn líta svona út:

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

add_action ('wp_enqueue_scripts', 'add_adobe_fonts');

Var það ekki svo erfitt, var það? Auk þess færðu aukastig fyrir að gera það á WordPress hátt.

5. Hringdu í sérsniðnar leturgerðir í sniðmátinu þínu

Nú þegar letrið hefur verið bætt við síðuna þína geturðu notað þau opinberlega. Til að gera það er það eina sem er eftir að bæta við yfirlýsingu fyrir nýja letrið í sniðmátinu þínu. Til dæmis, til að breyta letri fyrir fyrirsögn merkimiða, myndir þú nota eitthvað svona:

h1,
h2,
h3,
h4,
h5,
h6 {
leturfjölskylda: 'Roboto';
}

Athugasemd: Athugaðu hvernig þjónustan sem þú notar tilgreinir CSS yfirlýsingu fyrir leturgerðir þínar. Á prufusíðunni okkar gátum við að því er virðist ekki fá Adobe Edge Web Fontur til að virka vegna þess að þeir kalla Open Sans í CSS með opin-sans öfugt við 'Opna Sans' í Google leturgerðum.

Það er það. Þú veist nú hvernig á að bæta við sérsniðnum letri við WordPress handvirkt. Til hamingju, þetta er einhver þekking á næsta stigi! Augljóslega eru sömu aðgerðir mögulegar með viðbótum. Það er það sem við munum tala um næst.

B) Hvernig á að bæta við sérsniðnum leturgerðum við WordPress með tappi

WordPress kúlan væri ekki það sem það er ef það væru ekki nokkrar viðbótarlausnir til að bæta við sérsniðnum letri á pallinn. Við munum fara yfir hvernig á að nota Auðvelt Google leturgerðir, sem er ein vinsælasta viðbótin á þessu svæði.

1. Settu upp viðbótina

Fyrsta skrefið er að setja upp viðbótina. Til að gera það skaltu fara yfir til Viðbætur> Setja upp nýtt. Leitaðu síðan að nafninu viðbætisins. Smelltu á í leitarniðurstöðum Setja upp núna og virkja viðbótina þegar hún er komin á síðuna þína.

2. Bættu við / breyttu letri á síðunni þinni

Þegar viðbótin er virk finnur þú nýjan valmyndaratriði sem heitir Leturfræði undir Útlit> Sérsníða.

prentmyndavalmynd í sérsniðnum WordPress

Þegar þú smellir á það og velur Sjálfgefin leturfræði, þú finnur lista yfir stýringar til að breyta letri málsgreina og fyrirsagna.

auðveldar stillingar á google leturgerðum í custompress WordPress

Það er mjög einfalt að nota þær. Smelltu bara á fellivalmyndina þar sem segir Breyta letri fyrir þann hluta síðunnar sem þú vilt breyta henni fyrir. Þetta gefur þér aðgang að þessari valmynd:

auðvelt google letur breyta letri

Hér er mikilvægasti hlutinn sem er undir Leturfjölskylda. Hér getur þú valið nýja leturgerð úr öllu Google Fontasafninu (notaðu Handrit / hlutmengi til að takmarka leturval við þá sem eru með sérstafi).

Letrið er raðað eftir venjulegu, serif, sans-serif, skjá, rithönd og monospace letri. Þú getur samt einfaldlega leitað að þeim með nafni.

Þegar þú smellir á letur geturðu forskoðað breytingarnar í rauntíma til hægri.

breytt sérsniðnu letri í auðveldum google leturgerðum

3. Stilltu letrið

Þegar þú hefur valið leturgerð eru margir möguleikar til að sérsníða leturfræði frekar.

Í fyrsta lagi geturðu breytt leturþyngd / stíl undir valmyndinni með sama nafni. Þetta stjórnar þykkt stafanna.

Enn fremur undir Textaskreyting, þú ert fær um að bæta við undirstrikun, gegnumferð og yfirstrikun. Umbreyting texta gerir þér einnig kleift að stilla það á allar húfur, allar lágstafi eða hástafi fyrsta bókstafsins. Undir Útlit flipanum hér að ofan, þú gætir líka stjórnað leturlit, bakgrunnslit, leturstærð, línuhæð og stafalengd.

útlitsstillingar með einföldum google leturgerðum

Loksins, Staðsetning gerir þér kleift að breyta öðrum stillingum eins og spássíu, padding, border, border-radius og sýna.

staðsetningarstillingar í einföldum google leturgerðum

Í stuttu máli, þá ættir þú að geta sérsniðið leturgerðirnar á vefsíðunni þinni að þínum vild. Auðvelt, er það ekki? Ekki gleyma að lemja Vista og birta efst þegar þú ert ánægður með breytingarnar þínar.

Það gengur ekki, hvað geri ég?

Stundum geturðu ekki breytt nokkrum leturgerðum á vefsíðunni þinni. Það gerist venjulega þegar þemað sem þú notar kemur með óstaðlaða CSS flokka og val til að stíl þá.

Til dæmis, í tuttugu og sextán þema, eru bloggatitlar ekki bara skilgreindir sem H1 heldur hafa þeir einnig CSS flokk sem kallast .inngangsheiti. Af þeim sökum er viðbótin ekki fær um að breyta þeim.

Til að bæta úr þessum vanda þarftu að búa til svokallaðan leturstýring undir Stillingar> Google leturgerðir.

bæta við leturstýringu í einföldum google leturgerðum

Þú getur tengt CSS valmenn við nýja stjórn og afl hafnað þegar þörf krefur. Eftir að þú hefur gert það er nýja leturstýringin tiltæk sem viðbótarkostur í WordPress Customizer undir Þemu leturfræði. Auðvelt peasy.

Aðrar sérsniðnar leturgerðir WordPress viðbætur

Það eru einnig önnur WordPress viðbætur til að bæta við sérsniðnum letri:

  • Notaðu hvaða letur sem er - Það hjálpar þér að nota skrifaðar letur án CSS. Það hýsir leturgerðir á þínum eigin netþjóni og býður einnig upp á umbreytingartæki fyrir leturgerðarsnið.
  • Typekit leturgerðir fyrir WordPress - Notaðu letur frá Adobe Typekit þjónustu (sem þú þarft að skrá þig fyrir). Það gerir þér kleift að setja innfellingarkóða og sérsniðna CSS beint í viðbótina.
  • TK Google leturgerðir - Önnur lausn til að fella Google leturgerðir sem færir Google Font leturupplifunina að WordPress stuðningi. Prófaðu leturgerðir með forskoðun og sérsniðnum texta og breyttu því í WordPress Customizer.

Af hverju að nota sérsniðnar leturgerðir á WordPress vefsíðunni þinni?

Leturfræði er vísindi í sjálfu sér og við getum ekki gefið þér fullt námskeið um notkun leturgerða í vefhönnun hér. Þegar öllu er á botninn hvolft snýst þetta ekki bara um letrið heldur einnig stærð, sniði, þykkt og margt annað. Hins vegar, við dós náðu hvers vegna það er góð hugmynd að nota sérsniðnar leturgerðir á WordPress síðunni þinni.

1. Leturfræði er hluti af fyrstu sýn

Í fyrsta lagi hefur letrið sem þú notar haft mikil áhrif á það hvernig vefurinn þinn er litinn. Er vefsíðan þín skemmtileg og fjörug? Ertu atvinnumaður í atvinnurekstri? Gestir ákveða þetta í einni svipan og leturgerð þín spilar stórt hlutverk í skynjun þeirra.

2. Leturgerðir hafa miklu meiri áhrif en þú heldur

Það getur haft áhrif á getu þína til að læra, leggja á minnið texta og jafnvel hafa áhrif á skap þitt.

Til dæmis í einum rannsóknir, það var tekið fram að ef þú vilt auka tímann sem þú notar í að lesa einhvern texta, þá ættirðu að nota serif leturgerð. Hins vegar, ef þú vilt lesa meira á stuttum tíma, ættir þú að skipta yfir í sans-serif leturgerð.

Önnur rannsókn sýndi fólki sömu æfingarleiðbeiningar á mismunandi letri. Þeir báðu þá þátttakendur að meta hversu langan tíma það tæki þá að ljúka umræddum leiðbeiningum. Heillandi, þeir sem eru með flóknara letrið giska á að það myndi taka þá lengri tíma en hópurinn með einfaldara letrið. Fyrir vikið voru þeir ólíklegri til að fylgja æfingaferlinum.

Hvar er hægt að finna sérsniðnar leturgerðir

1. Notaðu Google leturgerðir til að finna sérsniðna leturgerð

Fyrsta þjónustan sem við munum skoða er Google leturgerðir. Eins og nafnið gefur til kynna er það þjónusta frá Google sem býður upp á 800+ mismunandi leturgerðir. Frjálst að nota. Fyrir alla.

Svona á að nota það:

2. Finndu réttu letrið

Þegar þú ferð fyrst á Google leturgerðarsíðuna (sláðu það bara inn í Google leit) er þetta það sem þú munt sjá:

hvernig á að bæta við sérsniðnum leturgerðum á heimasíðu WordPress google leturgerða

Notendaviðmótið er gert til að hjálpa þér að finna réttu leturgerð fyrir þinn tilgang. Ef þú ert nú þegar með letur í huga geturðu einfaldlega slegið nafn þess inn í leitarreitinn hægra megin.

Ef ekki, getur þú síað letrið á marga mismunandi vegu, til dæmis eftir flokkum:

  • Serif - Merkir leturgerðir með krípandi línur í lokin, eins og Times New Roman.
  • Sans-Serif - Einföld letur án þess að spreyta sig, eins og Helvetica. Letrið sem notað er á þessari vefsíðu eru dæmi um það.
  • Sýna - letur sem hægt er að nota í stærri stærðum eins og fyrirsögnum.
  • Rithönd - Viltu að leturgerð þín líti út eins og hún hafi verið skrifuð af hendi? Þá er þetta stilling þín.
  • Monospace - Leturgerð þar sem allar persónur taka sama rými, svona.

Aðrar síur eru:

  • Flokkun - Raðaðu letur eftir að hafa verið vinsælir, vinsælir, dagsetningar bætt við eða í stafrófsröð.
  • Tungumál -Takmarkaðu leturval þitt við tungumál sem ekki eru skrifuð í latneska stafrófinu eins og arabísku, taílensku eða víetnömsku.
  • Fjöldi stíla -Veldu hve marga tiltæka stíl þú þarft, sem þýðir hvort letur er í boði í mismunandi þykktum, skáletrað, feitletrað og fleira.
  • Þykkt - Veldu viðeigandi þykkt letursins.
  • Ská - Sama og þykkt en sniði. Það er frá beint til næstum lárétt.
  • Breidd - Síið letur eftir breidd bókstafanna og bilinu.

Þegar þú notar síur aðlagast leitarniðurstöður þínar í rauntíma. Vinstra megin muntu sjá tiltæk leturgerðir í flokknum þínum og dæmi setningar.

Þegar þú sveima yfir letur geturðu notað fellivalmyndirnar efst til að láta Google leturgerðir sýna dæmi málsgreinar, allt stafrófið eða tölurnar. Þú getur líka einfaldlega smellt á setningareitinn og skrifað hvað sem þú vilt.

breyta sýnishornatexta í google leturgerðum

Auk þess eru möguleikar til að breyta leturstíl og stærð. Þegar þú gerir breytingar færðu einnig möguleika á að nota þær á allar leitarniðurstöður þínar. Að lokum, skoðaðu leturupplýsingasíðuna með því að smella Sjá sýnishorn.

leturupplýsingasíða í google letri

3. Bættu leturgerðum við safnið þitt

Ef þér líkar við tiltekið letur geturðu notað rauða plússtáknið í efra hægra horninu til að bæta því við safnið þitt. Með því að opna valmynd neðst þar sem þú sérð öll letrið sem þú valdir.

letur valin í google leturgerðum

Athugaðu að þú getur bætt við fleiri en einni leturfjölskyldu. Þetta er til dæmis skynsamlegt þegar þú ert að velja eitt fyrir líkamsritið þitt og annað fyrir fyrirsagnir.

4. Sérsniðu leturstillingar

Þegar þú ert ánægður með safnið þitt skaltu smella á neðstu valmyndina. Með því að opna þetta mun skjárinn opnast:

leturstillingar í google leturgerðum

Eins og þú sérð, getur þú fundið nokkur stykki af kóða til að fella inn og nota leturgerðir á síðuna þína. Þetta verður mikilvægt síðar. Í bili, smelltu á flipann sem segir Sérsníða. Með því að gera það ferðu í þessa valmynd:

sérsniðið letur í google leturgerðum

Hér getur þú valið stíl letrið sem um ræðir. Þetta er mikilvægt ef þú vilt nota leturgerðir í mismunandi stærðum, sem er oft raunin.

Vertu samt varkár: því fleiri stílar sem síða þarf að hlaða, því hægari á því (Google leturgerðir gefa þér jafnvel vísbendingu um hleðsluhraða fyrir núverandi safn þinn efst til hægri). Svo skaltu hugsa um það sem þú þarft raunverulega og veldu aðeins það. Við the vegur, það eru fleiri leiðir sem þú getur flýtt fyrir WordPress.

Ef þú þarft eitthvað annað tungumál en venjulega latneska stafrófið, vertu viss um að velja það líka neðst.

veldu leturmál í google leturgerðum

Fyrir utan það, allt sem þú þarft að vita eru táknin tvö efst.

halaðu niður og deildu í google leturgerðum

Sú til vinstri gerir þér kleift að forskoða og deila letursafninu þínu. Þegar þú velur að gera það opnar það útbreidda síðu þar sem þú getur sett sýnishornatexta og séð hann í öllum letri í einu. Þessari síðu er líka gott að deila með fólki.

Mikilvægara er að hala niðurhnappinn við hliðina. Með því að smella á það geturðu halað niður leturskrár til að nota þær á skjáborðs vélina þína (til dæmis í Photoshop). Notaðu Skyfonts til að halda þeim uppi.

Síðar munum við einnig sýna þér leið til að hlaða þessum skrám á netþjóninn þinn og hýsa letur beint á síðuna þína. Hafðu þetta í huga til framtíðar. Í bili munum við sýna þér annað, svipað leturbókasafn.

Viðbótaruppspretta fyrir sérsniðna leturgerðir

  • Við mælum með 15+ vefritum

Með ofangreindu ættir þú að geta fundið eitthvað sjálfur. Ein síðustu ábendingin - ef þú veist ekki hvernig á að sameina letur almennilega skaltu nota það Leturpar þar sem hönnuðir hafa unnið legavinnuna fyrir þig.

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