Skip to content

Commit d014aeb

Browse files
author
Adrian Bece
committed
Update README
1 parent 50595e5 commit d014aeb

File tree

1 file changed

+22
-18
lines changed

1 file changed

+22
-18
lines changed

README.md

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,28 +4,29 @@
44
<h1>Gatsby Omni Font Loader</h1>
55
</div>
66

7-
* Simple way to add webfonts or custom fonts to Gatsby project
8-
* Performant asynchronous font loading can be enabled
9-
* Font loading listener can be enabled
10-
* Flash Of Unstyled Text (FOUT) handling support
7+
- Simple way to add webfonts or custom fonts to Gatsby project
8+
- Performant asynchronous font loading can be enabled
9+
- Font loading listener can be enabled
10+
- Flash Of Unstyled Text (FOUT) handling support
1111

1212
<div align="center">
1313
<br/>
1414
<img src="https://badgen.net/github/tag/codeAdrian/gatsby-omni-font-loader" /> <img src="https://badgen.net/npm/dt/gatsby-omni-font-loader" /> <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" />
1515
<br/><br/>
1616

1717
<img src="https://badgen.net/github/stars/codeAdrian/gatsby-omni-font-loader" /> <img src="https://badgen.net/github/open-issues/codeAdrian/gatsby-omni-font-loader" /> <img src="https://badgen.net/github/closed-issues/codeAdrian/gatsby-omni-font-loader" /> <img src="https://badgen.net/github/last-commit/codeAdrian/gatsby-omni-font-loader/main" /> <img src="https://badgen.net/github/license/codeAdrian/gatsby-omni-font-loader" /> <img src="https://badgen.net/packagephobia/install/gatsby-omni-font-loader" />
18+
1819
</div>
1920
<br/><br/>
2021

2122
## Features
2223

23-
* Supports web fonts & self-hosted fonts
24-
* Preloads the files & preconnects to the URL
25-
* Loads fonts asynchronously to avoid render blocking
26-
* Implemented with [fast loading snippets](https://csswizardry.com/2020/05/the-fastest-google-fonts/)
27-
* Loading status listener for avoiding FOUT
28-
* Small size & minimal footprint
24+
- Supports web fonts & self-hosted fonts
25+
- Preloads the files & preconnects to the URL
26+
- Loads fonts asynchronously to avoid render blocking
27+
- Implemented with [fast loading snippets](https://csswizardry.com/2020/05/the-fastest-google-fonts/)
28+
- Loading status listener for avoiding FOUT
29+
- Small size & minimal footprint
2930

3031
## Install
3132

@@ -138,21 +139,22 @@ Add the following snippet to `gatsby-config.js` plugins array.
138139
</table>
139140

140141
## Async mode vs Render-blocking mode
142+
141143
### Async mode
144+
142145
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.
143146

144-
__Pros:__ Performance, content is displayed before font files are downloaded and parsed
147+
**Pros:** Performance, content is displayed before font files are downloaded and parsed
145148
<br/>
146-
__Cons:__ FOUT needs to be handled
149+
**Cons:** FOUT needs to be handled
147150

148151
### Render-blocking mode
152+
149153
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.
150154

151-
__Pros:__ Simple markup, FOUT won't occur in most cases
155+
**Pros:** Simple markup, FOUT won't occur in most cases
152156
<br/>
153-
__Cons:__ Font stylesheets and font files can delay first content paint time
154-
155-
157+
**Cons:** Font stylesheets and font files can delay first content paint time
156158

157159
## Handling FOUT with Font loading listener
158160

@@ -169,7 +171,9 @@ You can use the [Font Style Matcher](https://meowni.ca/font-style-matcher/) to a
169171
Here is the example of how `body` element will look like after all fonts are being loaded (depending on the config).
170172

171173
```html
172-
<body class="wf-lazy-monday--loaded wf-font-awesome-5-brands--loaded wf-font-awesome-5-free--loaded wf-staatliches--loaded wf-henny-penny--loaded">
174+
<body
175+
class="wf-lazy-monday--loaded wf-font-awesome-5-brands--loaded wf-font-awesome-5-free--loaded wf-staatliches--loaded wf-henny-penny--loaded"
176+
></body>
173177
```
174178

175179
<img alt="FOUT example" src="https://res.cloudinary.com/dazdt97d3/image/upload/v1604140006/fouc.gif">
@@ -184,7 +188,7 @@ Contributions are welcome and appreciated!
184188

185189
Thank you for your contribution!
186190

187-
[Henrik](https://github.com/henrikdahl)[Lennart](https://github.com/LekoArts)[Francis Champagne](https://github.com/fcisio)
191+
[Henrik](https://github.com/henrikdahl)[Lennart](https://github.com/LekoArts)[Francis Champagne](https://github.com/fcisio)[Hugo](https://github.com/hugofabricio)
188192

189193
## Sponsors
190194

0 commit comments

Comments
 (0)