Ako pridať vlastné písma na webovú stránku WordPress

Chceli by ste sa naučiť, ako pridať vlastné písma na webovú stránku WordPress?

Prečo je váš blog nudný používaním štandardných písiem? Nechajte svoj blog hovoriť o vašej živej osobnosti a témach, ktoré pokrývate, pomocou širokej škály vlastných písiem. Vlastné písma sú skvelá funkcia, vďaka ktorej bude váš blog vyzerať lepšie ako ostatní.

Priznajme si to; všetci milujeme blogy a webové stránky so správnym písmom. Nielenže zdobia webovú stránku, ale tiež pomáhajú prilákať používateľa k vášmu obsahu. Výber štandardných písiem WordPress je však obmedzený a závisí od témy, ktorú používate. Dobrou správou je, že ich môžete pridať ručne alebo pomocou WordPress pluginy špecializovaný.

A tu vyvstávajú dve otázky: kde získať vlastné písma pre WordPress a ako nainštalovať vlastné písma na vašich webových stránkach.

Poďme zistiť.

Prečo by som mal používať vlastné písma?

Časy, keď sa Times New Roman a Georgia považovali za jediné typy písma pre text na webových stránkach, sú preč. Za posledných pár rokov sa fontový priestor úplne zmenil s nástupom fontov ako napr Google Fonts a ďalšie.

Dnes sú na internete k dispozícii stovky bezplatných fontov, informačných a školiacich pomôcok a zdrojov pre návrh. Na rozdiel od Adobe Illustrator, Photoshop a iných klasických aplikácií vám WordPress nedáva úplnú kontrolu nad predvolenými písmami. Iba niektoré témy WordPress sa rozhodnú podporovať a používať vlastné písma.

Preto sa v tomto článku dozviete, ako nájsť vhodné vlastné fonty a použiť ich na svojom webe WordPress.

Dôležitosť používania vlastných písiem

Pýtate sa, prečo meniť písma, odsadenie slov, riadkovanie, medzery medzi písmenami alebo sýtosť písma? Niektoré štúdie to však ukazujú typografia zlepšuje čítanie s porozumením.

Veľa závisí od konštrukcie fontov. Na vedomej a podvedomej úrovni – každý hodnotí obsah webovej stránky podľa dizajnu.

Dizajn písma ovplyvňuje čitateľov, aj keď mu nevenujú pozornosť. Vzdať sa dizajnu písma znamená vzdať sa samotného vývoja! Od toho závisí nálada čitateľa. Písmo uľahčuje čítanie alebo núti používateľov opustiť stránku.

Všetky webové prehliadače obsahujú sadu predvolených písiem. To znamená, že ak font nie je špecifikovaný v CSS stránky, použije sa štandardná verzia. Stále môžete používať predvolené písma, ale používateľom to sťažujú. Preto je nevyhnutné použiť vlastné písmo. Ak vám téma WordPress nedáva možnosti na zmenu písma, existuje veľa webových stránok a nástrojov, ktoré vám môžu pomôcť.

Alternatívy písiem Google

Mnohí z vás poznajú Písma Google. Existuje oveľa viac webových stránok, kde nájdete krásne písma. Niektoré z nich sú zadarmo na osobné použitie. Ak potrebujete komerčné využitie, budete potrebovať licenciu. Písma Google a písma Adobe Edge sú bezplatné. To je dôvod, prečo nie sú také jedinečné.

tu sú nejaké ďalšie zdroje na vyhľadávanie písiem na bezplatné a komerčné použitie:

1. Template Monster — Na stránke TemplateMonster nájdete všetko, čo potrebujete pre webdizajn. Existuje tiež veľa písiem a balíkov písiem na osobné použitie za nízku cenu. Okrem toho vám pri výbere pomôžu všetky fonty prezentované na brožúrach alebo rámoch. Každé písmo je prezentované aj s komerčnou licenciou.
2. MyFonts — MyFonts v súčasnosti ponúka najväčší výber písiem na svete. Ceny sa tu však pohybujú aj vo vyššom segmente. Takže ak máte obmedzený rozpočet, nemusí to byť pre vás.
3. FontSpring — Fontspring predáva nové fonty na komerčné použitie. Ale takmer v každej rodine je možné použiť 1-2 bezplatné písma na osobné účely. K dispozícii je tiež samostatná sekcia s bezplatnými typmi písma. Zbierka je živá. Pred stiahnutím si však budete musieť dôkladne preštudovať licenčné informácie pre konkrétne písmo.
4. cufonfonts — Je to tiež obrovská zbierka rôznych písiem. Vyberte ľubovoľný a zobrazí sa stránka s podrobnými informáciami o ňom. Písma zadarmo je dostatok a sú rozdelené do jednotlivých sekcií. Systém triedenia na CufonFonts je pomerne flexibilný a pohodlný. Zahrnutá je aj podpora Webfontu.
5. Dafont — Ďalšia prístupná zbierka 3 500 bezplatných písiem. Väčšina z nich je určená len na osobné použitie. Skvelou funkciou DaFont je systém kategórií. Môžete si vybrať písma v štýle komiksov, videohier, vintage atď.

Výber fontov je veľmi lákavý, pretože všetky sú krásne. Nemali by ste si však vyberať veľa. Na stránke nepoužívajte viac ako dva typy písma web. Potomvzhľad vašej webovej stránky bude konzistentný. Keď si vyberiete písma, nezabudnite nahrať súbory pre každý štýl, ktorý budete používať (bežné, tučné, kurzíva atď.).

Teraz, keď ste vybrali vhodné písmo pre váš web, poďme zistiť, ako ho pridať.

Ako pridať vlastné písma do WordPress

Existuje niekoľko spôsobov, ako pridať písma na webovú stránku WordPress:

1. pluginy : v tomto prípade iný WordPress pluginy sa používajú na uľahčenie procesu.
2. ručné : pomocou tejto metódy potrebujete stiahnuť písmo zo stránky a upraviť súbor CSS.
3. Témy: Mnoho populárnych motívov má vstavané možnosti prispôsobenia vašich písiem (poznámka – touto možnosťou sa nebudeme zaoberať, pretože proces sa bude líšiť v závislosti od motívu, ktorý používate.

Možnosť 1 – Zmeňte písma WordPress pomocou doplnkov

Ak nás nezaujímajú globálne zmeny, môžeme nainštalovať WordPress pluginy ktorý zmení písma na vašom webe.

Vlastnosti doplnkov pre vlastné písmo

Softvér s otvoreným zdrojovým kódom má výhodu pre záujem komunity a túto výhodu má aj WordPress. Niekoľko doplnkov WordPress vám umožňuje pridávať vlastné písma. Ako si vybrať vhodný plugin, keď je ich toľko? Aké sú funkcie doplnkov WordPress s vlastným písmom?

Tu je niekoľko bodov, ktoré je potrebné zvážiť:

• Schopnosť používať vlastné písmo
• Schopnosť používať viacero typov písma
• Hlavičky a cieľové komponenty
• Bonus: možnosť zmeniť nastavenia písma z vizuálneho editora

To je všetko. Prvá charakteristika v zozname je veľmi dôležitá. Písma si stále môžete stiahnuť z webových stránok ako DaFont, Font Squirrel atď., ale musíte ich mať možnosť nahrať na WordPress.

Pozrime sa na niektoré doplnky pre WordPress, ktoré vám umožňujú nahrávať vlastné písma.

1. Lepšie úžasné písmo

Tento doplnok WordPress umožní svojim používateľom automaticky kombinovať najnovšiu verziu písiem typu Lepšie písmo Awesome s CSS, krátke kódy a ďalšie. Okrem toho sa tento doplnok WordPress aktualizuje automaticky.

Nájdete ako funkcionalitu: pravidelné aktualizácie, generátor krátkych kódov, kompatibilita s ostatnými doplnkami WordPress atď ...

Stiahnuť | demo | web hosting

2. Google Fonty pre WordPress

Tento doplnok WordPress pozostáva zo špeciálnych písiem 877, ktoré vám umožňujú používať všetky písma na vašich webových stránkach WordPress. Vďaka ukážke v reálnom čase vám umožní zistiť, ako bude váš web vyzerať po použití písma. 

Keď nájdete kombináciu, ktorá sa vám bude páčiť, budete ju môcť uložiť a upraviť na rozhraní frontend.

Medzi jeho vlastnosti patrí: náhľad v reálnom čase, a pomerne pokročilé SEO, viacjazyčná podpora, podpora ďalších 870 + písma Google, jednoduché aktualizácie a ďalšie.

Stiahnuť | demo | web hosting

3. Doplnok Fonts

Fonts Plugin je bezplatný doplnok WordPress, ktorý používateľom umožňuje prístup ku knižniciam Google Fonts a Adobe Fonts. S týmto doplnkom WordPress si môžete vybrať z viac ako 1000 XNUMX písiem Google a Adobe, používať na svojom webe viacero písiem a testovať rôzne možnosti pomocou funkcie ukážky doplnku v reálnom čase v prispôsobovači WordPress.

Ak chcete získať ďalšie spôsoby prispôsobenia typografie svojich webových stránok, ako je veľkosť písma, medzery medzi písmenami a výška riadkov, môžete prejsť na prémiovú verziu, Fonts Plugin Pro.Stiahnuť | demo | web hosting

4. Jednoduché písma Google

Easy Google Fonts je jedným z najlepšie doplnky WordPress prispôsobiť typografiu svojej webovej stránky. Podobne ako doplnok Fonts Plugin vám umožňuje vybrať si zo stoviek písiem Google a zobraziť ich ukážku v nástroji Customizer pred ich pridaním na vašu webovú lokalitu.

Aj keď poskytuje prístup k menšiemu počtu Google Fonts, je jedinečný v tom, že umožňuje vytvárať vlastné ovládacie prvky a pravidlá pre písmo v oblasti admin, ktoré sa okamžite objavia v prispôsobovači WordPress.

Stiahnuť | demo | web hosting

Možnosť 2 – Manuálna inštalácia vlastných písiem WordPress

Pomocou direktívy @font-face môžete k svojej webovej lokalite pripojiť jedno alebo viac fontov. Ale táto metóda má svoje klady a zápory.

výhody:

• Vďaka CSS môžete pripojiť fonty akéhokoľvek formátu: ttf, otf, woff, svg.
• Súbory písiem budú umiestnené na vašom serveri – nebudete závislí od služieb tretích strán.

nevýhody :

• Pre správne pripojenie písma pre každý štýl musíte zaregistrovať samostatný kód.
• Bez znalosti CSS sa môžete ľahko zmiasť.

Ale to nie je skutočný problém, ak môžete stačí skopírovať hotový kód a kde potrebujete špecifikovať svoje hodnoty.

Poznámka : Skôr ako začnete, uistite sa vytvorte detskú tému pre váš web. Týmto spôsobom môžete vykonať všetky zmeny v detskom motíve a ponechať hlavný motív, aby ste ho mohli v prípade potreby v budúcnosti jednoducho aktualizovať.

Krok 1: Vytvorte priečinok „fonts“.

Vo svojom detskom motíve vytvorte nový priečinok „písma“ pod: wp-content/themes/your-child-theme/fonts

Krok 2. Nahrajte stiahnuté súbory písiem na svoj web

Môžete to urobiť cez ovládací panel vášho hostingu alebo cez FTP.

Pridajte všetky súbory písiem do priečinka novo pridaných písiem: wp-content/themes/ Vo svojej detskej téme vytvorte nový priečinok „fonts“ pod: wp-content/themes/your-child-theme/fonts ktoré ste vytvorili.

Krok 3. Importujte písma prostredníctvom šablóny so štýlmi podradenej témy

otvoriť súbor style.css vašej podradenej témy a pridajte nasledujúci kód na začiatok súboru CSS (za komentár k podradenej téme):

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont.eot');
src: url('fonts/WebFont.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont.woff') format('woff'),
url('fonts/WebFont.ttf') format('truetype'),
url('fonts/WebFont.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: normal;
}

kde MyWebFont je názov písma a hodnota vlastnosti src (údaje v zátvorkách v úvodzovkách) je ich umiestnenie (relatívne odkazy). Musíme špecifikovať každý štýl zvlášť.

Keďže najprv pripájame normálny štýl, nastavíme vlastnosti font-weight a font-style na normálne.

Krok 4. Pri pridávaní kurzíva, napíš nasledovné:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic.eot');
src: url('fonts/WebFont-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic.woff') format('woff'),
url('fonts/WebFont-Italic.ttf') format('truetype'),
url('fonts/WebFont-Italic.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: italic;
}

Keď je všetko po starom, ako jediní pripojíme vlastnosť štýlu písma na kurzívu.

Krok 5. Ak chcete pridať tučné písmo, pridajte nasledujúci kód:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Bold.eot');
src: url('fonts/WebFont-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Bold.woff') format('woff'),
url('fonts/WebFont-Bold.ttf') format('truetype'),
url('fonts/WebFont-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: normal;
}

Kde nastavíme vlastnosť font-weight na tučné.

Nezabudnite zadať správne umiestnenie súborov písiem pre každý štýl.

Krok 6. Ak chcete pripojiť tučnú kurzívu, zadajte nasledujúce:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic-Bold.eot');
src: url('fonts/WebFont-Italic-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic-Bold.woff') format('woff'),
url('fonts/WebFont-Italic-Bold.ttf') format('truetype'),
url('fonts/WebFont-Italic-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: italic;
}

No to je všetko. Teraz, keď ste na svoj web pripojili štyri štýly písma.

Je tu však jedna poznámka: toto pripojenie písma sa v Internet Exploreri 8 nezobrazí správne. Útechou je, že IE8 stále používa veľmi málo ľudí.

Ďalšie odporúčané zdroje

Tiež vás pozývame, aby ste si prečítali zdroje uvedené nižšie, aby ste sa presadili a ovládali svoje webové stránky a blog.

• 10 WordPress akordeónových doplnkov pre webovú stránku
• Ako pridať viac stĺpcov do WordPress
• Niektoré zásuvné moduly pre integráciu služieb Google na svojom blogu
• Doplnky 5 WordPress na zobrazenie upozornení
• Za použitia rôznych pozadí WordPress

záver

Čo si používatelia ako prvé všimnú, keď navštívia váš web? Správne, jeho dizajn! Väčšina dizajnu sa spolieha na správne použitie krásnych fontov. Takže sa musíte postarať o dizajn písma vašej webovej stránky. Pridajte kód alebo použite niektorý z vyššie uvedených doplnkov na vloženie nového štýlu písma. Ako si to vyberiete, je len na vás.

Uistite sa, že na tej istej webovej lokalite nepoužívate viac ako dva typy písma. Keďže čím viac vlastných písiem na web pridáte, tým viac sa zníži rýchlosť webu.

To je všetko pre tento článok, ktorý vám ukáže, ako pridať vlastné písma na webovú stránku WordPress. Pozývame vás vyskúšať. Ak máte nejaké obavy alebo návrhy, dajte nám vedieť Komentáre.

Môžete sa však poradiť aj s našimi zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.

Medzitým, zdieľajte tento článok na rôznych sociálnych sieťach.   

...