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
<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`, | |
], | |
}, | |
} |
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`], | |
}, | |
], | |
}, | |
} |
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"], | |
}, | |
}, | |
} |
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; | |
} |
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; | |
} |
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