Jak přidat vlastní písma do redakčního sytému WordPress
Pokud máte blog, určitě váš již napadla myšlenka nepsat články klasickým standardním písmem, ale svým vlastním. Doba fontu Arial nebo Times New Roman je už dávno pryč. S příchodem Google Fonts se doba změnila. Dnes máte k dispozici stovky bezplatných fontů. Správně zvolený font je základ každého dobrého webu. Zdobí web, lépe se čte a je zajímavým doplňkem pro oko čtenáře. Typografie je mocný nástroj.
S výběrem fontu to ovšem nesmíte v žádném případě přehánět. Nikdy nevkládejte do svého blogu ty příšerné, ručně kreslené fonty nebo ty, které nepodporují diakritiku, tím své čtenáře totiž moc neoslníte.
WordPress v základu neumožňuje kontrolu nad fontem. Neexistuje žádné výchozí nastavení. Pokud použijete koupenou šablonu, tak některé v nastavení mají možnost vybrat nebo vložit vlastní font. Webové prohlížeče totiž obsahují sadu výchozích písmen. To znamená, že pokud písmo není specifikováno v CSS, použije se výchozí písmo.
Nyní se tedy dostáváme k hlavní myšlence tohoto článku. Kde fonty získat a jak vlastní fonty do WordPressu nainstalovat?
Kde fonty pro komerční použití získat?
- https://www.dafont.com/
- https://www.cufonfonts.com/
- https://www.myfonts.com/
- https://fonts.adobe.com/
- https://fonts.google.com/
Za nás je nejlepší web pro výběr fontů Google Fonts. Má velkou databázi fontů pro komerční využití a pomůže vám i s tím, jak font vložit do kódu webových stránek.
Jak vlastní písma do WordPressu nainstalovat?
Plugin:
Existují dva způsoby a to ručně nebo přes plugin. My volíme první způsob, ale možnost přes plugin je nejjednodušší. Z WordPress repozitáře máte na výběr desítky pluginů, které vám umožní nainstalovat si vlastní písma. Nevýhodou pluginů je to, že nemáte plnou kontrolu nad fonty. Na druhou stranu, pokud neplánujete nějaké velké změny, tak vám tohle bude stačit.
Ručně:
Ruční způsob instalace vlastních fontů do svého webu považujeme za nejlepší řešení. My stavíme weby obvykle na míru a proto nemůžeme instalovat do webu plugin na fonty. Pokud lze udělat něco bez pluginu, použijeme tu druhou možnost.
Na ruční vložení existuje hned několik možností. Písma můžete načíst pomocí CSS, function.php nebo Javasriptu.
1. Načtení písma pomocí CSS
Nejlepší způsob, jak přidat vlastní písma Google do webových stránek je použít standardní metodu. Jednoduše zkopírujete odkaz svého písma, který vám vygeneruje web Google Fonts a vložíte je do souboru motivu style.css.
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,700;0,900;1,500;1,700;1,900&display=swap');
@import url(https://fonts.googleapis.com/css?family=Oswald);
@import url(https://fonts.googleapis.com/css?family=Lora|Oswald);Pokud chcete využít metodu optimalizovanou na výkon vašeho webu, můžete upravit soubor header.php motivu a vložit následující kód.
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lora|Oswald" media="screen">
<link rel="stylesheet" type="text/css" href="YOUR THEME STYLESHEET" media="screen">2. Načtení písma pomocí function.php
Dalším způsobem, jak přidat vlastní písma Google Fonts do webových stránek je použít soubor function.php a vložit tento kód.
function wpb_add_google_fonts() {
wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300', false );
}
add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );3. Načtení písma pomocí Javascriptu
Fonty Google lze také načíst pomocí knihovny Web Font Loader Library. Budete muset zkopírovat kód z Google Fonts a ten pak vložit do souboru header.php za značku <head>.
Nejdříve musíte načíst skript Web Font Loader
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>Poté už stačí jen vložit script pro načtení písma.
<script>
WebFont.load({
google: {
families: ['Roboto:300,400,700']
}
});
</script>Posledním krokem je pak v CSS jednotlivé fonty přiřadit k nadpisům, textům, tlačítkům apod. To může vypadat třeba takto:
body {
font-family: 'roboto', sans-serif;
}
h1,
h2,
h3,
h4 {
font-family: 'Open Sans', sans-erif;
}
button,
input {
font-family: 'Space Mono', monospace;
}