Természetesen vannak különböző bővítmények a Google Web Fonts használatához a WordPress webhelyen, de ha saját témát fejlesztünk, akkor előfordulhat, hogy szorosan hozzá kell kötni a választott tipográfiát, megkerülve a bővítményeket. Az alábbiakban bemutatjuk, hogyan használhatja a Google Web Fonts-ot a témában.

Először is menjünk a webhelyre Google webes betűtípusokés válassza ki azt a betűtípust, amelyet a témában alkalmaznunk kell. A bal oldalon elhelyezett speciális eszközök segítségével szűkíthetjük a keresési területet, hiszen tényleg rengeteg a betűtípus. Tudtam, hogy félkövér serif betűtípusra van szükségem a címekhez és a blog címéhez, ezért a Kategóriák legördülő menüből a serifet választottam, majd jobbra mozgattam a Vastagság csúszkát.

Ennek eredményeként a számomra felkínált 617 opciót simán 5-re szüntették meg. előnézet betűtípusok – láthatja, hogyan fog kinézni egy szó, mondat, szöveg vagy poszter a kiválasztott betűtípussal. Választhat előre meghatározott szöveget, beállíthat saját szöveget, kiválaszthatja a kívánt betűméretet.

Miután megtalálta a webhelyén használni kívánt betűtípust, egyszerűen kattintson a Hozzáadás a gyűjteményhez gombra.

Több tucat betűtípust adhat hozzá gyűjteményéhez. Ez azonban nem mindig kötelező. Csak azért, mert meg tudod csinálni, nem jelenti azt, hogy meg kell tenned. Próbáljon legfeljebb három betűtípusra korlátozni magát. Még jobb, kettő. Teljesítmény okokból továbbra is szívesen használom az örökölt web-biztonságos betűtípust a webhely törzsszövegéhez, és webbetűtípusokat tartok meg a címsorokhoz és egyéb olyan elemekhez, amelyek különleges hangsúlyt vagy figyelmet igényelnek. Ügyeljen a betűtípusok olvashatóságára – ne használjon feltűnő betűtípust, ha a látogatók nem tudják kivenni, hogy mi van ráírva.

Amikor hozzáadja a betűtípusokat a gyűjteményhez, látni fogja őket a webhely alján található kék részben. Ha megvannak a gyűjteményében használni kívánt betűtípusok, egyszerűen kattintson a Használat gombra.

Ezt követően egy képernyőre kerül, amely egy négylépéses utasítást mutat be. Ebből megtanulod a betűtípusok használatát. Ha le szeretné tölteni a kiválasztott betűtípusokat felhasználásra grafikus szerkesztő hogy értékelje őket, vagy készítsen egy vonzó screenshot.png-t a témához, csak kattintson a Betűtípusok letöltése gombra az oldal legtetején. Ha csak a betűtípust szeretné használni a témában, akkor nem kell letöltenie a számítógépére.

Első lépésben kiválaszthatja a mellékelt betűtípus stílusát és súlyát. A második lépésben kiválaszthatja a felvenni kívánt karakterkészletet. Azt is értékelheti, hogy a betűkészlet-gyűjtemény hogyan befolyásolja az oldal betöltési sebességét.

Most áttérünk a harmadik lépésre, ami nem olyan egyszerű, mint az előzőek. A harmadik lépésben megkapjuk a kódot, amelyet hozzá kell adni az oldalainkhoz - három különböző lehetőségeket. A Standard opciót választva azonban némileg el fogunk térni a Google irányelveitől, hogy támogassuk a stílusok WordPress témákhoz való hozzáadásának bevált módszereit. A szabványos verzió kódjába csak azt az URL-t másoljuk be, amely a linkcímke href attribútumaként van megadva.

Ezután nyissa meg a téma functions.php fájlját. Létrehozunk egy függvényt a témánkban használt CSS betöltéséhez:

ggl_load_styles() ( ) függvény

Látja a ggl előtagot a függvényemen? Ez az egyik sikeres WordPress gyakorlat. Mindig írja elő a WordPress-függvények nevét, hogy csökkentse a témában, az alárendelt témában vagy a beépülő modulokban lévő más funkciókkal való ütközés kockázatát.

Most ebben a funkcióban regisztrálnunk kell a Google-tól kapott stíluslapunkat:

ggl_load_styles() függvény ( if (!is_admin()) ( wp_register_style("googleFont", "http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script"); ) )

A wp_register_style függvényt használjuk. Az első argumentum egy leíró, azaz. gyorsírás, amellyel később a kódunkban hivatkozhatunk erre a stíluslapra. A második argumentum a fájl elérési útja. A Google utasításainak harmadik lépésében kapott URL-t használjuk.

Ezután hozzáadjuk a témánk fő stíluslapját. Remélem, nem tettél link címkét a header.php fájl fejrészébe? Ha igen, menjen vissza a fájlhoz, és törölje ezt a kódot. Ezután helyezze be a stíluslapot a functions.php fájlba:

Függvény ggl_load_styles() ( if (!is_admin()) ( wp_register_style("googleFont", "http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script"); wp_enqueue_style("ggl" ", get_stylesheet_uri(), array("googleFont")); ) )

A wp_enqueue_style függvényt használjuk. Ugyanazokat az argumentumokat használja, mint a wp_register_style. Először egy leírót kötünk a stíluslapunkhoz. Ezután elérjük a stíluslapunkhoz vezető utat. Szerencsére a WordPressben az elérési út a get_stylesheet_uri() függvény segítségével érhető el. Ezután megadjuk a függőségeket. A style.css fájlunk a Google Web Fonts stíluslapjától függ.

Végül a wp_enqueue_scripts hook segítségével hívjuk meg a függvényünket:

Függvény ggl_load_styles() ( if (!is_admin()) ( wp_register_style("googleFont", "http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script"); wp_enqueue_style("ggl" ", get_stylesheet_uri(), array("googleFont")); ) ) add_action("wp_enqueue_scripts", "ggl_load_styles");

Elkészült a functions.php fájl. Most meg kell tennünk az utolsó lépést a kiválasztott betűtípus használatához. A negyedik lépés Google utasítások megmutatja, hogy milyen értékeket kell átadnunk a font-family tulajdonságnak a betűtípus használatához. Az összes címemet Holtwood One SC betűtípussal szeretném elkészíteni:

h1, h2, h3, h4, h5, h6 (betűcsalád: "Holtwood One SC", serif; )

A webhely leírását pedig Rouge Script betűtípussal szeretném elkészíteni:

Webhely leírása ( font-család: "Rouge Script", kurzív; )

Minden! Semmi mást nem kell tenni! Hozzáadta a Google Web Fonts-ot a WordPress-témájához. Használd őket felelősségteljesen!

Üdvözlet kedves olvasók. Ma a google fontokról (google web fonts) fogunk beszélni, hogyan lehet letölteni és csatlakozni az oldalhoz.

megyek az oldalra www.google.com/fonts/, a jobb oldali szűrőben válassza ki: 1. a kívánt kategóriát, 2. szükség esetén rendezze őket és 3. válassza ki a számunkra szükséges nyelvet (ha a bal oldali menüben orosz betűtípusra van szüksége, válassza a Cirill).

Tehát kiválasztottuk a betűtípust, most ki kell választani a stílusát, ehhez bontsa ki a panelt alulról ( Nyissa ki a kiválasztási fiókot), és lépjen a lapra TESTRESZABés válassza ki a kívánt stílusokat és nyelveket.

A letöltéshez kattintson a gombra letöltés.

A letöltött betűtípus csatlakoztatása

Másolja az archívumban található betűtípusokat a /fonts mappába, amelynek ugyanabban a könyvtárban kell lennie, mint a HTML webhely /css mappájának.

Szabványos csatlakozás letöltött betűtípusokúgy néz ki

@font-face ( font-family: "Font_name_any"; src: url("Font_file_name.eot"); src: url("Font_file_name.eot?#iefix") format("embedded-opentype"), url("Font_file_name" .woff") formátum("woff"), url("FontFileName.ttf") formátum("truetype"), url("FontFileName.svg#DSNoteRegular") formátum("svg"); betűtípus súlya: normál; betűtípus -stílus: normál;)

Az én esetemben a kapcsolat így fog kinézni

/* A /css/style.css */ @font-face ( font-family: "RobotoRegular"; url("../fonts/RobotoRegular.ttf") formátum("truetype") betűtípus-beállításának kódja stílus: normál; betűsúly: normál; )

A választott betűtípusnak a webhelyhez való csatlakoztatásához lépjen a lapra beágyaz, ott 2 módot fog látni a csatlakozásra:

1 SZABVÁNY

Adott kód szakaszhoz kell hozzáadni a HTML-dokumentumot.

2. @IMPORT

@import url("https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic");

Fontos. A csatlakozási módtól függetlenül használja a következő CSS-szabályokat a családok meghatározásához: font-family: 'Roboto', sans-serif; erről lentebb bővebben.

A Google Fonts az egyik legjobb forrás az ingyenes internetes betűtípusokhoz, és a Google többféleképpen is importálhatja őket webhelyére. Sajnos egyikben sem szerepel a népszerű WordPress motor. Ez azt jelenti, hogy vagy bővítményeket kell használnod, amelyekből rengeteg van, vagy pedig piszkoskodni kell a kóddal.

A jó hír az, hogy a Google könyvtárából bármilyen betűtípust telepíthet szinte minden WordPress témára különösebb gond nélkül. Hogy pontosan hogyan – ma megtanítjuk.

Két lehetőség van – csatlakoztassa a bővítményt, vagy játsszon egy kicsit a functions.php fájllal.

De először szeretném felsorolni az előnyöket és a Google hátrányai Betűtípusok, hogy végre eldönthesse, felhasználja-e őket a projektjeiben vagy sem.

Jó és rossz Google webes betűtípusok

Ha a webes betűtípusokról van szó, a Google az egyik a legjobb lehetőségeket teljesítmény szempontjából . Mindezt a könnyű kialakítás és a gyorsítótárazási rendszer miatt. A látogatóknak nem kell megvárniuk, amíg a Google betűtípusok betöltődnek, ha nemrégiben olyan webhelyet látogattak meg, amely ezeket használta. Az olyan népszerű betűtípusok, mint az Open Sans, a betöltési idő csökkentésével javíthatják webhelye teljesítményét.

Egy másik jellemzője az A Google lehetővé teszi ezeknek a betűtípusoknak a letöltését , így használhatja őket az elrendezésekben.

És végül a platform teljesen ingyenes . A betűtípusok használatának megkezdéséhez csak be kell jelentkeznie vagy el kell indítania Postafiók a Gmailben (kinek nincs ma Gmailje?).

A hiányosságokról ezt megadhatod A Google betűtípus kiválasztása korlátozott sok közülük hasonlít egymásra. Sok időt kell töltenie a kereséssel, hogy megfelelő, eredeti betűtípust találjon. Nagyon kevés a cirill betűtípus.

Ezen kívül vannak közös biztonsági aggályok - meg kell adnia néhány személyes adatot, amikor betűtípusokat telepít a Google-tól webhelyére.

A Google Fonts telepítése WordPress beépülő modulok használatával

Ha bővítményeket keres, az első dolog, amit a keresési eredmények között látni fog WP Google Fonts és Easy Google Web Fonts beépülő modulok . Ez valóban a két legjobb plugin.

A beépülő modulok nem az ideális megoldás Google telepítések betűtípusok egy WordPress webhelyen – nem csak a teljesítmény szempontjából, hanem azért is, mert a bővítmények nem teszik lehetővé bizonyos szövegrészek kijelölését. Ha azonban Ön vagy ügyfele meg van győződve arról, hogy jobb a beépülő modulok használata, akkor nézze meg ezt a két lehetőséget.

Ez a beépülő modul lehetővé teszi bizonyos elemek, például H1 címsorok, bekezdések és idézetek megcélzását. Egyéni CSS-beállítást is kap további munka egyedi betűstílusokkal. A Google betűtípusok hozzáadása és testreszabása a WordPress webhelyen meglehetősen egyszerű ezzel a bővítménnyel.

Az Easy Google Web Fonts méltó a nevéhez, és rendkívül egyszerűvé teszi a Google Fonts telepítését még a kezdők számára is. Az Élő előnézet funkcióval megtekintheti, tesztelheti és optimalizálhatja a betűtípusokat anélkül, hogy elhagyná a webhelyet, és saját betűtípus-szabályokat hozhat létre anélkül, hogy egyetlen kódsort írna.

A Google Fonts WordPress-sablonba való telepítésének helyes módja

A végén eljutunk a functions.php fájl megnyitásának lehetőségéhez, és egy kicsit játszunk a kóddal. Mielőtt ezt megtenné, ki kell választania egy betűtípust a Google könyvtárából. A példa kedvéért próbáljunk meg egy nagyon népszerűt venni Nyissa meg a Sans.

Ezután ki kell választania egy betűstílust - normál, félkövér vagy dőlt. Meg tudod csinálni magad :)

A stílusok kiválasztása után a Google megad egy kódrészletet. A miénk így néz ki:

Ezen kívül CSS stílust kaptunk:

font-family: "Open Sans", sans-serif;

Most itt az ideje megnyitni a functions.php fájlt (fájl elérési útja: wp-content/themes/yourtheme). A fájl végéhez adjunk hozzá egy új függvényt:

függvény load_fonts()
{
wp_register_style("et-googlefonts",
"http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300"); wp_enqueue_style("et-googlefonts");
}
add_action("wp_print_styles", "load_fonts");

Ennek a funkciónak a kulcsa a "wp_enqueue_style" parancs, amelynek hatására a WordPress minden oldal fejlécében meghívja a betűtípus-stíluslapokat. Ha figyelmesen megnézi, látni fogja, hogy eltávolítottuk a href= és rel='stylesheet' type'text/css' linket abból a kódból, amelyet a Google adott nekünk, és ugyanezt kell tennie, ha bármilyen más Google betűtípust szeretne hozzáadni a WordPress webhelyed.

Mindössze annyit kell tennie, hogy nyissa meg a fő CSS-fájlt, és illessze be Open Sans stílusban. Itt a szokásos szabályok érvényesek, ezért adja hozzá a következő kódot a stíluslaphoz, mentse és frissítse:

test
{
betűtípus: normál 1em "Open Sans", sans-serif;
szín: #313131;
}

Ez a stílus az egész oldalon működni fog. Az egyes szövegrészletekhez eltérő stílust állíthat be:

Félkövér szöveg
{
betűtípus: félkövér 1em "Open Sans", sans-serif;
}

Amint látja, valójában nagyon egyszerű. Próbáld ki és nézd meg az eredményt :)

A fejezet első része a CSS betűtípusok megismerésének szenteljük. Ezen az oldalon megtudhatja, hogyan kell betűtípusokat beilleszteni a CSS-be, mik azok a webes betűtípusok, és hogyan kell velük dolgozni, milyen betűformátumok érhetők el, és hogyan kell használni a Google Fonts szolgáltatást. Először nézzünk meg egy egyszerű példát egy CSS-betűtípus beépítésére:

P (betűcsalád: Verdana; )

Ez a kis kódrészlet azt jelenti, hogy minden címkét

Verdana betűtípus alkalmazva. A font-family tulajdonság határozza meg, hogy melyik betűtípust vagy font-family-t használja a rendszer. Ennek a stílusnak a helyes megjelenítése a felhasználó böngészőjében attól függ, hogy a megadott betűtípus telepítve van-e a felhasználó számítógépére. Esetünkben, ha a felhasználó számítógépe nem rendelkezik Verdana betűtípussal, a böngésző az alapértelmezett betűtípust jeleníti meg.

Egy időben a tervezőknek több tartalék betűtípust is meg kellett adniuk arra az esetre, ha a fő hiányzik a felhasználó számítógépéről. Tegyük fel, hogy a Verdana nyelven szeretné beállítani a szöveg stílusát, és tartalékként a Trebuchet MS-t, a Geneva-t és bármely sans-serif betűtípust szeretné használni. Így van írva:

P (betűcsalád: Verdana, "Trebuchet MS", Genf, sans-serif; )

A kód feldolgozásakor a böngésző először ellenőrzi a Verdana betűtípus jelenlétét a felhasználó számítógépén. Ha a betűtípus jelen van, akkor a címkék tartalma

Ebben a betűtípusban jelenik meg. Ha a betűtípus hiányzik, a böngésző ellenőrzi a következő betűtípust a listában, a Trebuchet MS-t. Ha ez a betűtípus is hiányzik, akkor a következő betűtípus, a Geneva megléte kerül ellenőrzésre. Ha a felhasználó számítógépén nem szerepel a Geneva is, a böngésző kiválaszt egy másik elérhető sans-serif betűtípust, és abban jeleníti meg a szöveget.

Jegyzet: a kódban idézőjelbe írtuk a Trebuchet MS betűtípus nevét. A betűtípus nevét dupla vagy szimpla idézőjelbe kell venni, ha szóközt tartalmaz.

A Wikipédia oldalán olvashat arról, hogy mi az a betűtípus serifekkel (serif) és anélkül (sans-serif).

Webes betűtípusok

A fenti betűtípus-használati módnak van egy hatalmas hátránya - korlátozott a betűtípusok száma. Csak azokkal a lehetőségekkel kell megelégednie, amelyek valószínűleg a legtöbb számítógépen telepítve vannak.

Hogyan lehet növelni a betűtípusok választékát, hogy az oldal dizájnja egyedi legyen, eredeti legyen? A webes betűtípusok segítenek. Olvassa el a fejezetet tovább, és megtanulja, hogyan kell velük dolgozni.

Tehát ahhoz, hogy a felhasználó böngészőjében megjelenjen a kívánt betűtípus, le kell töltenünk ezt a betűtípust a számítógépére. Ezt elég könnyű megtenni. A betűtípusok CSS-hez való kapcsolásának ez a módja igazán széles lehetőségeket nyit meg a tervezők számára. De érdemes megemlíteni egy légy szívét: egyrészt nem minden böngésző támogat egy bizonyos betűtípust (ami miatt nem jelenik meg a betűtípus), másrészt ha nagy a font fájl, az lelassíthatja az oldal betöltését.

Formátum támogatás

Hogyan lehet kezelni a fájlformátum eltérési problémáját? Vessünk egy pillantást a legnépszerűbb betűformátumokat bemutató táblázatra, és nézzük meg, mely böngészők támogatják őket:

Jegyzet: A betűtípus-támogatásról mindig naprakész információkat talál a caniuse.com oldalon. A keresősávba be kell írnia a formátum nevét (például ttf).

Ha modern böngészőket céloz meg, akkor elegendő a TTF betűtípus használata - a leggyakoribb és leggyakrabban használt. Abban az esetben, ha több formátumra van szüksége ugyanannak a betűtípusnak, speciális online konvertereket használhat egyik formátumról a másikra, majd egyesével csatlakoztathatja az összes fájlt. Így a böngésző képes lesz kiválasztani azt a betűformátumot, amellyel működik.

Webes betűtípus a @font-face használatával

Tegyük fel, hogy saját egyedi betűtípusa van MyUniqueFont néven TTF formátumban, és szeretné, hogy weboldala törzsszövege ebben a betűtípusban jelenjen meg. Az első dolog, hogy másolja a fontfájlt abba a mappába, ahol az összes többi webhelyfájl található. Annak érdekében, hogy ne hozzon létre rendetlenséget, létrehozhat külön mappa kifejezetten a betűtípusokhoz, elnevezése például fonts .

@font-face ( font-family: MyUniqueFont; src: url("fonts/MyUniqueFont.ttf"); )

A font-family tulajdonság ebben az esetben más szerepet tölt be: ezzel adunk nevet a fontnak, hogy később ezt a nevet tudjuk használni stílusíráskor:

P (betűcsalád: MyUniqueFont; )

A második sor a fontfájl elérési útját adja meg. Példánkban a MyUniqueFont.ttf fájl a fonts mappában található. Az Ön URL-je eltérő lehet.

Google Fonts

A Google megkönnyíti a Google Fonts gyűjtemény bármely betűtípusának felvételét. Csak annyit kell tennie, hogy elkezdi használni a kívánt betűtípust, hogy megad néhány beállítást a Google betűtípus-oldalán, majd másolja a speciális hivatkozást ehhez a betűtípushoz, és adja hozzá a webdokumentumához.

Jegyzet: a Google teljes betűkészlet-gyűjteménye elérhető az oldalon Google Fonts. Az oldalon különféle szűrőkkel kereshetünk betűtípusokat kategória, vastagság, ábécé szerint.

Az alábbiakban leírjuk a betűtípusok Google-tól való összekapcsolásának minden lépését. Hogy megértsük mit kérdéses, válasszon bármilyen betűtípust Google Oldalak Betűtípusok, és nyissa meg a Gyors használat gombra kattintva.

1. lépés: válasszon stílust

Először is, a kiválasztott betűtípus oldalán megjelennek a stílusának beállításai, valamint egy sebességmérő ikon, ami nem jelent mást, mint a betűtípus betöltési sebességét. Minél több betűstílust választ ki, annál tovább tart a betöltés. Ezért ajánlatos csak azokat a stílusokat kiválasztani, amelyeket használni kíván.

2. lépés: válasszon ábécét

Az oldalon további karakterkészlet választható: latin, cirill, stb. A betűtípustól függően előfordulhat, hogy az ábécé nem minden változata érhető el benne. Az előző bekezdéshez hasonlóan jobb, ha csak a szükséges ábécé előtt jelöli be a négyzetet.

3. lépés: adjon hozzá kódot a webhelyhez

Az első módszer egy hivatkozás hozzáadása a Google szerverére a HTML-kódban, ahonnan a betűtípus letöltődik. A már kész kódrészletet ki kell másolni, és a címkék közé kell helyezni a HTML-dokumentumban. Példa:

...

A második módszer a betűtípus felvétele az @import direktíva használatával. Kész kód a 3. pont második lapján található a kiválasztott Google betűtípus oldalán. Hozzá kell adni a stíluslap legtetejéhez (ellenkező esetben a fájl nem importálódik). A kód valahogy így néz ki:

@import url(http://fonts.googleapis.com/css?family=Roboto&subset=latin,cirill);

Az első módszer sajátossága, hogy minden oldal fejlécében hozzá kell adni egy hivatkozást a betűtípushoz, ahol használni kívánja. Ez könnyen megvalósítható kis oldalszámú webhelyeken, de problémás nagy erőforrások esetén. A második módszer kényelmes, mert a kód elhelyezhető egy külső stíluslap legelején, majd minden oldal, amelyhez ez a táblázat kapcsolódik, megkapja a szükséges betűtípust, amelyet az @import direktíva segítségével tölt be.

4. lépés: Stílus

Az előző lépések elvégzése után megkezdheti a betűtípus alkalmazását. Láttad már, hogyan íródnak egy ilyen CSS-szabály:

P (betűcsalád: "Roboto", sans-serif; )

Ha az első lépésben több betűtípust választott (például Bold 700 félkövér betűtípust adott hozzá), akkor a harmadik lépésben a kód kissé megváltozik:

@import url(http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cirill);

A betűtípus félkövérré tételéhez írja be a CSS stílust a következőképpen:

P (betűcsalád: "Roboto", sans-serif; betűsúly: 700; )

Jegyzet: A Google Fontsban csak 100-tól 900-ig terjedő szabványos mértékegységek jelzik a betűtípus súlyát. Például a normál (alapértelmezett) a 400-nak (normál), a normál félkövér pedig a 700-nak (félkövér) egyenértékű.

Fő előnyei Google szolgáltatás a betűtípusok:

• könnyű használat (még egy kezdő is képes foglalkozni a szolgáltatással, és az összes szükséges kód automatikusan generálódik - csak másolni kell);
• betűtípusok elérhetősége (nem kell fizetni értük);
• minden használt betűformátum rendelkezésre áll (ez azt jelenti, hogy minden böngésző pontosan azt a betűformátumot tudja betölteni, amellyel működik).

A szolgáltatás hiányosságai között szerepel a nem túl sok betűtípus, különösen a cirill betűtípusok. Egyébként vannak más hasonló szolgáltatások az interneten, például a TypeKit (fizetős).

Eredmények

Ma már több lehetőségünk is van arra, hogy eredeti és nem szabványos betűtípusokat kapcsoljunk a weboldalakhoz. Ezen módszerek mindegyikének megvannak a maga előnyei és hátrányai. Melyik lehetőséget jobb használni, meg kell határoznia magának. Ez gyakran a helyzettől függ, és a különböző esetekben különböző megközelítések hasznosak lehetnek. Ezen a ponton már csak tudnia kell, hogyan kell használni a betűtípusokat a CSS-ben.

Kiváló fontforrás webes tervezők számára. BAN BEN WPBv4 népszerű betűkombinációt kezdett használni Google font: fejhallgatók OswaldÉs Lora. Egyes felhasználók kérdéseket tettek fel arról, hogy a Google betűtípusok használhatók-e a WordPress témákban, és hogyan kell ezt megtenni. Ez a cikk megvitatja, hogyan adhat hozzá Google webes betűtípusokat WordPress témák Jobb anélkül, hogy befolyásolná webhelye teljesítményét.

Tetsző Google webes betűtípusok keresése

Először meg kell találnia azokat a betűtípusokat a Google-tól, amelyek tetszenek. Keressen lehetőségeket a javasolt betűtípusok között a könyvtárban Google font könyvtár. Ha megtalálta a megfelelő lehetőséget, kattintson a gombra Gyors használat:

Miután erre a gombra kattintott, az lesz új oldal. Görgessen, amíg meg nem jelenik a "" nevű űrlap Adja hozzá ezt a kódot webhelyéhez":

Másolja ki a kódot, és illessze be a jegyzettömbbe, később felhasználjuk. Általában legalább 2 különböző betűtípust használnak. Gyakorlatunkban például fontokat használtak Oswald + Lora. Tehát a fent leírt eljárást meg kell ismételni a második betűtípusnál.

Google webes betűtípusok hozzáadása a WordPress témához

Három fő módja van a Google-tól származó betűtípusok webhelyéhez való hozzáadásának. Például van egy szabványos mód, egy módja az importálásnak @importés hozzáadva -val javascript. Általában az első két módszer egyikét alkalmazzák.

A legegyszerűbb módja a témafájl megnyitása stílus.cssés illessze be a következő kódot a hozzáadandó betűtípushoz (ne feledje, hogy az első lépésben a jegyzettömbbe másoltuk):

@import url(http://fonts.googleapis.com/css?family=Lora); @import url(http://fonts.googleapis.com/css?family=Oswald);

Sokan ezt teszik StudioPress, Genesis). Ennek ellenére ez nem teljesen helyes módszer a nyitott betűtípusok hozzáadására. Módszer használat @import blokkolja a párhuzamos letöltéseket, így a webböngésző a végéig letölti a fontfájlt, mielőtt folytatná a webhely többi tartalmának letöltését. Ezért, bár ez a módszer kényelmesnek tűnik, nem az A legjobb mód a betűtípus használatához, ha érdekli webhelye sebessége és teljesítménye. Ezekről a részletekről bővebben olvashat Itt.

A legjobb az lenne, ha kombinálná a különböző Google-betűtípusokra vonatkozó kéréseket egy kérés a túlzott HTTP kérések elkerülése érdekében. Íme, hogyan kell csinálni. Kód hozzáadása:

@import url(http://fonts.googleapis.com/css?family=Lora|Oswald);

Még akkor is, ha kénytelen vagy használni @import, legalább egyesítsen több kérést egybe.

Google Web Fonts hozzáadása a webhely teljesítményének veszélyeztetése nélkül

A legjobb lenne használni szabványos módszer, amely hivatkozásokat használ, nem pedig fájlimportálást. Csak vegyen két címet URL ennek az útmutatónak az első lépésétől. Kombináljon 2 különböző betűtípust úgy, hogy szimbólumot ad hozzájuk | . Ezután tegye a kapott kódot egy blokkba fej a témád. Ehhez szerkesztenie kell a fájlt header.php és adja hozzá a stíluslap kódját. Valami ilyesmit kellene kapnod:

elsődleges cél egy betűtípus-kérelem hozzáadása a korai szakaszban. A projekt blogja szerint Google webes betűtípusok ha van egy script címke a font deklaráció előtt @font-face, Akkor internet böngésző semmi sem jelenik meg az oldalon, amíg maga a betűtípusfájl be nem töltődik.

A lépés befejezése után egyszerűen használhatja a kapott kódrészletet és betűtípust a fájlban css a témád. Valahogy így fog kinézni:

H1 (betűcsalád: "Oswald", Helvetica, Arial, serif; )

Van jó néhány gyerektéma és keretrendszer. Nem ajánlott módosítsa a szülőtéma fájlokat, különösen, ha keretrendszert használ; mert a témában végrehajtott módosítások minden alkalommal törlődnek, amikor frissíti a keretrendszer verzióját. Ha helyesen szeretné hozzáadni a Google-betűtípusokat a gyermektémákhoz, a szülőtémában vagy annak keretrendszerében kell dolgoznia a bővítményeken és szűrőkön.

Például ha megnézed az oldalt kék nyomat, a csapat létrehozta a WPBv4 témát egyéni gyermektémaként a keretrendszerből Genesis. Nézzük meg, hogyan adhatunk hozzá Google Web-betűtípusokat egy gyermektémához az alapján Genesis.

Google Web Fonts hozzáadása a Genesis alapú gyermektémához

Nyissa meg a gyermektémát és a fájlját függvények.php és adja hozzá a következő kódot ehhez a fájlhoz:

Add_action("genesis_meta", "wpb_add_google_fonts", 5); függvény wpb_add_google_fonts() ( echo " "; }

A fő tennivaló meg kell nézni a kódot a blokkon belül genesis_meta. Alapértelmezés szerint vannak olyan lehetőségek, mint pl META- leírások, kulcsszavakat, stíluslapok, faviconok stb. Prioritás megadása 5 , megbizonyosodunk arról, hogy a stíluslap betöltődik a fő stíluslap betöltése előtt.

Sajnos nem tudjuk lefedni az összes meglévő szülőt és keretrendszert. Ha kérdései vannak bizonyos témákkal kapcsolatban, kérjük, tegye fel azokat a fejlesztőknek és a téma szerzőknek a témafejlesztői fórumok megfelelő szálaiban.

Utolsó tippünk ezzel kapcsolatban Google webes betűtípusok a webhelyén: ne kérdezzen, és ne kísérletezzen olyan betűtípusokkal, amelyeket nem szándékozik használni. Például ha csak normál ill félkövér betűtípus, ne használjon vagy szabjon testre minden más lehetséges stílust egy adott betűtípushoz. Reméljük, hogy ez a bejegyzés segít a Google Web Fonts megfelelő beállításában és használatában a WordPress webhelyén.