vite-plugin-webfont-dl v3.9.4
š Webfont Dowload Vite plugin ā”
Collects webfont links, imports and definitions from your Vite project, downloads css and font files (privacy-first), add the fonts to your bundle (or serves through dev server), and injects font definitions using a non-render blocking method, meanwhile stores external css and font files in a persistent file cache, making them available for offline development.
š¦ Install
npm i vite-plugin-webfont-dl -D
š Table of Contents
- š¦ Install
- Usage:
- š That's all!
- š Laravel
- šø Screenshot
- š§© Supported webfont providers
- š ļø Options
- ā Third-party webfonts
- š® How it works
- š Google Fonts
- š Webfont-DL Vite plugin
- š Benchmark
- š Resources
- š License
š Usage: Zero config method A
Extracts, downloads and injects fonts from the original Google Fonts code snippet.
- Select your font families in your webfont provider (e.g. 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
webfontDownload
to 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(), ], };
The original webfont tags will be replaced in
dist/index.html
:<style>@font-face{font-family:...;src:url(/assets/foo-xxxxxxxx.woff2) format('woff2'),url(/assets/bar-yyyyyyyy.woff) format('woff')}...</style>
š¦ Usage: Simple config method B
Extracts, downloads and injects fonts from the configured webfont CSS URL(s).
- Select your font families in your webfont provider (e.g. Google Fonts) and copy the CSS URL(s) from the "Use on the web" code block:
<link href="[CSS URL]" rel="stylesheet">
Add
webfontDownload
to 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!
The webfonts are injected and ready to use. The plugin does its job seamlessly whether you are working on local development server or building to production.
h1 {
font-family: 'Press Start 2P', cursive;
}
h2 {
font-family: 'Fira Code', monospace;
}
š Laravel
To make it work with Laravel Vite Plugin add this line to your blade file:
@vite('webfonts.css')
šø Screenshot
š§© Supported webfont providers
- Google Fonts: works with Zero config or Simple config
- Bunny Fonts: works with Zero config or Simple config
- Fontshare: works with Zero config or Simple config
- Fira Code, Hack fonts (
cdn.jsdelivr.net
): works with Zero config or Simple config - Inter font (
rsms.me
): works with Zero config or Simple config - any provider with CSS (containing
@font-face
definitions) works with Simple config
š ļø Options
injectAsStyleTag
(boolean
, default:true
): Inject webfonts as<style>
tag (embedded CSS) or as an external.css
fileminifyCss
(boolean
, default: value ofbuild.minify
): Minify CSS code during build.embedFonts
(boolean
, default:false
): Embed base64-encoded fonts into css.async
(boolean
, default:true
): Prevent the usage of inline event handlers (webfonts.css
) that can cause Content Security Policy issues. Works only withinjectAsStyleTag:false
.cache
(boolean
, default:true
): Persistently store downloaded css and font files in local file cache. If set tofalse
the existing cache will be deleted.proxy
(false|AxiosProxyConfig
, default:false
): Proxy configuration for network requests.
usage:
ViteWebfontDownload(
[],
{
injectAsStyleTag: true,
minifyCss: true,
async: true,
cache: true,
proxy: false,
}
)
or:
ViteWebfontDownload(
[
'https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap',
],
{
injectAsStyleTag: true,
minifyCss: true,
async: true,
cache: true,
proxy: false,
}
)
ā Third-party webfonts
ā ļø Using the standard method to add third-party webfonts (Google Fonts, Bunny Fonts or Fontshare) to a webpage can slow down page load significantly. Lighthouse and PageSpeed Insights calls them "render-blocking resource", which means the page can't render fully until the webfonts CSS hasn't been fetched from the remote server.
š By avoiding render-blocking resources caused by third-party webfonts, you can boost page performance which leads to better user-experience and it improves SEO results.
āļø The plugin downloads the given fonts from the third-party webfont service (like Google Fonts) and dynamically injects them (as an internal or external stylesheet) into your Vite project, transforming the third-party webfonts into self-hosted ones. š¤©
š In addition to the significant performance increase, your visitors will also benefit to privacy protection, since there is no third-party server involved.
š® 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">
š± What happens on client-side with Google Fonts:
1. 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
1. Second line is another preconnect hint to fonts.gstatic.com
. preconnect
1. Third line instructs the browser to load and use a CSS stylesheet file from fonts.googleapis.com
(with font-display:swap
). stylesheet
1. The browser downloads the CSS file and starts to parse it. The parsed CSS is a set of @font-face
definitions containing font URLs from fonts.gstatic.com
server.
1. The browser starts to download the all relevant fonts from fonts.gstatic.com
.
1. 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
- collects the webfont CSS URLs (from plugin config,
index.html
and the generated CSS) - downloads the webfont CSS file(s)
- extracts the font URLs
- downloads the fonts
- adds the fonts to the bundle
- 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">
š± What happens on client-side with Webfont-DL plugin:
- 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
š Benchmark
Starter Vite project with
ā¶ļø Standard Google Fonts | š | ā¶ļø Webfont DL Vite plugin |
---|---|---|
š webfont.feat.agency | š webfont-dl.feat.agency |
š Resources
š License
MIT License Ā© 2022 feat.
18 days ago
1 month ago
2 months ago
6 months ago
6 months ago
6 months ago
6 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago