🔌 Webfont DL - Vite plugin ⚡
📦 Install
npm i vite-plugin-webfont-dl -D😎 Usage [method 🅰️ ]: Zero config
Extracts, downloads and injects fonts from the original Google Fonts code snippet.
- Select your font families at Google Fonts and copy the code into
<head>from the "Use on the web" block:<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400&family=Roboto:wght@100&display=swap" rel="stylesheet">
- Add
webfontDownloadto your Vite plugins without any configuration and the plugin automagically will take care of everything:// vite.config.js import webfontDownload from 'vite-plugin-webfont-dl'; export default { plugins: [ webfontDownload(), ], };
🦄 Usage [method 🅱️ ]: Simple config
Extracts, downloads and injects fonts from the configured webfont CSS URL(s).
- Select your font families at Google Fonts and copy the CSS URL(s) from the "Use on the web" code block:
<link href="[CSS URL]" rel="stylesheet">
- Add
webfontDownloadto your Vite plugins with the selected Google Fonts CSS URL(s):// vite.config.js import webfontDownload from 'vite-plugin-webfont-dl'; export default { plugins: [ webfontDownload([ 'https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap', 'https://fonts.googleapis.com/css2?family=Fira+Code&display=swap' ]), ], };
🚀 That's all!
From here the fonts are injected and available globally. Plugin works seamlessly even when working on local development server.
h1 {
font-family: 'Press Start 2P', cursive;
}
h2 {
font-family: 'Fira Code', monospace;
}🔮 How it works
Google Fonts 📉
Google Fonts generates the following code which you have to inject into your website's <head>, example:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Code&display=swap" rel="stylesheet">- First line gives a hint to the browser to begin the connection handshake (DNS, TCP, TLS) with
fonts.googleapis.com. This happens in the background to improve performance. [preconnect] - Second line is another preconnect hint to
fonts.gstatic.com. [preconnect] - Third line instructs the browser to load and use a CSS stylesheet file from
fonts.googleapis.com(withfont-display:swap). [stylesheet] - The browser downloads the CSS file and starts to parse it. The parsed CSS is a set of
@font-facedefinitions containing font URLs fromfonts.gstatic.comserver. - The browser starts to download the all relevant fonts from
fonts.gstatic.com. - After the successful fonts download the browser swaps the fallback fonts to the downloaded ones.
🆚
Webfont-DL Vite plugin 📈
On the contrary, Webfont-DL plugin does most of the job at build time, leaves the minimum to the browser.
Webfont-DL plugin downloads the Google Fonts CSS file(s), extracts the font URLs, downloads the fonts, generates an embedded CSS (<style> tag) or a webfont / external CSS file, add them to the bundle and injects the following code into your website's <head> using a non-render blocking method, example:
<style>
@font-face {
font-family: 'Fira Code';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/assets/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_GNsJV37Nv7g.9c348768.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
...
</style>or (using dev server or injectAsStyleTag: false option)
<link rel="preload" as="style" href="/assets/webfonts.b904bd45.css">
<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="/assets/webfonts.b904bd45.css">- Load fonts from the embedded CSS (
<style>tag).
or
- First line instructs the browser to prefetch a CSS file for later use as stylesheet. [
preload] - Second line instructs the browser to load and use that CSS file as a "
print" stylesheet (non-render blocking). After loading it promote to "all" media type stylesheet (by removing the "media" attribute). [stylesheet]
🛠️ Options
injectAsStyleTag: inject webfonts as <style> tag (embedded CSS) or as an external .css file
async: prevent the usage of inline event handlers that can cause Content Security Policy issues (has no effect when injectAsStyleTag is true)
usage:
ViteWebfontDownload(
[],
{
injectAsStyleTag: true,
async: true
}
)or:
ViteWebfontDownload(
[
'https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'
],
{
injectAsStyleTag: true,
async: true
}
)📈 Benchmark
Starter Vite project with
📚 Resources
📄 License
MIT License © 2022 feat.