in gatsbyssr.js it seems that onLoad function attached to React elements does not works

[mario-arduini]

Description

I have created a simple plugin to efficiently and asynchronously add google fonts to your gatsby project, it simply adds 4 link elements using onRenderBody API , but is not able to load the fonts on the page.
plugin gatsby-ssr.js:

const React = require("react");

exports.onRenderBody = function ({ setHeadComponents }, options) {
  const link = options.link;

  const preconnect = React.createElement("link", {
    key: "preconnect",
    rel: "preconnect",
    href: "https://fonts.gstatic.com",
    crossOrigin: "",
  });

  const preload = React.createElement("link", {
    key: "preload",
    rel: "preload",
    href: link,
    as: "style",
  });

  const defaultLink = React.createElement("link", {
    key: "default",
    rel: "stylesheet",
    href: link,
    media: "print",
    onLoad: function () {
      this.media = "all";
    },
  });

  const noScript = React.createElement("noscript", { key: "noscriptdefault" }, [
    React.createElement("link", {
      key: "noscriptlink",
      rel: "stylesheet",
      href: link,
    }),
  ]);

  setHeadComponents([preconnect, preload, defaultLink, noScript]);
};

The links are correctly added, but it seems that the onLoad function is not called for the defaultLink (in the inspector it stays as media='print'), also the previous preload does not work as well.
The reason for this links comes from this article

Steps to reproduce

1. start new gatsby project
2. install plugin npm i gatsby-plugin-fast-google-fonts
3. add plugin to gatsby-config.js
4. select wanted google fonts, get link and add it in the config on the plugin's options > link
5. use font somewhere like in the index

The github repo of the plugin is : https://github.com/mario-arduini/gatsby-plugin-fast-google-fonts
A minimal repo reproducing the problem is : https://github.com/mario-arduini/sandbox

Expected result

fonts should be available and usable

Actual result

fonts are not displayed properly

Environment

System:
    OS: Linux 5.4 Ubuntu 18.04.5 LTS (Bionic Beaver)
    CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
    Shell: 4.4.20 - /bin/bash
  Binaries:
    Node: 12.21.0 - /usr/bin/node
    npm: 6.14.11 - /usr/bin/npm
  Languages:
    Python: 3.7.4 - /home/mario/miniconda3/bin/python
  Browsers:
    Chrome: 89.0.4389.90
    Firefox: 86.0
  npmPackages:
    gatsby: ^3.1.1 => 3.1.1
    gatsby-plugin-emotion: ^6.1.0 => 6.1.0
    gatsby-plugin-fast-google-fonts: ^1.0.1 => 1.0.1
    gatsby-plugin-image: ^1.1.1 => 1.1.1
    gatsby-plugin-manifest: ^3.1.0 => 3.1.0
    gatsby-plugin-react-helmet: ^4.1.0 => 4.1.0
    gatsby-plugin-sharp: ^3.1.1 => 3.1.1
    gatsby-plugin-sitemap: ^3.1.0 => 3.1.0
    gatsby-source-filesystem: ^3.1.0 => 3.1.0
    gatsby-transformer-sharp: ^3.1.0 => 3.1.0
  npmGlobalPackages:
    gatsby-cli: 2.19.2

Thank you for any pointer or help and have a great day :)

[LekoArts]

The gatsby-ssr is only called during gatsby build - you'll want to implement that logic inside gatsby-browser.js.

The plugin https://github.com/codeAdrian/gatsby-omni-font-loader that also implements the article you linked uses AsyncFonts to do this: https://github.com/codeAdrian/gatsby-omni-font-loader/blob/main/components/AsyncFonts.tsx