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:
- WP Sites: Best Practice For Installing Fonts In WordPress
- FontSquirell: Webfont Generator
- The Font Spring blog: Further Hardening Of The Bulletproof Syntax
- Titulná fotka: Photo by Natalia Y on Unsplash