A Google Fonts 2010-es kifejlesztése óta az egyéni webes tipográfia fő forrásává vált. Három fő oka van annak, hogy a Google itt lett az éllovas. Először is, nem voltak elég tisztességes betűtípus-szolgáltatások, így a Google kitöltötte az űrt. Másodszor, az általuk kínált változatosság már az elején is viszonylag nagy volt. Jelenleg több mint 800 betűtípus áll rendelkezésre számos stílusban. Harmadszor, ezek a betűtípusok ingyenesen elérhetők, így különösen vonzóak.
Ezenkívül meglepően könnyen integrálhatók a tervezési projektekbe. Megmutatjuk, hogyan helyezheti el ezeket a Google Fontokat a WordPress webhelyén.
Google Fonts
A kezdéshez ki kell választania azt a betűtípust, amellyel dolgozni szeretne. Számos lehetőség áll rendelkezésre, így meglehetősen nagy menüből választhat. Megtalálhatja őket a címre kattintva A Google betűtípus-oldala. Ha egy adott betűtípust keres, egyszerűen írja be a betűtípus nevét a Keresés mezőbe, és megjelenik egy minta.
Vannak más keresési paraméterek is, amelyeket használhat. Közvetlenül a keresőmező alatt található a Kategóriák gomb. Ha erre kattint, megjelenik egy legördülő menü öt lehetőséggel. Ezek a következők:
- Serif – Ezek a betűtípusok rövid vonalakkal, amelyek a betű felső és alsó vonalából fakadnak. A Times New Roman és a Sylfaen jó példa erre.
- Sans Serif – Ahogy a neve is sugallja, ezek olyan betűtípusok, amelyekben nincsenek kis vonalak. Általában egyszerű és letisztult esztétikával rendelkeznek.
- Kijelző – Ezeket nevezhetjük figyelemfelkeltő betűtípusoknak. Legjobbak címsorokhoz, mint hosszú szövegekhez.
- Kézírás – Ezek a betűtípusok úgy tűnik, mintha valaki kézzel írta volna őket. Látni fogja, hogy sok kurzív vagy kevésbé következetes szóköz van.
- Monospace – Az írógéphez hasonlóan a betűik azonos vízszintes szélességet foglalnak el. Nagyon egyenletesen helyezkednek el.
Ezeken kívül más lehetőségek közül is választhat, például a Nyelv és a Betűtípus tulajdonságait. Ez utóbbi magában foglalja a stílusok számát, vastagságát, dőlését és szélességét.
Betűtípusok beágyazása a WordPressbe
Ha ezeket az egyedi betűtípusokat szeretné felvenni WordPress-webhelyére, több módszert is kipróbálhat.
CSS használata
Kattintson a Google által kiválasztott betűtípusra, és a részletes betűtípus-oldalra kerül. A jobb felső sarokban egy „+” jel található. Kattintson rá, és megnyílik egy oldalsó ablak. Kattintson a „Beágyazás” gombra.
Most már kattinthat @import. Ez megnyitja a CSS-kódot, amelyet másolni kell. Nyissa meg a WordPress-téma stíluslapját, és illessze be az elejére. Győződjön meg arról, hogy az importálási hivatkozást a zárójelben. Győződjön meg róla, hogy Mentés, és már hozzáadta a betűtípust.
PHP használata
Kövesse az első néhány lépést, és másolja ki a „+” jelre kattintás után kapott linket. Most egyszerűen adja hozzá a témája header.php fájljához. Ne felejtse el menteni a betűtípus hozzáadásához.
Javascript függvény használata
Kipróbálkozhat az úgynevezett „sorbaállítással” is. Ehhez a wp_enqueue_style függvényt kell használnia. Ezzel a módszerrel a kiválasztott betűtípust hozzáadhatja webhelye összes oldalának fejlécéhez. Ez egy nagyszerű módja annak, hogy egyszerre több módosítást is hozzáadjon.
Egyszerűen szerezze be a betűtípus hivatkozását (a http -től a "-ig )-ig, és adja hozzá ezt a témája functions.php fájljához extra kóddal. Íme a kód, amelyet használnia kell:
függvény custom_add_google_fonts() {
wp_enqueue_style( ‘custom-google-fonts’, https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap, hamis );
}
add_action( 'wp_enqueue_scripts', 'custom_add_google_fonts' );
E lehetőségek bármelyike jól működik a Google Fonts integrálásához a WordPress webhelyébe, ezért fontos kiválasztani azt, amelyiknél a legkényelmesebb.