You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* 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
29
30
30
31
## Install
31
32
@@ -138,21 +139,22 @@ Add the following snippet to `gatsby-config.js` plugins array.
138
139
</table>
139
140
140
141
## Async mode vs Render-blocking mode
142
+
141
143
### Async mode
144
+
142
145
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.
143
146
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
145
148
<br/>
146
-
__Cons:__ FOUT needs to be handled
149
+
**Cons:** FOUT needs to be handled
147
150
148
151
### Render-blocking mode
152
+
149
153
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.
150
154
151
-
__Pros:__ Simple markup, FOUT won't occur in most cases
155
+
**Pros:** Simple markup, FOUT won't occur in most cases
152
156
<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
156
158
157
159
## Handling FOUT with Font loading listener
158
160
@@ -169,7 +171,9 @@ You can use the [Font Style Matcher](https://meowni.ca/font-style-matcher/) to a
169
171
Here is the example of how `body` element will look like after all fonts are being loaded (depending on the config).
0 commit comments