Ako pridať vlastné písma na vaše stránky WordPress

Ako pridať vlastné písma na vaše stránky WordPress

Prečo je váš blog nudný pomocou štandardných písiem? Nechajte svoj blog hovoriť o svojej pulzujúcej osobnosti a témach, ktoré pokrývate, so širokou škálou vlastných písiem. Vlastné písma sú peknou funkciou, ktorá umožňuje vášmu blogu vyzerať vhodnejšie ako ostatné.


Čelíme tomu; Všetci máme radi blogy a weby so správnymi typmi písma. Nielen zdobia stránky, ale tiež pomáhajú prilákať používateľa k vášmu obsahu. Výber štandardných typov písma 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 špecializovaných doplnkov.

A tu vyvstávajú dve otázky – kde získať vlastné písma pre WordPress a ako nainštalovať vlastné písma na vašom webe WordPress.

Poďme zistiť.

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

Dni pominuli, keď boli Times New Roman a Georgia považované za jediné písmo pre texty na webových stránkach. Počas niekoľkých posledných rokov sa priestor písiem úplne zmenil s príchodom písiem, ako sú napríklad písma Google a ďalšie.

Na internete sú dnes k dispozícii stovky bezplatných písiem, informačných a školiacich pomôcok a zdrojov určených na dizajn. Na rozdiel od aplikácií Adobe Illustrator, Photoshop a iných klasických aplikácií vám WordPress v predvolenom nastavení nedáva úplnú kontrolu nad písmomi. Iba niektoré témy sa rozhodnú podporovať a používať vlastné písma.

Preto sa v tomto príspevku dozviete, ako nájsť vhodné vlastné písma a ako ich používať na vašom webe WordPress.

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

Prečo chcete zmeniť písma, odsadenie medzi slovami, riadkovanie, medzeru medzi písmenami alebo sýtosť písma? Niektoré štúdie to však dokazujú typografia zlepšuje porozumenie čítania.

Veľa záleží na konštrukcii písiem. Na vedomej a podvedomej úrovni – každý hodnotí obsah webovej stránky podľa návrhu.

Dizajn písma ovplyvňuje čitateľa, aj keď mu to nevenuje pozornosť. Opustiť dizajn písma znamená opustiť samotný vývoj! Nálada čitateľa závisí od toho. 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 nie je písmo špecifikované v CSS stránky, použije sa štandardná verzia. Vždy môžete použiť predvolené písma, ale komplikujú prácu používateľov. Preto je nevyhnutné používať vlastné písmo. Ak vám motív nedáva možnosti na zmenu písma, môže vám pomôcť veľa webových stránok a nástrojov.

Alternatívy písiem Google

Kde nájdete vlastné písma

Mnohí z vás vedia o bezplatných písmach Google. Existuje mnoho ďalších stránok, kde nájdete krásne písma. Niektoré z nich sú zadarmo na osobné použitie. Ak potrebujete na komerčné použitie, potrebujete licenciu. Fonty Google a Adobe Edge Fonts sú zadarmo. Preto nie sú také jedinečné. A to nám nevyhovuje.

Tu je niekoľko ďalšie zdroje na vyhľadávanie písiem na bezplatné a komerčné použitie:

  1. Template Monster – Na webových stránkach Marketplace TemplateMonster nájdete všetko, čo potrebujete pre Web Design. Existuje tiež veľa typov písma a balíkov pre osobné použitie za malú cenu. Sú tiež prezentované v ONE súprave na vývoj webových aplikácií. Zbierka je obrovská a kreatívna. Aby ste si mohli vybrať, všetky písma uvedené v brožúrach alebo rámoch. Každé písmo je tiež vybavené komerčnou licenciou.
  2. MyFonts – MyFonts v súčasnosti ponúka najväčší výber písiem na svete. Ceny sú tu však aj vo vyššom segmente. Takže, ak máte obmedzený rozpočet, nemusí to byť pre vás.
  3. FontSpring – Fontspring predáva ozdobné písma na komerčné použitie. Ale v takmer každej rodine 1-2 fonty zadarmo, ktoré možno použiť na osobné účely. Okrem toho existuje samostatná sekcia s bezplatnými fontami. Zbierka je živá. Pred stiahnutím však budete musieť dôkladne preštudovať licenčné informácie pre konkrétne písmo.
  4. Cufonfonts – Je to tiež rozsiahla zbierka rôznych typov písma. Vyberte ľubovoľnú položku a zobrazí sa vám stránka s podrobnými informáciami o nej. Existuje veľa bezplatných písiem a sú rozdelené do jednotlivých sekcií. Triediaci systém na CufonFonts je pomerne flexibilný a pohodlný. Zahrnutá je aj podpora Webfont.
  5. Dafont – Ďalšia dostupná zbierka 3 500 bezplatných písiem. Väčšina z nich je určená iba na osobné použitie. Pekná vlastnosť DaFont je systém kategórií. Môžete si vybrať písma v štýle komiksu, videohier, vinobranie alebo štylizované ako japonské znaky.

Výber písiem je veľmi lákavý, pretože sú všetky krásne. Ale nemali by ste si vyberať veľa. použitie nie viac ako dve písma na webe. Vzhľad vašej webovej stránky potom bude konzistentný. Po výbere písiem nezabudnite stiahnuť súbory pre každý štýl, ktorý budete používať (normálny, tučný, kurzíva, atď.).

Teraz, keď ste pre web vybrali vhodné písmo, zistíme, ako ho pridať.

Ako pridať vlastné písma do

Existuje niekoľko spôsobov, ako pridať písma na web WordPress:

  1. plugins: v tomto prípade sa na uľahčenie procesu používajú rôzne doplnky WordPress.
  2. ručné: pomocou tejto metódy potrebujete stiahnuté písmo na web a upravte súbor CSS.
  3. témy: Veľa populárnych tém obsahuje vstavané možnosti prispôsobenia písiem (poznámka – túto možnosť nebudeme kryť, pretože proces sa bude líšiť v závislosti od témy, ktorú používate, ale kvalitné prémiové témy, ako je téma Total WordPress, ponúkajú online. dokumenty, ktoré môžete ľahko sledovať – ​​podobne ako v tejto príručke, môžete pridať celkom vlastné písma.

Možnosť 1 – Zmeniť písma WordPress pomocou doplnkov

Ak sa nestaráme o globálne zmeny, môžeme nainštalovať doplnky WordPress, ktoré zmenia písma na vašom webe.

Vlastnosti doplnkov vlastných písiem

Softvér s otvoreným zdrojom má výhodu pre záujem komunity a WordPress má aj túto výhodu. Niekoľko doplnkov WordPress vám umožňuje pridávať vlastné písma. Ako zvoliť vhodný doplnok s toľkými? Aké sú funkcie doplnkov vlastných fontov?

Tu je niekoľko bodov, ktoré je potrebné vziať do úvahy:

  • Schopnosť používať vlastné písmo
  • Schopnosť používať viac ako jedno písmo
  • Cieľové hlavičky a komponenty
  • Bonus: možnosť meniť nastavenia písma z vizuálneho editora

To je všetko. Prvý prvok v zozname je veľmi dôležitý. Písma môžete vždy sťahovať z webov ako DaFont, Squirrel atď., Musíte ich však nahrať do WordPress..

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

Vlastný nástroj na odovzdávanie písiem

Vlastný nástroj na odovzdávanie písiem

Tento doplnok vám umožňuje sťahovať písma Google a aplikovať ich na rôzne prvky vášho blogu. Napríklad do názvov alebo častí článku alebo stránky.

Použite akékoľvek písmo

Použite akékoľvek písmo

Toto je doplnok WordPress, ktorý vám poskytuje pohodlné rozhranie na sťahovanie písiem a ich použitie priamo prostredníctvom vizuálneho editora. Vizuálny editor WordPress môže automaticky meniť písmo ľubovoľného textu. Tento doplnok ponúka niekoľko funkcií, vďaka ktorým je proces pridávania vlastných písiem oveľa lepšie zvládnuteľný.

WP Google Fonts

WP Google Fonts

Aplikácia WP Google Fonts vám umožňuje používať katalóg písem Google. Jednou z úžasných výhod tohto doplnku je pridanie takmer 1 000 písiem Google. Aj keď môžete písať písma Google manuálne, pre väčšinu používateľov je použitie doplnku oveľa jednoduchšie.

Ako nainštalovať písma pomocou doplnku?

Zoberme si napríklad WP Google Fonts. Stačí nainštalovať tento doplnok z oficiálneho archívu WordPress a otvoriť sekciu Písma Google.

WP Google Fonts

Uvidíte tu ovládací panel písma Google. Vyberte písma a zmeňte rôzne nastavenia, napríklad štýl písma, prvky, na ktoré sa aplikuje atď.

Možnosť 2 – Manuálne nainštalujte vlastné písma WordPress

Prostredníctvom smernice @ font-face môžete na svoje stránky pripojiť jedno alebo niekoľko písiem. Ale táto metóda má svoje klady a zápory.

Pros:

  • Prostredníctvom CSS môžete pripojiť písma ľubovoľného formátu: ttf, otf, woff, svg.
  • Súbory fontov budú umiestnené na vašom serveri – nebudete závisieť od služieb tretích strán.

Zápory:

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

Ak to však nie je skutočný problém jednoducho skopírujte hotový kód a kde musíte uviesť svoje hodnoty.

Poznámka: Pred začatím nezabudnite pre svoje stránky vytvoriť podradenú tému. Týmto spôsobom môžete vykonávať všetky úpravy svojej podradenej témy a ponechať tak základnú tému v kontakte, aby ste ju mohli ľahko aktualizovať podľa potreby v budúcnosti..

Krok 1: Vytvorte priečinok „fonts“

V rámci podradenej témy vytvorte nový priečinok „písma“ pod: wp-content / themes / your-dieťa-theme / fonts

Krok 2. Nahrajte stiahnuté súbory fontov na svoj web

Môžete tak urobiť prostredníctvom ovládacieho panela vášho hostingu alebo prostredníctvom FTP.

Pridajte všetky súbory fontov do novo pridanej zložky písiem: wp-content / themes / your-dieťa-theme / fonts ste vytvorili.

Krok 3. Importujte písma cez šablónu so štýlmi podriadených tém

Otvorte súbor style.css vášho podriadeného motívu a na začiatok súboru CSS (po komentovaní podriadeného motívu) pridajte nasledujúci kód:

@ Font-face {
rodina fontov: 'MyWebFont';
src: url ('fonts / WebFont.eot');
src: url ('fonts / WebFont.eot? #iefix') formát ('embedded-opentype'),
formát url ('fonts / WebFont.woff') ('woff'),
formát url ('fonts / WebFont.ttf') ('truetype'),
formát url ('fonts / WebFont.svg # svgwebfont') ('svg');
font-weight: normal;
typ písma: normálny;
}

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). Každý štýl musíme špecifikovať osobitne.

Pretože sme prvýkrát spojili normálny štýl, nastavili sme vlastnosti písmo-hmotnosť a štýl písma na normálne.

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

@ Font-face {
rodina fontov: 'MyWebFont';
src: url ('fonts / WebFont-Italic.eot');
src: url ('fonts / WebFont-Italic.eot? #iefix') formát ('embedded-opentype'),
formát url ('fonts / WebFont-Italic.woff') ('woff'),
formát url ('fonts / WebFont-Italic.ttf') ('truetype'),
formát url ('fonts / WebFont-Italic.svg # svgwebfont') ('svg');
font-weight: normal;
typ písma: kurzíva;
}

Tam, kde je všetko rovnaké, sme kurzívu pripísali iba vlastnosť písma.

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

@ Font-face {
rodina fontov: 'MyWebFont';
src: url ('fonts / WebFont-Bold.eot');
src: url ('fonts / WebFont-Bold.eot? #iefix') formát ('embedded-opentype'),
formát url ('fonts / WebFont-Bold.woff') ('woff'),
formát url ('fonts / WebFont-Bold.ttf') ('truetype'),
formát url ('fonts / WebFont-Bold.svg # svgwebfont') ('svg');
font-weight: bold;
typ písma: normálny;
}

Kde sme nastavili font-weight property na tučne.

Nezabudnite uviesť správne umiestnenie súborov fontov pre každý štýl.

Krok 6. Ak chcete pripojiť hrubú kurzívu, napíšte nasledujúce:

@ Font-face {
rodina fontov: 'MyWebFont';
src: url ('fonts / WebFont-Italic-Bold.eot');
src: url ('fonts / WebFont-Italic-Bold.eot? #iefix') formát ('embedded-opentype'),
formát url ('fonts / WebFont-Italic-Bold.woff') ('woff'),
formát url ('fonts / WebFont-Italic-Bold.ttf') ('truetype'),
formát url ('fonts / WebFont-Italic-Bold.svg # svgwebfont') ('svg');
font-weight: bold;
typ písma: kurzíva;
}

To je všetko �� Teraz ste k svojej webovej stránke pripojili štyri štýly písma.

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

Zabalenie vlastných písiem pre WordPress

Čo je prvé, čo si používatelia všimnú pri návšteve vašich stránok? Správne, jeho dizajn! Väčšina dizajnu sa spolieha na správne používanie krásnych písiem. Takže sa musíte postarať o vzhľad písma vášho webu. Pridajte kód alebo použite niektorý z vyššie uvedených doplnkov na vloženie nového štýlu písma. Ktorý spôsob si vyberiete, záleží len na vás.

Uistite sa, že na rovnakom webe nepoužívate viac ako dve písma. Keďže čím viac vlastných písiem pridáte na web, tým bude rýchlosť stránky pomalšia.

To je všetko, neváhajte sa vyjadriť. 

Budeme radi, keď sa dozviete, ktorú možnosť si vyberiete na pridanie vlastného písma na svoju webovú stránku a kde nájdete svoje písmo.

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