Description
Hello Adrian!
Congratulations and thank you for the awesome plugin!
It really handles font loading with ease. I have a specific example that I am not sure how to handle with gatsby-omni-font-loader and I would appreciate the help.
The problem is the following.
Custom fonts are specified in the custom config key.
Something like this:
custom: [
{
name: "MyCustomFontName",
file: "/fonts.css",
},
],fonts.css looks something like this:
@font-face {
font-family: "MyCustomFontName";
font-weight: 300;
src: url("path_to_font_300");
font-display: swap;
}
@font-face {
font-family: "MyCustomFontName";
font-weight: 900;
font-style: italic;
src: url("path_to_font_900");
font-display: swap;
}This seems like a normal configuration, from what I saw in the documentation. However, although these fonts are very similar, their weights make a big difference in terms of the character width. gatsby-omni-font-loader waits for only one variant to be loaded, and in my case, the first one that needs to be shown on the page is not one that is loaded until then, which looks like an additional layout shift after the other one is loaded. I am using enableListener config which adds the loaded class to the body element.
Is there a way to wait for all the weights to load?