forked from codeAdrian/gatsby-omni-font-loader
-
Notifications
You must be signed in to change notification settings - Fork 0
/
AsyncFonts.tsx
41 lines (37 loc) · 1.1 KB
/
AsyncFonts.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import React from "react"
import { Helmet } from "react-helmet"
export const AsyncFonts: React.FC<{ hrefs: string[] }> = ({ hrefs }) => {
const links = []
hrefs.forEach(href => {
const noScript = (
<noscript
key={`noscript-${href}`}
>{`<link rel="stylesheet" href="${href}" />`}</noscript>
)
// // APPROACH I
// // According to https://pagespeedchecklist.com/asynchronous-google-fonts
// const link = (
// <link
// key={`stylesheet-${href}`}
// rel="stylesheet"
// media="print"
// onLoad={`this.onload=null;this.removeAttribute('media');`}
// href={href}
// />
// );
// APPROACH II
// According to https://blog.prototyp.digital/improving-website-performance-by-eliminating-render-blocking-css-and-javascript/
const link = (
<link
key={`stylesheet-${href}`}
crossOrigin="true"
as="style"
rel="preload"
onLoad={`this.onload=null;this.rel='stylesheet'`}
href={href}
/>
);
links.push([noScript, link]);
});
return <Helmet>{links}</Helmet>
}