Ako pridať webové písma Google do tém WordPress správnym spôsobom

Písma Google sú pre webových dizajnérov úžasným bezplatným zdrojom. Vo WPBv4 sme začali používať populárnu kombináciu písma Google: Oswald a Lora. Niektorí z našich používateľov sa nás pýtali, ako pridať webové písma Google do tém WordPress. Ak si pamätáte, ukázali sme, ako pridať písma Google do editora WordPress Post Editor. V tomto článku vám ukážeme, ako do svojich tém WordPress pridať webové písma Google Správna cesta, optimalizované pre výkon.


Nájdite webové písma Google, ktoré sa vám páčia

Najprv musíte nájsť písmo Google, ktoré sa vám páči. Zamierte na písma spoločnosti Google a prehľadajte knižnicu. Keď nájdete písmo, ktoré sa vám páči, kliknite na ikonu “Quick-use” gombík.

Fonty na rýchle použitie od spoločnosti Google Fonts

Po kliknutí na tlačidlo rýchleho použitia sa dostanete na novú stránku. Prejdite nadol, kým neuvidíte pole s pokynmi na použitie s kódom, ktorý môžete pridať na svoj web.

Kód na vloženie písma Google

Uvidíte, že existujú tri rôzne karty na pridanie písma na vaše stránky. Prvým z nich je štandardný a odporúčaný spôsob pridávania písiem Google na vaše stránky. Druhá karta používa metódu @import CSS a posledná karta využíva metódu JavaScript.

Ukážeme vám, ako používať každú z týchto metód a aké sú výhody a nevýhody.

Výukový program pre video

Prihláste sa na odber WPBeginner

Ak sa vám video nepáči alebo potrebujete ďalšie pokyny, pokračujte v čítaní.

Pridanie webových písiem Google do motívov WordPress

Väčšinou sme videli ľudí pomocou prvých dvoch metód.

Najjednoduchším spôsobom by bolo otvoriť tému style.css na kartu @import vložte a vložte kód písiem, ktorý ste dostali:

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

Môžete tiež kombinovať viac žiadostí o písmo do jedného. Takto by ste to urobili:

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

Táto metóda je veľmi jednoduchá, ale nie je to najlepší spôsob, ako pridať písma Google na svoje stránky WordPress. Použitie metódy @import blokuje paralelné sťahovanie, čo znamená, že prehliadač bude čakať, kým importovaný súbor dokončí sťahovanie, kým začne sťahovať zvyšok obsahu..

Ak MUSÍTE používať @import, kombinujte aspoň niekoľko žiadostí do jednej.

Spôsob optimalizácie výkonu pridávania webových písiem Google

Najlepším spôsobom, ako pridať písma Google, je použitie štandardnej metódy, ktorá namiesto metódy importu používa metódu prepojenia. Jednoducho zoberte adresu URL svojho písma, ktorú ste dostali od kroku 1. Ak pridávate viac písiem, môžete tieto dve písma skombinovať s znakom | charakteru. Potom umiestnite kód do sekcie hlavy témy.

Pravdepodobne budete musieť upraviť svoj súbor header.php a prilepiť nasledujúci kód nad hlavnú šablónu so štýlmi. Príklad by vyzeral takto:

Cieľom je v zásade podať žiadosť o písmo čo najskôr. Podľa blogu Google Web Fonts, ak pred deklaráciou @ font-face existuje značka skriptu, potom program Internet Explorer na stránke nič nevykreslí, kým sa nedokončí sťahovanie súboru písma..

Keď to urobíte, môžete ho jednoducho začať používať v súbore CSS vášho motivu, ako je tento:

h1 {
rodina fontov: ‘Oswald’, Helvetica, Arial, serif;
}

Teraz existuje veľa tematických rámcov a detských tém. Neodporúča sa špeciálne upravovať súbory svojej nadradenej témy, ak používate rámec tém, pretože vaše zmeny budú prepísané pri najbližšej aktualizácii tohto rámca. Ak chcete do svojich podriadených tém správne pridať písma Google, budete musieť použiť háčiky a filtre, ktoré vám ponúka táto rodičovská téma alebo rámec..

Správne vytváranie písem Google vo WordPress

Ďalším spôsobom, ako pridať písma Google na svoj web WordPress, je vloženie písma do súboru funkcií motivu.php alebo do doplnku špecifického pre daný web..

function wpb_add_google_fonts () {

wp_enqueue_style (‘wpb-google-fonts’, ‘https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300’, false);
}

add_action (‘wp_enqueue_scripts’, ‘wpb_add_google_fonts’);

Nezabudnite nahradiť odkaz na písmo svojím vlastným.

Načítavam písma Google pomocou jazyka JavaScript

V prípade tejto metódy budete musieť skopírovať kód na karte JavaScript v časti Pokyny na používanie písma Google. Tento kód môžete vložiť do súboru header.php vášho motívu alebo podradeného súboru témy hneď za značkou.

Naším posledným tipom na používanie webových písiem Google na vašich stránkach by bolo nenahrať písma, ktoré nepoužívate. Napríklad, ak chcete iba odvážne a normálnu váhu, nepridajte všetky ostatné štýly.

Dúfame, že tento článok vám pomohol pridať webové písma Google do tém WordPress správnym spôsobom, aby sa vaše stránky mohli rýchlo načítať. Môžete tiež vyskúšať našu príručku o tom, ako pridať písma Typekit do programu WordPress.

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