@flyyer/use-googlefonts
React hook to load Google Fonts v2 when you can't define a priori the expected font on the <head />
.
If you know what specific font you require on your project you should omit this library and insert the <link />
tags directly in the <head />
of your HTML via react-helmet
or next/head
if you are using Next.js.
We made this hook for Flyyer.io to enable developers to create templates with fonts on the fly to match each user preferred font styling. Those tempates are used to create social and marketing images.
Usage
Install this dependency:
yarn add @flyyer/use-googlefonts
Common case usage:
import React from "react";
import { useGoogleFonts, GoogleFontsStatus } from "@flyyer/use-googlefonts";
function App() {
const font = useGoogleFonts([
{
family: "Cabin",
styles: [
"600..700",
"100..200italic",
"300italic",
"regular",
"italic",
"500",
444,
],
},
{
family: "Roboto",
styles: [
"300italic",
"regular",
"italic",
"500",
100,
],
},
]);
if (font.status === GoogleFontsStatus.FAILED) {
console.log(font.error);
} else {
console.log(font.href);
}
return (
<div className={googleFont.status === GoogleFontsStatus.LOADING && "flyyer-wait"}>
<p style={{ fontFamily: "'Cabin', sans-serif" }}>
Almost before we knew it, we had left the ground.
</p>
</div>
);
}
To improve performance and speed it is recommended to add the following pre-connection tags in the <head />
of your HTML.
This is done automatically if you are using @flyyer/cli so skip this section if you created your deck with create-flyyer-app
<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
</head>
<body>
...
</body>
</html>
References