Select Page

Ako nainštalovať fonty na WordPress

Dec 13, 2015 | Blog

Ak chceš mať na svojej WordPress webstránke vlastný font, a zároveň si nechceš inštalovať ďalší plugin, ktorý ho na tvoj web pridá, tu je najjednoduchší návod, ako na to bez pluginov.

Skonvertuj font

Webstránka FontSquirrel ponúka službu Webfont Generator – jednoduchý online program skonvertuje fonty do formátu, v ktorom sa dajú nainštalovať na web.

  • Nahraj otf alebo ttf font, ktorý máš uložený v počítači.
  • Vyber si spôsob ako ho skonvertovať (optimal je ok).
  • Pozri si podmienky, a ak súhlasíš, zaškrtni políčko.
  • Stiahni si svoj nový webfont kit.

Inštalácia do WordPressu

  • Rozbaľ stiahnutý zipový súbor.
  • Nahraj webfont kit na svoj web, ideálne do rovnakého priečinku, v akom máš uložené css súbory.
  • Nájdi súbor stylesheet.css. Ten je automaticky vygenerovaný programom od FontSquirell, a pomôže browserom vyberať ten správny font. Vyzerá asi takto:
@font-face{ 
  font-family: 'NázovFontu'; 
  src: url('NázovFontu.eot'); 
  src: url('NázovFontu.eot?#iefix') format('embedded-opentype'),
       url('NázovFontu.woff') format('woff'), 
       url('NázovFontu.ttf') format('truetype'), 
       url('NázovFontu.svg#webfont') format('svg'); 
}
  • Nalinkuj súbor do svojho HTML, asi takto:
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

Použi font

Teraz môžeš začať používať font. Aby browser použil tvoj novo nainštalovaný font, musíš mu dať na to príkaz v css. Nájdi svoj štýlovací css súbor svojho webu – dostaneš sa k nemu cez ftp alebo aj priamo cez backend WordPressu v časti Vzhľad (Appearance) > Editor > Style.css.

Vo webfontovom dokumente stylesheet.css nájdeš v druhom riadku názov fontu. Ten použi pri upravovaní vlastného css súboru. Napríklad, ak chceš nový font použiť na všetky bežné paragrafy, uprav v súbore atribút “font-family” pre všetky “p”. Malo by to vyzerať takto:

p { font-family: 'NázovFontu', Helvetica, sans-serif; }

Nezabudni zmenený kód uložiť. Pre prípad potreby nájdeš zopár ďalších rád aj v priečinku s webfont tipekitom pod názvom “NázovFontu-demo.html”.

Zdroje: