KUBASSI

Vytváranie vlastného obrázkového písma je skvelý spôsob, ako pridať unikátny dizajnový prvok na váš web bez potreby použitia HTML. Tento článok vás krok za krokom prevedie procesom vytvorenia a implementácie vlastného obrázkového písma vo WordPress, pričom sa zameriame na riešenie bez potreby priameho zásahu do HTML kódu.

1. Čo je obrázkové písmo?

Obrázkové písmo je typ písma, kde sú tradičné znaky nahradené obrázkami alebo ikonami. Môžete vytvoriť písmo, ktoré obsahuje ikony, logá alebo akékoľvek grafické prvky. Výhodou je, že tieto ikony môžete používať ako bežné písma a formátovať ich pomocou CSS.

2. Príprava obrázkového písma

Pred implementáciou obrázkového písma vo WordPress je potrebné ho najprv vytvoriť. Tu sú kroky, ako na to:

a. Vytvorenie ikon

1. Navrhnite ikony: Použite grafický softvér ako Adobe Illustrator, Inkscape alebo Sketch na vytvorenie vašich ikon. Uistite sa, že ikony sú vo vektorovom formáte (SVG), aby sa kvalitne škálovali.
2. Exportujte ikony: Exportujte svoje ikony do formátu SVG. Tento formát je ideálny pre ikony, ktoré chcete použiť v písmene.

b. Vytvorenie písma z ikon

1. Použite nástroj na vytvorenie písmene: Môžete využiť rôzne online nástroje a desktopové aplikácie na prevod vašich ikon na písmo. Niektoré obľúbené nástroje zahŕňajú:
   • FontForge: Open-source nástroj na vytváranie a úpravu písmien.
   • IcoMoon: Online nástroj, ktorý vám umožňuje vytvoriť vlastné ikony a generovať z nich písmo.
   • Fontastic: Ďalší online nástroj na vytváranie vlastných písiem.
2. Nahrávanie ikon a generovanie písma: Použite vybraný nástroj na nahranie SVG súborov a konfiguráciu písma. Následne vygenerujte súbor písma (zvyčajne vo formáte TTF, WOFF alebo EOT).
3. Stiahnutie a uloženie súborov: Po vygenerovaní písma stiahnite súbory písma a uložte ich na svoje zariadenie.

3. Implementácia písma vo WordPress

Po vytvorení písma môžete prejsť k jeho implementácii vo WordPress. Tento proces zahŕňa nahranie súborov písma a ich používanie prostredníctvom CSS.

a. Nahratie súborov písma

1. Pripojte sa k WordPressu cez FTP: Použite FTP klienta (napr. FileZilla) alebo správcu súborov vo vašom hostingovom paneli.
2. Nahranie súborov: Přejděte do složky vaší šablony (napr. wp-content/themes/your-theme) a vytvorte novú zložku s názvom fonts alebo podobným. Nahrávajte súbory písma (TTF, WOFF, EOT) do tejto zložky.

b. Použitie písma cez CSS

1. Úprava súboru style.css: Otvorte súbor style.css vašej šablony a pridajte nasledujúci kód na načítanie vlastného písma:
   @font-face {
font-family: 'MyCustomFont';
src: url('fonts/mycustomfont.eot'); /* IE9 Compat Modes */
src: local('MyCustomFont'), local('MyCustomFont-Regular'),
url('fonts/mycustomfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/mycustomfont.woff2') format('woff2'), /* Super Modern Browsers */
url('fonts/mycustomfont.woff') format('woff'), /* Pretty Modern Browsers */
url('fonts/mycustomfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/mycustomfont.svg#MyCustomFont') format('svg'); /* Legacy iOS */
font-weight: normal;
font-style: normal;
}


   Nahrádzajte mycustomfont názvom vášho písma a skontrolujte, či cesty k súborom sú správne.

2. Použitie písma v CSS: Pre použitie písma v dizajne, pridajte CSS pravidlá, ktoré používajú vaše nové písmo:
   .icon {
font-family: 'MyCustomFont';
font-size: 24px;
/* ďalšie štýlovanie */
}


   Ak vaše písmo obsahuje špecifické znaky, môžete ich použiť ako obsah v CSS:

   .icon-home::before {
content: '\e900'; /* Unicode znak pre vašu ikonu */
}


4. Testovanie a ladenie

1. Overenie funkčnosti: Skontrolujte, či sa ikony zobrazujú správne na vašom webe. Testujte web na rôznych zariadeniach a prehliadačoch, aby ste sa uistili, že všetko funguje správne.
2. Ladenie štýlov: Ak sa ikony nezobrazujú správne, skontrolujte cesty k súborom písma a CSS pravidlá. Uistite sa, že nie sú žiadne konflikty s inými štýlmi alebo písmami na vašom webe.

Záver: Vytvorenie a implementácia vlastného obrázkového písma vo WordPress vám umožní prispôsobiť dizajn vašich stránok unikátnymi ikonami a grafickými prvkami. Tento postup vám poskytuje flexibilitu v dizajne bez nutnosti priameho zásahu do HTML kódu, čo je veľmi užitočné pre udržanie čistého a prehľadného kódu. Veríme, že tento návod vám pomôže efektívne integrovať vlastné obrázkové písmo na váš web.