Dlouhou dobu byl WordPress na cestě ke skutečnému Web Fonts API – od vydání Gutenbergu 12.8 dne 16. března 2022 už tu je. Naučte se používat WordPress Web Fonts API a zjistěte, co se konečně změnilo díky Web Fonts API.

Mimo jiné můžete použít WordPress Web Fonts API k dynamickému přidávání vlastních typů písma do svých WordPress šablon, a získat tak větší kontrolu nad textem na svém WordPress webu. 

Co je nové WordPress Web Fonts API? 

V září 2021 byl v komunitě diskutován návrh vývojáře WordPress Ari Stathopoulose na API webových písem. S WordPress Web Fonts API je velký průlom pro vás jako webový vývojář nebo designér. WordPress Web Fonts API vám umožňuje vkládat písma do vašich webových stránek WordPress, aniž byste se museli starat o pravidlo písma nebo zásady mezi doménami.  

WordPress Web Fonts API byl integrován do nového Gutenberg Verze 12.8 integrovaná a měla by přijít s WordPress 6.0 v jádru. "Skutečnost, že nám trvalo tak dlouho, než jsme se dostali do tohoto bodu, je důkazem toho, jak složité mohou být webové fonty" – jak říká Héctor Prieto Oficiální příspěvek na blogu Gutenberg 12.8 O WordPress.org vysvětlený.

Nyní, když existuje tento framework, lze na něm stavět více nástrojů a optimalizací, aby bylo zajištěno, že WordPress poskytne svým koncovým uživatelům nejlepší možný zážitek (a soukromí).

Proč je Core API nezbytné? 

Standardy umožňují rutinní implementaci písem. Jedná se o standard, takže každý vývojář se může podívat na několik řádků kódu a pochopit, co kód dělá. Implementace rozhraní API poskytuje stabilní základ pro budoucí vývoj.  

Projekt Gutenberg

Vyvinul se Gutenberg Editor. Spolu s možností používat globální styly museli vývojáři v Gutenbergu také dokázat určit, která písma se mají na stránce použít. Díky skutečnosti, že se jedná o API, mohou data z WordPress Web Fonts API načíst i jiné aplikace nebo části stejné aplikace.

Možný scénář využití: Pověřili jste vývojáře, aby vytvořil individuální banner souboru cookie. Na svých WordPress stránkách používáte WordPress Web Fonts API k určení, které fonty se mají použít. Vývojář může použít stejná webová písma, která se používají i na jiném webu.

Stejné rozhraní API můžete použít ke správě písem webu. Nemusíte spravovat nastavení na více místech. Stojí za zmínku, že první verze je jen základem, na kterém bude tým WordPress stavět.

Cesta k Web Fonts API ve WordPressu byla pro vývojáře horskou dráhou emocí. Poté, co byl odstraněn z verze WordPress 5.9, byl přesunut do projektu Gutenberg, kde měl být vyvinut se souvisejícími funkcemi, které se na něm zakládaly.

To znamená, že můžete používat a nastavovat písma ze stejného místa a změny budou synchronizovány se všemi místy, kde používáte WordPress Web Fonts API. Stojí za zmínku, že první verze je jen základem, na kterém bude tým WordPress i nadále stavět. 

V tomto článku vám ukážeme, jak používat WordPress Web Fonts API, od instalace až po přidání písem do API. Začněme.  

Co dělá WordPress Web Fonts API? 

Toto API je prvním krokem k umožnění načítání písem výkonným, bezpečným způsobem a připraveným na budoucnost – něco, co je velmi obtížné bez takového frameworku.

S WordPress Web Fonts API mohou vývojáři šablon určit, které rodiny písem se mají použít spolu s přidruženými soubory ve WordPressu. WordPress automaticky načte písma se správným CSS v editoru a frontendu. V první verzi WordPress Web Fonts API jsou skripty a styly nastaveny na fronty. Důvodem je potřeba jednotného řešení.

Funkce Web Font API funguje jako wrapper pro API šablony stylů. Protože chcete-li zařadit webové písmo do fronty, musí být samotný soubor písma zařazen do fronty zařazením šablony stylů do fronty (nebo přidáním vloženého stylu). 

Zpočátku můžete používat pouze lokální písma. V budoucnu tým WordPress jistě přidá podporu pro více poskytovatelů písem. 

Místo toho, abychom je odstranili, bychom je možná mohli správně implementovat a vynutit místně hostovaná webová písma, abychom zlepšili výkon a soukromí... Tímto způsobem bychom šli příkladem a viděli bychom významné zlepšení výkonu a soukromí v ekosystému WordPress, protože šablony a pluginy, které v současné době používají písma Google, písma Adobe atd., přijmou API. 

Citace z GitHub

Což může způsobit problémy s výkonem, pokud se stahování šablon zvětší, pokud jsou podporována pouze místní písma. U mnoha šablon by to však neměl být problém – pro většinu šablon by měl stačit jeden, dva nebo tři balíčky písem. Pokud se však globální varianty stylu zpopularizují, můžeme vidět šablony, které nabízejí mnoho typu písem, které pokrývají více předdefinovaných designů.  

Jak používat WordPress Web Fonts API 

Nyní se podívejme na to, jak lze nové WordPress Web Fonts API použít v praxi. 

Existují dvě metody registrace webových písem pomocí WordPress: prostřednictvím souboru "theme.json", který je standardem od WordPress 5.8 , nebo pomocí metody @font-face. Klíče a hodnoty theme.json do značné míry odpovídají pravidlu @font tváře CSS. Pokud je neznáte, měli byste si své znalosti osvěžit. Pravidlo @font je styl CSS, který umožňuje nastavit písmo, které chcete použít na svých webových stránkách.

Můžete buď použít písmo, které je již nainstalováno v počítači uživatele, nebo můžete písmo stáhnout ze vzdáleného serveru. Soubor theme.jsv obsahuje seznam písem, která chcete použít na svém webu. Obsahuje název písma, adresu URL souboru písma a tloušťku a styl písma.  

Teď se podíváme na to, jak můžete změnit písma pomocí souboru theme.json. Chcete-li to provést, musíte se připojit k WordPress webu prostřednictvím SFTP. Zde je návod, jak získat přístup k souborům vašeho webu. Použijte klienta FTP podle vašeho výběru. (Všimněte si, že Raidboxes podporuje pouze SFTP a nikoliv žádný nešifrovaný FTP). Já používám Termius.  

Jakmile se připojíte k serveru a jste v domovské složce, uvidíte složku nazvanou "disk". Klikněte na něj. 

Ve složce "disk" jsou dvě složky (v některých případech se to může lišit), ale měli byste kliknout na složku "WordPress". Ve složce "WordPress" se zobrazí obvyklá knihovna WordPress se soubory. Klikněte na složku "wp-content" a pod touto složkou ve složce "témata".

Nyní jsme ve složce, kde jsou uloženy všechny nainstalované WordPress šablony. Kliknu na twentytwentytwo pro demonstrační účely. Na obrázku uvidíte soubor, který je třeba stáhnout do počítače, abyste jej mohli upravit.  

Po otevření theme.jsv souboru pomocí běžného editoru nebo oblíbeného integrovaného vývojového prostředí (IDE) přidejte webová písma na settings.typography.fontfamily jako součást speciální definice rodiny písem.  

}, 

„typography“: { 

"customFontSize": true, 

dropCap: false, 

"fontFamilies": [ 

{ 

"fontFamily": "Outfit", "sans-serif", 

"jméno": "Oblečení", 

"slimák": "primární" 

}, 

{ 

"fontFamily": "monospace", 

"název": "monospace", 

"slimák": "monospace" 

} 

  

Po otevření theme.jsv souboru v libovolném textovém editoru. 

Značku "typografie" najdete v kódu. Poté uvidíte značku "fontFamilies", kde zadáte písma, která chcete přidat na web WordPress. Na obrázku jsou vidět červené znaky. Stejně jako na obrázku výše.  

V závislosti na použitém motivu může kód vypadat jinak. V jiném příkladu používám výchozí motiv twentytwentytwo beze změn. Jak můžete vidět pod první "fontfamily", uvidíte kód pro System Font Stack (systémová a výchozí písma se používají na počítačích a mobilních telefonech). Přečtěte si více o písmech zde.  

Příklady použití 

S WordPress Web Fonts API pro nejnovější verzi WordPressu mohou vývojáři určit, která písma se mají použít v editoru šablon. Představte si, že vývojář chce použít kombinaci písem podle přání zákazníka.

Pak je pro editora velmi snadné publikovat článek. Editor nemusí přemýšlet o kombinacích písem, jsou již přednastaveny. Tento příklad aplikace ukazuje, jaká je myšlenka rozhraní Font API. 

Závěr o WordPress Web Fonts API

WordPress Web Fonts API je rozhodujícím krokem vpřed pro vás jako webového vývojáře nebo designéra. Tím, že umožňuje vývojářům témat definovat rodiny písem a přidružené soubory, se WordPress postará o načtení písem v editoru i frontendu. Díky tomu je vývoj a design mnohem jednodušší a efektivnější. 

V tomto článku jsem popsal, jak funguje WordPress Web Fonts API. Zkoušeli jste jej použít? Rád bych slyšel váš názor.