Chtěli byste se naučit, jak přidat vlastní písma na web WordPress?

Proč dělat váš blog nudným používáním standardních písem? Nechte svůj blog mluvit o vaší živé osobnosti a tématech, která pokrýváte, pomocí široké škály vlastních písem. Vlastní písma jsou skvělou funkcí, díky které bude váš blog vypadat lépe než ostatní.

Přiznejme si to; všichni milujeme blogy a webové stránky se správnými fonty. Nejen, že zdobí web, ale také pomáhají přilákat uživatele k vašemu obsahu. Výběr standardních písem WordPress je však omezený a závisí na motivu, který používáte. Dobrou zprávou je, že je můžete přidat ručně nebo pomocí WordPress pluginy specializované.

A zde vyvstávají dvě otázky: kde získat vlastní písma pro WordPress a jak nainstalovat vlastní písma na vašem webu.

Pojďme zjistit.

Proč bych měl používat vlastní písma?

Pryč jsou časy, kdy byly Times New Roman a Georgia považovány za jediné typy písma pro text na webových stránkách. Za posledních pár let se písmový prostor zcela změnil s příchodem písem jako např Google Fonts a další.

Dnes jsou na internetu k dispozici stovky bezplatných písem, informačních a školicích pomůcek a návrhářských zdrojů. Na rozdíl od Adobe Illustratoru, Photoshopu a dalších klasických aplikací vám WordPress nedává plnou kontrolu nad výchozími fonty. Pouze některá témata WordPress se rozhodnou podporovat a používat vlastní písma.

V tomto článku se proto dozvíte, jak najít vhodná vlastní písma a použít je na svém webu WordPress.

Důležitost používání vlastních písem

Ptáte se, proč měnit písma, odsazení slov, řádkování, mezery mezi písmeny nebo sytost písma? Některé studie to však ukazují typografie zlepšuje čtení s porozuměním.

Hodně záleží na konstrukci fontů. Na vědomé i podvědomé úrovni – každý hodnotí obsah webové stránky podle návrhu.

Design písma ovlivňuje čtenáře, i když mu nevěnují pozornost. Vzdát se designu písem znamená vzdát se samotného vývoje! Na tom závisí nálada čtenáře. Písmo usnadňuje čtení nebo nutí uživatele opustit stránku.

Všechny webové prohlížeče obsahují sadu výchozích písem. To znamená, že pokud není font specifikován v CSS stránky, použije se standardní verze. Stále můžete používat výchozí písma, ale uživatelům to znesnadňují. Proto je nezbytné používat vlastní písmo. Pokud vám vaše téma WordPress nedává možnosti změnit písmo, existuje spousta webů a nástrojů, které vám mohou pomoci.

Alternativy písem Google

přidat vlastní písma

Mnoho z vás zná Písma Google. Existuje mnohem více webových stránek, kde najdete krásná písma. Některé z nich jsou zdarma pro osobní použití. Pokud potřebujete komerční využití, budete potřebovat licenci. Písma Google a písma Adobe Edge jsou zdarma. To je důvod, proč nejsou tak jedinečné.

Zde jsou některé další zdroje pro hledání písem pro bezplatné a komerční použití:

  1. TemplateMonster — Na webu TemplateMonster najdete vše, co potřebujete pro webdesign. Existuje také mnoho písem a balíčků písem pro osobní použití za nízkou cenu. Kromě toho, Abychom vám pomohli vybrat, všechna písma prezentovaná na brožurách nebo rámech. Každé písmo je také prezentováno s komerční licencí.
  2. MyFonts — MyFonts aktuálně nabízí největší výběr písem na světě. Ceny se zde však pohybují i ​​ve vyšším segmentu. Takže pokud máte omezený rozpočet, nemusí to být pro vás.
  3. FontSpring — Fontspring prodává nová písma pro komerční použití. Ale téměř v každé rodině lze pro osobní účely použít 1-2 bezplatná písma. K dispozici je také samostatná sekce s bezplatnými fonty. Kolekce je živá. Před stažením si však budete muset pečlivě prostudovat licenční informace pro konkrétní písmo.
  4. cufonfonts — Je to také obrovská sbírka různých písem. Vyberte libovolný a zobrazí se stránka s podrobnými informacemi o něm. Volných písem je dostatek a jsou rozděleny do jednotlivých sekcí. Systém třídění na CufonFonts je poměrně flexibilní a pohodlný. Součástí je také podpora Webfontu.
  5. Dafont — Další přístupná sbírka 3 bezplatných písem. Většina z nich je určena pouze pro osobní použití. Skvělou funkcí DaFont je systém kategorií. Můžete si vybrat písma ve stylu komiksů, videoher, vintage atd….

Výběr písem je velmi lákavý, protože všechny jsou krásné. Ale neměli byste si moc vybírat. Na webu nepoužívejte více než dvě písma web. Potomvzhled vašeho webu bude konzistentní. Jakmile si vyberete písma, nezapomeňte nahrát soubory pro každý styl, který budete používat (běžné, tučné, kurzíva atd.).

Nyní, když jste vybrali vhodné písmo pro svůj web, pojďme zjistit, jak jej přidat.

Jak přidat vlastní písma do WordPress

Existuje několik způsobů, jak přidat písma na web WordPress:

  1. pluginy : v tomto případě jiný WordPress pluginy se používají k usnadnění procesu.
  2. ruční : při použití této metody potřebujete písmo stažené z webu a upravit soubor CSS.
  3. Témata: Mnoho oblíbených motivů má vestavěné možnosti přizpůsobení vašich písem (poznámka – touto možností se nebudeme zabývat, protože proces se bude lišit v závislosti na motivu, který používáte.

Možnost 1 – Změňte písma WordPress pomocí pluginů

Pokud nás nezajímají globální změny, můžeme nainstalovat WordPress pluginy který změní písma na vašem webu.

Vlastnosti vlastních pluginů písem

Open source software má výhodu pro zájem komunity a WordPress má tuto výhodu také. Několik pluginů WordPress vám umožňuje přidávat vlastní písma. Jak vybrat vhodný plugin, když je jich tolik? Jaké jsou funkce pluginů WordPress s vlastním písmem?

Zde je několik bodů, které je třeba zvážit:

  • Schopnost používat vlastní písmo
  • Schopnost používat více písem
  • Záhlaví a cílové komponenty
  • Bonus: možnost změnit nastavení písma z vizuálního editoru

To je vše. První charakteristika v seznamu je velmi důležitá. Písma můžete stále stahovat z webů jako DaFont, Font Squirrel atd., ale musíte je mít možnost nahrát na WordPress.

Podívejme se na některé pluginy pro WordPress, které umožňují nahrávat vlastní písma.

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

Tento plugin WordPress umožní svým uživatelům automaticky kombinovat nejnovější verzi písem Lepší písmo Awesome s CSS, krátké kódy a další. Kromě toho je tento plugin WordPress automaticky aktualizován.

Úžasné lepší písmo – nejlepší pluginy pro typografii WordPress

Najdete zde funkce: pravidelné aktualizace, generátor zkrácených kódů, kompatibilitu s dalšími pluginy WordPress atd ...

Stáhnout | Demo | Web hosting

2. Google Fonts pro WordPress

Tento plugin WordPress se skládá ze speciálních písem 877, která vám umožní používat všechna písma na vašich webových stránkách WordPress. Díky náhledu v reálném čase vám umožní zjistit, jak bude váš web vypadat, jakmile bude použito písmo. 

Písma Google – nejlepší typografické pluginy WordPress

Kromě toho ji budete moci uložit a upravit na frontendu, když najdete kombinaci, která se vám bude líbit.

Mezi jeho vlastnosti patří: náhled v reálném čase, docela pokročilý SEO, vícejazyčná podpora, podpora dalších 870 + Google Fonts, snadné aktualizace a další.

Stáhnout | Demo | Web hosting

3.Fonts Plugin

Fonts Plugin je bezplatný plugin WordPress, který uživatelům umožňuje přístup ke knihovnám Google Fonts a Adobe Fonts. S tímto pluginem WordPress si můžete vybrat z více než 1000 písem Google a Adobe, používat na svém webu více písem a testovat různé možnosti pomocí funkce náhledu pluginu v reálném čase v přizpůsobení WordPress.

nejlepší pluginy pro typografii wordpress

Chcete-li získat další způsoby přizpůsobení typografie webu, jako je velikost písma, mezery mezi písmeny a výška řádků, můžete upgradovat na prémiovou verzi, Fonts Plugin Pro.Stáhnout | Demo | Web hosting

4. Snadné fonty Google

Snadné Google Fonts je jedním z nejlepší pluginy WordPress přizpůsobit typografii vašeho webu. Stejně jako plugin Fonts vám umožňuje vybrat si ze stovek písem Google a zobrazit si jejich náhled v nástroji Customizer, než je přidáte na svůj web.

10 WordPress typografických pluginů pro váš blog

Přestože poskytuje přístup k menšímu počtu Google Fonts, je unikátní tím, že umožňuje vytvářet vlastní ovládací prvky a pravidla písem v oblasti pro správu, která se okamžitě objeví v přizpůsobení WordPressu.

Stáhnout | Demo | Web hosting

Možnost 2 – Nainstalujte vlastní písma WordPress ručně

Pomocí direktivy @font-face můžete ke svému webu připojit jedno nebo více písem. Tato metoda má ale svá pro a proti.

výhody:

  • Díky CSS můžete připojit fonty libovolného formátu: ttf, otf, woff, svg.
  • Soubory písem budou umístěny na vašem serveru – nebudete závislí na službách třetích stran.

nevýhody :

  • Pro správné připojení písma pro každý styl musíte zaregistrovat samostatný kód.
  • Bez znalosti CSS se můžete snadno splést.

Ale není to skutečný problém, pokud můžete stačí zkopírovat hotový kód a kde musíte zadat své hodnoty.

Poznámka : Než začnete, ujistěte se vytvořit dětské téma pro váš web. Tímto způsobem můžete provést všechny změny v podřízeném motivu a ponechat hlavní motiv, abyste jej mohli v případě potřeby v budoucnu snadno aktualizovat.

Krok 1: Vytvořte složku „fonts“.

Ve svém dětském motivu vytvořte novou složku „fonts“ pod: wp-content/themes/your-child-theme/fonts

Krok 2. Nahrajte stažené soubory písem na svůj web

To lze provést prostřednictvím ovládacího panelu vašeho hostingu nebo pomocí FTP.

Přidejte všechny soubory písem do nově přidané složky písem: wp-content/themes/ Ve svém dětském motivu vytvořte novou složku „fonts“ pod: wp-content/themes/your-child-theme/fonts které jste vytvořili.

Krok 3. Importujte písma prostřednictvím šablony stylů podřízeného motivu

Otevřít soubor style.css vašeho podřízeného motivu a přidejte následující kód na začátek souboru CSS (za komentář podřízeného motivu):

@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ázev písma a hodnota vlastnosti src (údaje v závorkách v uvozovkách) je jejich umístění (relativní odkazy). Musíme specifikovat každý styl zvlášť.

Protože nejprve připojujeme normální styl, nastavíme vlastnosti font-weight a font-style na normální.

Krok 4. Při přidávání kurzíva, napište následující:

@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;
}

Když je vše při starém, jako jediní připojíme vlastnost font style na kurzívu.

Krok 5. Chcete-li přidat tučné písmo, přidejte následující 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 vlastnost font-weight na tučné.

Nezapomeňte zadat správné umístění souborů písem pro každý styl.

Krok 6. Chcete-li připojit tučnou kurzívu, zadejte následující:

@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še. Nyní, když jste ke svému webu připojili čtyři styly písem.

Ale je tu jedna poznámka: toto připojení písem se v Internet Exploreru 8 nezobrazí správně. Útěchou je, že IE8 stále používá jen velmi málo lidí.

Další doporučené zdroje

Zveme vás také, abyste si prostudovali níže uvedené zdroje, abyste se dostali dále do sevření a kontroly nad svým webem a blogem.

Proč investovat do čističky vzduchu?

Čeho si uživatelé všimnou jako první, když navštíví váš web? Správně, jeho design! Většina designu spoléhá na správné použití krásných písem. Takže se musíte postarat o design písma vašeho webu. Přidejte kód nebo použijte jeden z výše uvedených pluginů pro vložení nového stylu písma. Jak si to vyberete, je jen na vás.

Ujistěte se, že na stejném webu nepoužíváte více než dvě písma. Protože čím více vlastních písem na web přidáte, tím více se sníží rychlost webu.

To je vše pro tento článek, který vám ukáže, jak přidat vlastní písma na web WordPress. Zveme vás k vyzkoušení. Máte-li jakékoli obavy nebo návrhy, dejte nám vědět commentaires.

Budete však také moci konzultovat naše ressources, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.

Mezitím sdílejte tento článek na různých sociálních sítích.   

...