Ako používať písma Google na svojom webe WordPress

google fonty wordpress

Ako vlastník webových stránok WordPress ste sa pravdepodobne stretli s množstvom tém, ktoré ste váhali použiť kvôli ich vstavaným možnostiam písma.

Google Fonts ponúka veľkú zbierku open source webových písiem, ktoré sú na to určené urobte web krajším, rýchlejším a otvorenejším vďaka skvelej typografii. A ak hľadáte jednoduchý spôsob, ako dať svojmu obsahu osobitosť a zároveň zachovať čitateľnosť, integrácia písma Google do vašej webovej lokality je skvelý spôsob, ako to urobiť.

S ohľadom na túto skutočnosť vám v tomto príspevku ukážeme, ako môžete začať používať písma Google vo WordPress pomocou riešenia doplnkov a manuálneho pridávania kódu. Ale skôr ako začneme, poďme sa pozrieť na to, čo sú písma Google a prečo ich možno budete chcieť použiť na svojich webových stránkach.

Čo sú písma Google?

Predstavený už v roku 2010, Google Fonts sú bezplatné dizajnérske písma, ktoré sú optimalizované pre web. V čase písania tohto článku obsahuje adresár 832 rodín písiem kategorizovaných do piatich rôznych sekcií – pätka, bezpätka, displej, rukopis a jednopriestorové písmo.

google fonty

Okrem obrovského množstva možností typografie, ktoré máte k dispozícii, je tu niekoľko ďalších dôvodov, prečo by ste mohli zvážiť použitie písiem Google na svojom webe WordPress:

  • K dispozícii zadarmo na použitie. Všetky rodiny písiem v adresári sú k dispozícii na použitie pod bezplatnou licenciou, čo znamená, že ich môže použiť ktokoľvek pre akýkoľvek projekt – bez ohľadu na to, či je osobný alebo komerčný.
  • Nevyžaduje sa žiadny vlastný hosting. Google Fonts sa stará o hosťovanie, čo znamená, že nebudete musieť hostiť písmo na serveri vašej webovej lokality, aby ste ho mohli začať používať. Namiesto toho webový prehliadač používateľa získa písmo priamo z adresára Google Fonts.
Čítať:  Ako predávať šablóny Canva na Etsy v niekoľkých jednoduchých krokoch v roku 2024

Keď ste si vybrali písmo, ktoré sa hodí k značke vašej stránky, zostáva už len pridať ho na váš web WordPress.

Ako používať písma Google na svojom webe WordPress

Hoci existuje množstvo rôznych spôsobov, ako môžete začať používať písma Google na svojom webe WordPress, odporúčame vám použiť riešenie s optimalizovaným výkonom, ktoré zaistí, že sa váš web nespomalí alebo sa nestane nedostupným.

V tejto časti vás prevedieme dvoma rôznymi spôsobmi pridávania písiem Google na váš web WordPress – pomocou doplnku a ručným pridávaním útržkov kódu – pričom treba pamätať na optimalizáciu výkonu.

Metóda 1: Použitie doplnku

Bezpochyby najjednoduchší spôsob, ako pridať písma Google na svoj web WordPress, je pomocou doplnku. Aj keď existuje množstvo rôznych doplnkov v Adresár doplnkov WordPress ktoré môžete použiť, vybrali sme dve najlepšie riešenia doplnkov a odporúčame vám použiť jedno z nich.

Jednoduché písma Google

jednoduché google fonty

The Jednoduché písma Google plugin ponúka jednoduchý spôsob, ako pridať Google Fonts do témy vašich webových stránok WordPress bez toho, aby ste museli kódovať. Po nainštalovaní a aktivácii doplnku budete môcť prispôsobiť nastavenia typografie svojho obsahu priamo z nástroja WordPress Customizer a zobraziť ukážku zmien v reálnom čase.

A ak by ste chceli veci posunúť na ďalšiu úroveň, môžete prejsť na stránku nastavení doplnku z back-endu WordPress, kde môžete ovládať selektory CSS a vytvárať konfigurácie písiem pre konkrétne témy.

Čítať:  Proxy vs VPN: Aký je rozdiel?

Kľúčové vlastnosti:

  • Integruje sa do WordPress Customizer.
  • Umožňuje vám vytvárať ovládacie prvky a pravidlá písma špecifické pre tému.
  • Automaticky zaradí šablóny štýlov pre písma Google, ktoré vyberiete.

WP Google Fonts

wp písma google

WP Google Fonts automaticky pridá všetky potrebné úryvky kódu z adresára Google Fonts priamo do HTML a CSS vášho webu WordPress. Okrem toho vám poskytuje jemnejšiu kontrolu nad typografiou vášho webu tým, že vám umožňuje priradiť písma Google ku konkrétnym selektorom CSS.

A ak ste aspoň trochu technicky naklonení, môžete naplno využiť svoj potenciál doplnku WP Google Fonts tak, že zacielite na svoje vybrané písma Google z vašich existujúcich šablón štýlov tém.

Kľúčové vlastnosti:

  • Intuitívne a ľahko použiteľné rozhranie.
  • Automaticky pridá útržky kódu Google Fonts na váš web.
  • Umožňuje vlastníkom webových stránok priradiť písma Google ku konkrétnym selektorom CSS.

Metóda 2: Manuálne pridanie kódu

Ak vám nevadí pohrávať sa s kódom, vždy môžete namiesto toho použiť svoj vlastný prístup. Hlavnou výhodou je, že na svoj web nebudete musieť inštalovať ďalší doplnok.

Ak chcete začať, prejdite na webovú stránku Google Fonts a v adresári vyhľadajte písmo, ktoré by ste chceli pridať na svoju webovú stránku WordPress. Pre účely tohto tutoriálu to ukážem pridaním Lato písma na webovú stránku WordPress.

písmo lato

Keď ste sa rozhodli pre písmo, kliknite na Vyberte toto písmo tlačidlo v pravom hornom rohu obrazovky. Toto by malo pridať písmo do Family Selected zásuvku v spodnej časti obrazovky.

Čítať:  3 tipy na uprednostnenie vašich IT projektov

vyberte písmo

Ďalej spustite Family Selected a prejdite na Prispôsobiť vyberte štýly, ktoré chcete zahrnúť do písma. Rozhodol som sa zahrnúť Tenké 100 a Bežných 400 v mojom výbere.

prispôsobiť sekciu

Keď to urobíte, prejdite späť na Vložiť kartu v Family Selected a skopírujte URL, ktorá ukazuje na váš výber písma. Podľa nášho príkladu je adresa URL https://fonts.googleapis.com/css?family=Lato:100,400.

vložiť sekciu

Teraz použijeme wp_enqueue_style() funkcia na pridanie nášho vybraného písma na našu webovú stránku WordPress. Pridajte nasledujúce riadky kódu do svojich existujúcich tém funkcie.php súbor a nahraďte URL svojou vlastnou:

function added_google_fonts() { wp_enqueue_style( ‘ add_google_fonts ‘, ‘ https://fonts.googleapis.com/css?family=Lato:100,400’, false ); } add_action( ‘wp_enqueue_scripts’, ‘adding_google_fonts’ );

Uložte a zatvorte funkcie.php súbor pokračovať. V tomto bode by malo byť vybraté písmo Google integrované do vašej webovej stránky WordPress. Ak chcete začať používať novo pridané písmo na svojej webovej lokalite, jednoducho pridajte nasledujúcu deklaráciu rodiny písem (alebo podobnú) do hlavnej šablóny so štýlmi vašej témy:

body { font-family: ‘Lato’, sans-serif; font-weight: normal; veľkosť písma: 12px; }

To je všetko! Písmo, ktoré ste integrovali na svoj web WordPress, by sa teraz malo použiť na selektory CSS, ktoré ste zadali v šablóne so štýlmi vašej témy.

Záver

Používanie písma Google na vašom webe WordPress je skvelý spôsob, ako zvýšiť jeho vizuálnu príťažlivosť a zlepšiť čitateľnosť obsahu. Odporúčame vám vyskúšať rôzne typy písma na vašej webovej lokalite a použiť ich na nadpisy, podnadpisy a odseky, ako uznáte za vhodné.

Čítať:  Ako opraviť, že sa priateľ TikTok nezobrazuje v odoslaní

Poďme si rýchlo zrekapitulovať hlavné spôsoby, ako môžete začať používať písma Google na svojom webe WordPress:

  1. Použite plugin ako Jednoduché písma Google alebo WP Google Fonts aby ste mohli začať s Google Fonts vo WordPress bez toho, aby ste sa museli trápiť s kódom.
  2. Použi wp_enqueue_style() integrujte vybraté písmo Google do vašej existujúcej témy a potom ho aplikujte na rôzne selektory CSS prostredníctvom šablóny so štýlmi vašej témy.

Máte nejaké otázky týkajúce sa používania písma Google na vašom webe WordPress? Dajte nám vedieť komentárom nižšie!

Nové Publikácie:

ODPORÚČANIE