Ako pridať vlastné písma do

Chcete do WordPress pridať vlastné písma? Vlastné písma vám umožňujú používať nádhernú kombináciu rôznych typov písma na vašom webe na zlepšenie typografie a používateľského prostredia.


Okrem dobrého vzhľadu vám vlastné písma môžu pomôcť zlepšiť čitateľnosť, vytvoriť imidž značky a zvýšiť čas, ktorý používatelia strávia na vašom webe..

V tomto článku vám ukážeme, ako pridať vlastné písma do WordPress pomocou metód Google Fonts, TypeKit a CSS3 @ Font-Face..

Pridávanie vlastných fontov do WordPress

Poznámka: Načítanie príliš veľkého počtu písiem môže spomaliť vaše webové stránky. Odporúčame vám vybrať dve písma a použiť ich na vašom webe. Ukážeme vám tiež, ako ich správne načítať bez spomalenia vášho webu.

Predtým, ako sa pozrieme na to, ako pridať vlastné písma do programu WordPress, pozrime sa, ako nájsť vlastné písma, ktoré môžete použiť..

Ako nájsť vlastné písma na použitie v

Písmo bývalo drahé, ale nič viac. Existuje veľa miest, kde nájdete skvelé bezplatné webové písma, ako sú napríklad Google Fonts, Typekit, FontSquirrel a fonts.com..

Ak neviete, ako miešať a porovnávať písma, skúste Font Pair. Pomáha návrhárom spárovať krásne písma Google.

Pri výbere písiem nezabudnite, že použitie príliš veľkého množstva vlastných písiem spomalí váš web. Z tohto dôvodu by ste mali vybrať dve písma a používať ich v celom návrhu. Tým sa tiež dosiahne konzistentnosť vášho návrhu.

Výukový program pre video

Prihláste sa na odber WPBeginner

Ak sa vám video nepáči, alebo uprednostňujete písomného sprievodcu, pokračujte v čítaní.

Pridávanie vlastných písiem do WordPress z Písiem Google

Ukážka písma Google

Google Fonts je najväčšia, bezplatná a najbežnejšie používaná knižnica fontov medzi vývojármi webových stránok. Existuje niekoľko spôsobov, ako môžete v aplikácii WordPress pridávať a používať písma Google.

Metóda 1: Pridanie vlastných písem pomocou jednoduchého doplnku Google Fonts

Ak chcete na svoj web pridať a používať písma Google, potom je táto metóda zďaleka najjednoduchšia a odporúčaná pre začiatočníkov.

Najprv musíte nainštalovať a aktivovať doplnok Easy Google Fonts. Ďalšie informácie nájdete v našej podrobnej príručke o tom, ako nainštalovať doplnok WordPress.

Po aktivácii môžete ísť na Vzhľad »Prispôsobiteľ str. Tým sa otvorí rozhranie na prispôsobenie živých tém, v ktorom sa zobrazí nová sekcia Typografia.

Typografia prispôsobenia

Kliknutím na typografiu zobrazíte rôzne sekcie svojho webu, na ktorých môžete použiť písma Google. Stačí kliknúť na položku „Upraviť písmo“ pod sekciou, ktorú chcete upraviť.

Nastavenia typografie

V časti rodiny písiem môžete vybrať ľubovoľné písmo Google, ktoré chcete použiť na svojich webových stránkach. Môžete tiež zvoliť štýl písma, veľkosť písma, výplň, okraj a ďalšie.

V závislosti od vašej témy môže byť počet sekcií obmedzený a možno nebudete môcť priamo zmeniť výber písma pre mnoho rôznych oblastí vášho webu..

Doplnok na vyriešenie tohto problému vám tiež umožňuje vytvoriť si vlastné ovládacie prvky a používať ich na zmenu písiem na svojich webových stránkach.

Najprv musíte navštíviť Nastavenia »Písma Google a zadajte názov ovládacieho prvku písma. Použite niečo, čo vám pomôže rýchlo pochopiť, kde budete používať tento ovládací prvok písma.

Sekcia ovládania písma

Potom kliknite na tlačidlo „Vytvoriť kontrolu písma“ a potom sa zobrazí výzva na zadanie selektorov CSS.

Môžete pridať prvky HTML, na ktoré chcete zacieliť (napríklad h1, h2, p, blockquote) alebo použiť triedy CSS.

Pomocou nástroja Inspect v prehliadači môžete zistiť, ktoré triedy CSS sa používajú v konkrétnej oblasti, ktorú chcete zmeniť.

Pridajte selektory CSS

Teraz uložte nastavenia kliknutím na tlačidlo „Uložiť kontrolu písma“. Môžete si vytvoriť ľubovoľný počet ovládačov písiem, koľko potrebujete pre rôzne sekcie svojho webu.

Ak chcete používať tieto radiče písiem, musíte prejsť na Vzhľad »Prispôsobiteľ a kliknite na kartu Typografia.

V časti Typografia sa teraz zobrazí aj možnosť „Typová typografia“. Kliknutím naň sa zobrazia vaše vlastné ovládacie prvky písma, ktoré ste vytvorili predtým. Teraz stačí kliknúť na tlačidlo Upraviť a vybrať písma a vzhľad tohto ovládacieho prvku.

Možnosť typografie témy

Nezabudnite kliknúť na tlačidlo uložiť alebo zverejniť a uložiť zmeny.

Metóda 2: Ručne pridajte písma Google do WordPress

Táto metóda vyžaduje, aby ste do tematických súborov WordPress pridali kód. Ak ste to ešte neurobili, prečítajte si nášho sprievodcu o tom, ako skopírovať a prilepiť kód v programe WordPress.

Najprv navštívte knižnicu fontov Google a vyberte písmo, ktoré chcete použiť. Ďalej kliknite na tlačidlo rýchleho použitia pod fontom.

Vyberte štýly písma, ktoré chcete použiť

Na stránke s písmom sa zobrazia štýly dostupné pre dané písmo. Vyberte štýly, ktoré chcete použiť vo svojom projekte, a potom kliknite na tlačidlo bočného panela v hornej časti.

Získajte odkaz na vloženie písma

Ďalej budete musieť na bočnom paneli prepnúť na kartu Vložiť a skopírovať kód na vloženie.

Existujú dva spôsoby, ako môžete pridať tento kód na svoju stránku WordPress.

Najskôr jednoducho upravte súbor header.php a vložte kód pred značku.

Ak však nie ste oboznámení s úpravou kódu v programe WordPress, môžete na pridanie tohto kódu použiť doplnok.

Jednoducho nainštalujte a aktivujte doplnok Insert Headers and Footers. Ďalšie informácie nájdete v našej podrobnej príručke o tom, ako nainštalovať doplnok WordPress.

Po aktivácii prejdite na stránku Nastavenia »Vložte hlavičky a päty a vložte kód na vloženie do poľa „Skripty v hlavičke“.

Pridajte na svoj web WordPress kód písma

Nezabudnite kliknúť na tlačidlo Uložiť a uložiť zmeny. Doplnok začne načítavať kód na vloženie písma Google na všetky stránky vášho webu.

Toto písmo môžete použiť v šablóne so štýlmi takto:

.h1 názov stránky {
rodina fontov: ‘Open Sans’, Arial, sans-serif;
}

Podrobnejšie pokyny nájdete v našej príručke o tom, ako pridať písma Google do tém WordPress.

Pridanie vlastných písiem do WordPress pomocou typekit

Typekit Adobe Fonts

Typekit by Adobe Fonts je ďalší bezplatný a prémiový zdroj pre úžasné písma, ktoré môžete použiť vo svojich projekčných projektoch. Majú platené predplatné a obmedzený bezplatný program, ktorý môžete použiť.

Jednoducho si zaregistrujte účet Adobe Fonts a prejdite do sekcie prezerania fontov. Odtiaľ musíte kliknúť na tlačidlo, aby ste vybrali písmo a vytvorili projekt.

Pridajte do projektu typekitové písmo

Ďalej sa zobrazí kód na vloženie s identifikátorom projektu. Ukáže tiež, ako používať písmo v CSS vašej témy.

Tento kód musíte skopírovať a vložiť do časti svojho webu.

Kód na vloženie písma Typekit

Existujú dva spôsoby, ako môžete pridať tento kód na svoju stránku WordPress.

Najskôr jednoducho upravte súbor header.php a vložte kód pred značku.

Ak však nie ste oboznámení s úpravou kódu v programe WordPress, môžete na pridanie tohto kódu použiť doplnok.

Jednoducho nainštalujte a aktivujte doplnok Insert Headers and Footers.

Po aktivácii prejdite na stránku Nastavenia »Vložte hlavičky a päty a vložte kód na vloženie do poľa „Skripty v hlavičke“.

Pridanie Typekit od Adobe Fonts do WordPress

To je všetko, teraz môžete použiť písmo Typekit, ktoré ste vybrali v šablóne so štýlmi témy WordPress, ako je tento:

h1 .site-title {
rodina fontov: gilbert, sans-serif;
}

Podrobnejšie pokyny nájdete v našom návode, ako pridať úžasnú typografiu v programe WordPress pomocou služby Typekit.

Pridávanie vlastných písem do WordPress pomocou CSS3 @ font-face

Najpriamejším spôsobom pridávania vlastných fontov do WordPress je pridanie fontov pomocou metódy CSS3 @ font-face. Táto metóda vám umožňuje používať na vašom webe akékoľvek písmo, ktoré sa vám páči.

Najprv musíte stiahnuť písmo, ktoré sa vám páči, vo webovom formáte. Ak pre svoj font nemáte webový formát, môžete ho previesť pomocou generátora FontSquirrel Webfont.

Akonáhle budete mať súbory webfont, budete ich musieť nahrať na svoj hostingový server WordPress.

Najlepšie miesto na odovzdávanie písiem je v novej zložke „písma“ v adresári témy alebo podradenej témy.

Na nahranie písma môžete použiť FTP alebo Správca súborov vášho cPanelu.

Po nahraní písma musíte načítať písmo do šablóny štýlov pomocou pravidla CSS3 @ font-face, ako je toto:

@ font-face {
rodina fontov: Arvo;
src: url (http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);
font-weight: normal;
}

Nezabudnite nahradiť rodinu fontov a URL vlastnou.

Potom môžete toto písmo použiť kdekoľvek v šablóne so štýlmi, ako je táto:

.h1 názov stránky {
font-family: "Arvo", Arial, bezpatkové;
}

Načítanie písiem priamo pomocou CSS3 @ font-face nie je vždy najlepším riešením. Ak používate písmo od spoločnosti Google Fonts alebo Typekit, potom je najlepšie zaistiť optimálny výkon písma priamo z ich servera..

To je všetko, dúfame, že tento článok vám pomohol pridať vlastné písma do programu WordPress. Môžete tiež vyskúšať našu príručku o používaní ikonových písiem v programe WordPress a o tom, ako zmeniť veľkosť písma v programe WordPress..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me