score:4

Accepted answer

so i eventually fixed this using a <style> tag with dangerouslysetinnerhtml in a custom _document.js. all together it should look like this:

<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin="anonymous" />

<link rel="preload" href="https://fonts.googleapis.com/css2?family=inconsolata:wght@400;600&family=karla:wght@700&display=swap" as="style" />

<style dangerouslysetinnerhtml={ {
  __html: `</style>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=inconsolata:wght@400;600&family=karla:wght@700&display=swap"
      media="print"
      onload="this.media='all';"
    />
    <style>`
} }></style>

<noscript>
  <link
    rel="stylesheet"
    type="text/css"
    href="https://fonts.googleapis.com/css2?family=inconsolata:wght@400;600&family=karla:wght@700&display=swap" />
</noscript>

which generates the following output:

<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin="anonymous"/>

<link rel="preload" href="https://fonts.googleapis.com/css2?family=inconsolata:wght@400;600&amp;family=karla:wght@700&amp;display=swap" as="style"/>

<style></style>

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=inconsolata:wght@400;600&family=karla:wght@700&display=swap" media="print" onload="this.media='all';" />

<style></style>

<noscript><link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=inconsolata:wght@400;600&amp;family=karla:wght@700&amp;display=swap"/></noscript>

not pretty, but better than having a <div> inside the <head> (which is not interpreted correctly by all browsers).

there's an open rfc to create a rawhtml component or extend fragment to accept dangerouslysetinnerhtml so that something like this is possible without hacks, but it's been more than a year since it was created.

also, there's quite a long discussion about this as well with a few different solutions (hacks) that seem to work.

you can see the solution working here: https://andorratechvalley.com/


Related Query

More Query from same tag