Font v GatsbyJS

Používání fontu vypadá díky pluginům velmi snadno i pro méně zkušeného frontenďáka. Nicméně testování tří nejpoužívanějších pluginů (pomocí lighthouse) ukáže, že není plugin jako plugin. Navíc nemusíme nezbytně sáhnout po pluginu, můžeme fonty použít i "ručně".

Vybereme google font

Oswald

<link href="https://fonts.googleapis.com/css?family=Oswald:300,500&display=swap&subset=latin-ext" rel="stylesheet">
@import url('https://fonts.googleapis.com/css?family=Oswald:300,500&display=swap');

Chceme opravdu toto nastavení?

Google font customizátor nenabídne možnost konfigurace vlastnosti font-display a rovnou nastaví hodnotu swap. Nicméně si můžete hodnotu v URL přepsat, třeba na fallback, funguje to bez problému.

Implementace

1. Pluginy

1.1 gatsby-plugin-web-font-loader (52.9k)

Plugin: https://www.gatsbyjs.org/packages/gatsby-plugin-web-font-loader/

Repozitář: https://github.com/escaladesports/legacy-gatsby-plugin-web-font-loader

Repozitář není udržován.

Lighthouse report vrací preconnect warning.

{
resolve: `gatsby-plugin-google-fonts`,
options: {
fonts: [
`Oswald:300,500&subset=latin-ext`,
],
display: 'fallback',
},
}
// OR
{
resolve: `gatsby-plugin-google-fonts`,
options: {
fonts: [
`Oswald:300,500&subset=latin-ext&display=fallback`,
],
},
}
view raw gatsby-plugin-google-fonts.js hosted with ❤ by GitHub

1.2 gatsby-plugin-prefetch-google-fonts (43.7k)

Plugin: https://www.gatsbyjs.org/packages/gatsby-plugin-prefetch-google-fonts/?=font

Repozitář: https://github.com/escaladesports/legacy-gatsby-plugin-prefetch-google-fonts

Repozitář není udržován. Nebyl jsem schopen spustit úspěšný build - což je problém nejednoho dalšího člověka. Více informací na GitHubu.

{
resolve: `gatsby-plugin-prefetch-google-fonts`,
options: {
fonts: [
{
family: `Oswald`,
subsets: [`latin-ext`],
variants: [`300`, `500`],
},
],
},
}
view raw gatsby-plugin-prefetch-google-fonts.js hosted with ❤ by GitHub

1.3 gatsby-plugin-google-fonts (21.8k)

Plugin: https://www.gatsbyjs.org/packages/gatsby-plugin-google-fonts/?=font

Repozitář: https://github.com/didierfranc/gatsby-plugin-google-fonts

Žádný lighthouse warning. Můžete ho s klidem použít.

{
resolve: "gatsby-plugin-web-font-loader",
options: {
google: {
families: ["Oswald:300,500&display=fallback&subset=latin-ext"],
},
},
}
view raw gatsby-plugin-web-font-loader.js hosted with ❤ by GitHub

2. Zdroje z Google Fonts

2.1 Použití tagu v SEO komponentě

Nebo pomocí react-helmet. Tato implementace je jednoduchá. Zvlášť když už nějakou SEO komponentu máte, nebo používáte react-helmet.

Podle Lighthouse reportu je vše v pořádku.

2.2 Použití CSS importem

CSS Import v souboru globálích CSS definic je v pořádku.

Žádný lighthouse warning.

3. Vlastní CSS Definice

Pokud chcete použít nějaké neortodoxní definice nebo máte rádi nad kódem úplnou kontrolu, není problém CSS definice zkopírovat z Googlu.

/* latin-ext */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 300;
font-display: fallback;
src: url(https://fonts.gstatic.com/s/oswald/v31/TK3iWkUHHAIjg752Fz8Ghe4.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
text-rendering: optimizeLegibility;
}
/* latin */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 300;
font-display: fallback;
src: url(https://fonts.gstatic.com/s/oswald/v31/TK3iWkUHHAIjg752GT8G.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
text-rendering: optimizeLegibility;
}
/* latin-ext */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 500;
font-display: fallback;
src: url(https://fonts.gstatic.com/s/oswald/v31/TK3iWkUHHAIjg752Fz8Ghe4.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
text-rendering: optimizeLegibility;
}
/* latin */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 500;
font-display: fallback;
src: url(https://fonts.gstatic.com/s/oswald/v31/TK3iWkUHHAIjg752GT8G.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
text-rendering: optimizeLegibility;
}
view raw css-font-external.css hosted with ❤ by GitHub

Ale pozor, když zdroj neupravíte, Lighthouse vám zase vrátí preconnect warning. Stáhněte tedy font a upravte cesty.

/* latin-ext */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 300;
font-display: fallback;
src: url(/font/TK3iWkUHHAIjg752Fz8Ghe4.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
text-rendering: optimizeLegibility;
}
/* latin */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 300;
font-display: fallback;
src: url(/font/TK3iWkUHHAIjg752GT8G.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
text-rendering: optimizeLegibility;
}
/* latin-ext */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 500;
font-display: fallback;
src: url(/font/TK3iWkUHHAIjg752Fz8Ghe4.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
text-rendering: optimizeLegibility;
}
/* latin */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 500;
font-display: fallback;
src: url(/font/TK3iWkUHHAIjg752GT8G.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
text-rendering: optimizeLegibility;
}
view raw css-font-local.css hosted with ❤ by GitHub

Závěr

Nevyplácí se předpokládat, že nejpoužívanější nebo nejoblíbenější řešení jsou nejlepší a nejudržovanější. Ideální nástroj jsem našel až jako třetí v pořadí.

Použil bych rozhodně gatsby-plugin-google-fonts pro externí fonty. Nebál bych se ale ani fonty stáhnout a použít CSS z posledního příkladu.

Resources

Oswald font na Google fontech

font-display: fallback na Vzhůru dolů

Lighthouse testovací nástroj

Modifikátor kulatého podstavce 25mm na 32mmFont v GatsbyJS