How to handle variants in async mode

[renatoruk]

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?

[codeAdrian]

Hi Renato,
thanks for reaching out. I see the issue, but I'm afraid that the only way of loading the font in a way you described is to rename the font family to MyCustomFontName-Bold, etc. This should work in theory.

However, I am planning a big update for the plugin in the future and I'm actively looking for the features to include in the future releases. So I'll be adding this one to the list.

Thanks and keep me posted if you've found another way to tackle this issue with the plugin

[renatoruk]

Hi Adrian,
thank you for the quick response.

This sounds like an approach that might be good enough for the time being! I will report here in the comments on how it behaves. Thanks again! 🙏