Hogyan adhatunk hozzá egyedi betűkészleteket a WordPress-webhelyhez

Hogyan adhatunk hozzá egyedi betűkészleteket a WordPress-webhelyhez

Miért teheti unalmassá a szabványos betűtípusokat? Hagyja, hogy blogja beszéljen élénk személyiségéről és a témákról, amelyekre az egyedi betűtípusok széles választéka tartozik. Az egyéni betűtípusok egy szép szolgáltatás, amely lehetővé teszi, hogy blogja jobban lássa másoktól.


Nézzünk szembe a tényekkel; mindannyian szeretjük a megfelelő betűtípusú blogokat és webhelyeket. Nem csak a webhelyet díszítik, hanem segítenek a felhasználót a tartalomhoz vonzani. A standard WordPress betűtípusok választása azonban korlátozott, és a használt témától függ. A jó hír az, hogy manuálisan vagy speciális bővítményekkel hozzáadhatja őket.

És itt két kérdés merül fel – hol lehet az egyedi betűkészleteket beszerezni a WordPress és a az egyedi betűkészletek telepítése a WordPress webhelyén.

Találjuk ki.

 Miért kellene egyéni betűkészleteket használni??

Elmúltak azok a napok, amikor a Times New Roman-ot és a Georgia-t tekintették a webhelyek szövegeinek egyetlen betűkészletének. Az elmúlt években a betűkészlet tér teljesen megváltozott a betűtípusok megjelenésével, mint például a Google Fonts és mások.

Manapság ingyenes betűtípusok, információs és képzési segédeszközök, valamint a tervezésre tervezett erőforrások százai állnak rendelkezésre az interneten. Az Adobe Illustrator, a Photoshop és más klasszikus alkalmazásoktól eltérően, a WordPress alapértelmezés szerint nem ad teljes ellenőrzést a betűtípusok felett. Csak néhány téma választja az egyedi betűtípusok támogatását és használatát.

Ezért ebben a bejegyzésben megtanulja, hogyan lehet megfelelő egyéni betűkészleteket megtalálni és hogyan lehet azokat használni a WordPress webhelyen.

Az egyéni betűkészletek használatának fontossága

Miért cserélje meg a betűkészleteket, a francia bekezdést a szavak között, sorköz, betűköz vagy betűkészlet telítettség? Akárhogy is van, néhány tanulmány ezt bizonyítja a tipográfia javítja az olvasás megértését.

Nagyon függ a betűkészletek felépítésétől. Tudatos és tudatalatti szinten – mindenki a tervezés alapján értékeli a weboldal tartalmát.

A betűkészlet az olvasókat érinti, még akkor is, ha nem figyelnek erre. A betűkészlet elhagyása azt jelenti, hogy magát a fejlesztést is el kell hagyni! Az olvasó hangulata attól függ. A betűtípus vagy megkönnyíti az olvasást, vagy arra kényszeríti a felhasználókat, hogy távozzanak az oldalról.

Minden böngésző tartalmaz alapértelmezett betűkészletet. Ez azt jelenti, hogy ha a betűkészlet nincs megadva az oldal CSS-ben, akkor a szabványos verziót kell használni. Az alapértelmezett betűkészleteket mindig használhatja, de ezek megnehezítik a felhasználók munkáját. Ezért elengedhetetlen egyéni betűtípus használata. Ha a témája nem ad lehetőséget a betűkészlet megváltoztatására, sok webhely és eszköz segíthet.

Google Betűkészlet Alternatívák

Hol találhat egyedi betűkészleteket

Sokan tudok az ingyenes Google betűkészletekről. Sokkal több webhely található, ahol gyönyörű betűtípusokat találhat. Néhányuk személyes használatra ingyenes. Ha kereskedelmi használatra van szüksége, akkor engedélyre van szüksége. A Google Betűtípusok és az Adobe Edge Betűtípusok ingyenesek. Ezért nem olyan különlegesek. És ez nem illik hozzánk.

Itt van néhány egyéb források a betűkészletek megtalálásához ingyenes és kereskedelmi használatra:

  1. Template Monster – A TemplateMonster piactér weboldalon mindent megtalál, amire szüksége van. Számos betűkészlet és betűkészlet is megtalálható személyes használatra alacsony áron. Emellett bemutatják őket a ONE webfejlesztő készletben. A gyűjtemény hatalmas és kreatív. A választás elősegítéséhez az összes betűtípust a brosúrákon vagy a kereteken bemutatjuk. Minden betűtípust kereskedelmi licencgel is bemutatunk.
  2. MyFonts – A MyFonts jelenleg a világ legnagyobb betűkészlet-kínálatát kínálja. Azonban az árak itt is a magasabb szegmensben vannak. Tehát, ha szűk költségvetéssel rendelkezik, lehet, hogy nem az Ön számára.
  3. FontSpring – A Fontspring divatos betűtípusokat értékesít kereskedelmi célra. De szinte minden családban 1-2 ingyenes betűtípus használható személyes célokra. Ezen kívül van egy külön szakasz, ingyenes betűtípusokkal. A gyűjtemény élénk. A letöltés előtt azonban gondosan meg kell vizsgálnia egy adott betűtípus licencinformációit.
  4. Cufonfonts – Ez a különféle betűtípusok kiterjedt gyűjteménye. Válasszon egyet, és látni fog egy oldalt, amely részletes információkat tartalmaz erről. Nagyon sok ingyenes betűtípus található, és külön szakaszokra oszlanak. A CufonFonts rendezési rendszere meglehetősen rugalmas és kényelmes. A Webfont támogatást is tartalmazza.
  5. Dafont – Egy további elérhető 3500 ingyenes betűkészlet gyűjtemény. Legtöbbjük kizárólag személyes használatra készült. Egy szép szolgáltatás a DaFont egy kategóriarendszer. Választhat betűtípusokat képregények, videojátékok, évjárat stílusában vagy stilizált japán karakterekként.

A betűtípusok választása nagyon csábító, mert mindegyik gyönyörű. De nem szabad sokat választani. Használat legfeljebb két betűtípus az oldalon. Akkor az Ön webhelyének megjelenése következetes lesz. Miután kiválasztotta a betűkészleteket, feltétlenül töltse le a fájlokat minden használt stílushoz (normál, félkövér, dőlt stb.).

Most, hogy kiválasztotta a megfelelő betűtípust a webhelyhez, megtudhatja, hogyan kell hozzáadni.

Az egyedi betűkészletek hozzáadása a WordPresshez

Néhány módszer lehet betűkészletek hozzáadásához a WordPress webhelyhez:

  1. Dugó: ebben az esetben a WordPress különféle bővítményeket használnak a folyamat megkönnyítésére.
  2. Manuálisan: ennek a módszernek a használatával letöltött betűkészletre van szükség a webhelyre, és szerkesztenie kell a CSS fájlt.
  3. Témák: sok népszerű téma beépített lehetőségeket tartalmaz a betűtípusok testreszabásához (megjegyzés – ezt a lehetőséget nem fogjuk lefedni, mivel a folyamat a használt témától függően változik, de a minőségi prémium témák, mint például a Total WordPress téma online könnyen követhető dokumentumok – mint például ez az útmutató az egyedi betűkészletek hozzáadásához a Total-hoz)

1. lehetőség – A WordPress betűkészlet módosítása beépülő modulokkal

Ha nem törődünk a globális változásokkal, telepíthetünk WordPress bővítményeket, amelyek megváltoztatják a betűkészleteket az Ön webhelyén.

Az egyéni betűtípus-bővítmények jellemzői

A nyílt forráskódú szoftvernek előnye van a közösség érdekében, és a WordPressnek is ez az előnye. Számos WordPress beépülő modul lehetővé teszi egyéni betűkészletek hozzáadását. Hogyan válasszunk ki egy olyan sok plugint, amely sokkal nagyobb? Melyek az egyéni font-bővítmények tulajdonságai?

Itt van néhány szempont, amelyet figyelembe kell venni:

  • Képesség az egyedi betűkészlet használatához
  • Képesség egynél több betűkészlet használatához
  • Célfejlécek és alkatrészek
  • Bónusz: a betűkészlet beállításainak módosítása a vizuális szerkesztőből

Ez minden. A lista első tulajdonsága nagyon fontos. Mindig letölthet betűkészleteket olyan webhelyekről, mint a DaFont, a Font Squirrel stb., De képesnek kell lennie arra, hogy feltöltsék őket a WordPressbe.

Nézzük meg néhány WordPress plugint, amelyek lehetővé teszik az egyéni betűtípusok feltöltését.

Egyéni betűkészlet-feltöltő

Egyéni betűkészlet-feltöltő

Ez a beépülő modul lehetővé teszi a Google betűtípusok letöltését és a blog különböző elemeire történő alkalmazását. Például a cikk vagy az oldal fejlécére vagy törzsére.

Használjon bármilyen betűtípust

Használjon bármilyen betűtípust

Ez egy WordPress bővítmény, amely kényelmes felületet biztosít a betűtípusok letöltéséhez és közvetlenül a vizuális szerkesztőn keresztül történő felhasználásához. A WordPress vizuális szerkesztő bármilyen szöveg betűtípusát automatikusan megváltoztathatja. Ez a bővítmény számos funkcióval rendelkezik, ami sokkal könnyebben kezelhetővé teszi az egyéni betűtípusok hozzáadását.

WP Google Fonts

WP Google Fonts

A WP Google Fonts lehetővé teszi a Google betűkészlet-katalógus használatát. A plugin egyik lenyűgöző előnye a közel 1000 Google betűtípus hozzáadása. Bár a Google betűkészleteket manuálisan is elvarázsolhatja, a legtöbb felhasználó számára sokkal könnyebb a plugin használata.

Betűkészletek telepítése beépülő modul segítségével?

Vegyük például a WP Google Fonts-ot. Csak telepítse ezt a bővítményt a hivatalos WordPress tárházból, és nyissa meg a Google Betűkészletek szakaszt.

WP Google Fonts

Itt látható a Google betűkészlet-kezelőpanel. Válasszon betűkészleteket és változtasson meg különböző beállításokat, például a betűtípust, az elemeket, amelyekre alkalmazza, stb.

2. lehetőség – Telepítse a WordPress egyedi betűkészleteket manuálisan

A @ font-face irányelv révén egy vagy több betűtípust csatlakoztathat a webhelyéhez. De ennek a módszernek megvannak az előnyei és hátrányai.

Előnyök:

  • A CSS-en bármilyen formátumú betűtípusokat csatlakoztathat: ttf, otf, woff, svg.
  • A betűkészlet fájlok a szerveren találhatók meg – Ön nem függ a harmadik fél szolgáltatásaitól.

Hátrányok:

  • Az egyes stílusok megfelelő betűkészlet-kapcsolatához külön kódot kell regisztrálnia.
  • A CSS ismerete nélkül könnyen összezavarodhat.

De ez nem egy igazi probléma, ha tudsz egyszerűen másolja a kész kódot és ahol meg kell adnia az értékeit.

jegyzet: Mielőtt elkezdené, feltétlenül hozzon létre egy gyermek témát a webhelyére. Így bármilyen szerkesztést elvégezhet a gyermek témájában, hagyva az alaptémát tapintatban, így a jövőben könnyen frissítheti..

1. lépés: Hozzon létre egy „betűkészlet” mappát

A gyermek témáján belül hozzon létre egy új „betűtípus” mappát az alábbiak szerint: wp-content / themes / a-gyerek-téma / fonts

2. lépés: Töltse fel a letöltött betűkészlet-fájlokat a webhelyére

Ezt megteheti a tárhely vezérlőpultján vagy az FTP-n keresztül.

Adjon hozzá minden betűkészlet-fájlt az újonnan hozzáadott betűkészlet-mappához: wp-content / themes / a-gyerek-téma / fonts készítettél.

3. lépés: Betűkészletek importálása a gyermek téma stíluslapján

Nyissa meg a gyermektamat stílus.css fájlt, és adja hozzá a következő kódot a CSS fájl elejéhez (a gyermek téma kommentálása után):

@ Font-face {
font-család: 'MyWebFont';
src: url ('fonts / WebFont.eot');
src: url ('fonts / WebFont.eot? #iefix') formátum ('embedded-opentype'),
url ('fonts / WebFont.woff') formátum ('woff'),
url ('fonts / WebFont.ttf') formátum ('truetype'),
url ('fonts / WebFont.svg # svgwebfont') formátum ('svg');
betűsúly: normál;
betűtípus: normál;
}

Ahol MyWebFont a betűkészlet neve, és az src tulajdonság értéke (az idézőjelekben zárójelben szereplő adatok) a helyük (relatív hivatkozások). Az egyes stílusokat külön kell meghatározni.

Mivel először összekapcsoljuk a normál stílust, a betűtípus súlyát és a stílus tulajdonságait normálra állítottuk.

4. lépés. Hozzáadáskor dőlt betűk, írja a következőt:

@ Font-face {
font-család: 'MyWebFont';
src: url ('betűtípusok / WebFont-Italic.eot');
src: url ('fonts / WebFont-Italic.eot? #iefix') formátum ('embedded-opentype'),
url ('betűtípusok / WebFont-Italic.woff') formátum ('woff'),
url ('fonts / WebFont-Italic.ttf') formátum ('truetype'),
url ('font / WebFont-Italic.svg # svgwebfont') formátum ('svg');
betűsúly: normál;
betűtípus: dőlt;
}

Ahol minden ugyanaz, csak a betűtípus tulajdonságot csatoltuk a dőlt betűhöz.

5. lépés: A vastag betűtípus hozzáadásához adja hozzá a következő kódot:

@ Font-face {
font-család: 'MyWebFont';
src: url ('betűtípusok / WebFont-Bold.eot');
src: url ('fonts / WebFont-Bold.eot? #iefix') formátum ('embedded-opentype'),
url ('font / WebFont-Bold.woff') formátum ('woff'),
url ('fonts / WebFont-Bold.ttf') formátum ('truetype'),
url ('font / WebFont-Bold.svg # svgwebfont') formátum ('svg');
betűsúly: félkövér;
betűtípus: normál;
}

Ahol a betűsúly tulajdonságot félkövérre állítottuk.

Ne felejtse el megadni az egyes stílusok betűkészlet-fájljainak helyes helyét.

6. lépés. A vastag dőlt betűs betű csatlakoztatásához írja ki a következőket:

@ Font-face {
font-család: 'MyWebFont';
src: url ('betűtípusok / WebFont-Italic-Bold.eot');
src: url ('font / WebFont-Italic-Bold.eot? #iefix') formátum ('embedded-opentype'),
url ('betűtípusok / WebFont-Italic-Bold.woff') formátum ('woff'),
url ('betűtípusok / WebFont-Italic-Bold.ttf') formátum ('Truetype'),
url ('betűtípusok / WebFont-Italic-Bold.svg # svgwebfont') formátum ('svg');
betűsúly: félkövér;
betűtípus: dőlt;
}

Nos, ennyi is. �� Most már négy betűstílust csatlakoztatott a webhelyéhez.

De van egy megjegyzés – ez a betűkészlet-kapcsolat helytelenül jelenik meg az Internet Explorer 8-ban. A vigasz az, hogy nagyon kevés ember még mindig használja az IE8-at.

Egyéni betűkészletek csomagolása a WordPresshez

Mi az, amit a felhasználók észrevesznek, amikor meglátogatják az Ön webhelyét? Rendben, a tervezés! A tervek nagy része a gyönyörű betűtípusok megfelelő használatán alapszik. Tehát gondoskodnia kell a webhely betűkészletének kialakításáról. Adjon hozzá kódot, vagy használja a fent említett pluginek egyikét az új betűstílus beágyazására. Ön dönti el, hogy melyik módot választja.

Győződjön meg arról, hogy nem több, mint két betűtípust használ ugyanazon a webhelyen. Mivel minél több egyedi betűtípust ad hozzá a webhelyhez, annál lassabb lesz a webhely sebessége.

Ez minden, nyugodtan kommentálhatja. 

Örömmel halljuk azt is, hogy melyik lehetőséget választja egyéni betűkészlet hozzáadásához a webhelyére, és hol található a betűkészlet.

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