Gathering detailed insights and metrics for gatsby-omni-font-loader
Gathering detailed insights and metrics for gatsby-omni-font-loader
Gathering detailed insights and metrics for gatsby-omni-font-loader
Gathering detailed insights and metrics for gatsby-omni-font-loader
Font loader optimized for maximum performance. Removes render-blocking font resources and loads them asynchronusly. Handle FOUT & FOUC with font loading status watcher. Supports both local-hosted fonts and web fonts.
npm install gatsby-omni-font-loader
Typescript
Module System
Node Version
NPM Version
TypeScript (70.67%)
JavaScript (29.33%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
106 Stars
62 Commits
7 Forks
2 Watchers
2 Branches
4 Contributors
Updated on Jun 05, 2025
Latest Version
2.0.2
Package Id
gatsby-omni-font-loader@2.0.2
Unpacked Size
15.13 kB
Size
5.94 kB
File Count
18
NPM Version
8.5.5
Node Version
16.15.0
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
2
npm install gatsby-omni-font-loader react-helmet
or
yarn add gatsby-omni-font-loader react-helmet
Add the following snippet to gatsby-config.js
plugins array.
1{ 2 /* Include plugin */ 3 resolve: "gatsby-omni-font-loader", 4 5 /* Plugin options */ 6 options: { 7 8 /* Font loading mode */ 9 mode: "async", 10 11 /* Enable font loading listener to handle FOUT */ 12 enableListener: true, 13 14 /* Preconnect URL-s. This example is for Google Fonts */ 15 preconnect: ["https://fonts.gstatic.com"], 16 17 /* Self-hosted fonts config. Add font files and font CSS files to "static" folder */ 18 custom: [ 19 { 20 /* Exact name of the font as defied in @font-face CSS rule */ 21 name: ["Font Awesome 5 Brands", "Font Awesome 5 Free"], 22 /* Path to the font CSS file inside the "static" folder with @font-face definition */ 23 file: "/fonts/fontAwesome/css/all.min.css", 24 }, 25 ], 26 27 /* Web fonts. File link should point to font CSS file. */ 28 web: [{ 29 /* Exact name of the font as defied in @font-face CSS rule */ 30 name: "Staatliches", 31 /* URL to the font CSS file with @font-face definition */ 32 file: "https://fonts.googleapis.com/css2?family=Staatliches", 33 }, 34 ], 35 }, 36}
Option | Description | Default |
---|---|---|
mode | Can be set to async (default) or render-blocking . In async mode, fonts are loaded in optimal way, but FOUT is visible. In render-blocking mode FOUT will happen in rare cases, but the font files will become render-blocking. | async |
scope | Can be set to body (default) or html . Sets the target element for HTML classnames to be applied to. | body |
enableListener | Works in async mode. Enable font loading listener to handle Flash Of Unstyled Text. If enabled, CSS classes will be applied to HTML once each font has finished loading. | false |
interval (V1 ONLY) | Works if enableListener is true . Font listener interval (in ms). Default is 300ms. Recommended: >=300ms. | 300 |
timeout (V1 ONLY) | Works if enableListener is true . Font listener timeout value (in ms). Default is 30s (30000ms). Listener will no longer check for loaded fonts after timeout, fonts will still be loaded and displayed, but without handling FOUT. | 30000 |
custom | Self-hosted fonts config. Add font files and font CSS files to static folder. Array of {name: "Font name", file: "https://url-to-font-css.path"} objects. | [] |
web | Web fonts config. File link should point to font CSS file. Array of {name: "Font name", file: "https://url-to-font-css.path"} objects. | [] |
preconnect | URLs used for preconnect meta. Base URL where font files are hosted. | [] |
preload | Additional URLs used for preload meta. Preload for URLs provided under file attribute of custom and web fonts are automatically generated. | [] |
Load font stylesheets and files in low-priority mode. If you want to add fonts in a performant way, handle FOUT on your own and make sure that the page render times are low, you should use async
mode.
Pros: Performance, content is displayed before font files are downloaded and parsed
Cons: FOUT needs to be handled
Load font stylesheets and files in high-priority mode. If you want to use this plugin as a simple way to add fonts to your project as you would do in any other project, without any performance optimizations and FOUT handling, you should use render-blocking
mode.
Pros: Simple markup, FOUT won't occur in most cases
Cons: Font stylesheets and font files can delay first content paint time
When loading fonts asynchronously, Flash Of Unstyled Text (FOUT) might happen because fonts load few moments later after page is displayed to the user.
To avoid this, we can use CSS to style the fallback font to closely match the font size, line height and letter spacing of the main font that is being loaded.
When enableListener: true
is set in plugin config in gatsby-config.js
, HTML classes are being added to <body>
element as the fonts are being loaded.
HTML class name format will be in the following format wf-[font-family-name]
. When all fonts are loaded wf-all
is applied.
You can use the Font Style Matcher to adjust the perfect fallback font and fallback CSS config.
Here is the example of how body
element will look like after all fonts are being loaded (depending on the config).
1<body 2 class="wf-lazy-monday wf-font-awesome-5-brands wf-font-awesome-5-free wf-staatliches wf-all" 3></body>
interval
and timeout
optionswf-[font-family-name]
to avoid mixing naming conventionsFeel free to report issues you find and feel free to contribute to the project by creating Pull Requests.
Contributions are welcome and appreciated!
Thank you for your contribution!
Henrik • Lennart • Francis Champagne • Hugo
Thank you for your support!
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
license file detected
Details
Reason
Found 5/18 approved changesets -- score normalized to 2
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Score
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More