@danherbert/use-google-font
v1.0.17
Published
A React hook to load Google Fonts
Readme
useGoogleFont
A lightweight React hook for dynamically loading and applying Google Fonts.
Installation
npm install use-google-fontUsage
Basic Usage
Simply call the hook with the font name you want to use and it will load the font in dynamically.
import { useGoogleFont } from 'use-google-font';
const App = () => {
useGoogleFont('Gigachad Gothic', { ...options })
}Options
Weights
Use the optional weights option to change which weights are loaded.
By default only normal 500 and 700 wieghts will be loaded.
{
weights: {
normal: [500, 700],
italic: [100]
}
}Default
By setting default to true, the font will be set on the body tag automatically.
{
default: true
}Performance
Optionally, you can add the following HTML snippet in your document's head to optimize font loading. Placing these tags in the ensures the preconnect requests happen early, reducing latency:
<head>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
</head>