You might have come across several plugins to change the font-family
of your app and have tried using @font-face
in CSS. It is all mess! You can now change the font of your app or have your custom font in seconds with this beautiful plugin gatsby-plugin-google-fonts
Let's take a very short ride π΄
First, save this plugin to your project using yarn
or npm
yarn add gatsby-plugin-google-fonts
// or
npm install gatsby-plugin-google-fonts --save
Second, In your gatsby-config.js
file, add this to the array of plugins.
{
resolve: `gatsby-plugin-google-fonts`,
options: {
fonts: [
`Lato`,
],
display: 'swap'
}
}
Here, in fonts
array, it works even if you specify the font name in lowercase (like lato
) or title case (like Lato
). Now, you can use the css property font-family
and set it to the font (Lato
) you just setup using the plugin.
body {
font-family: 'Lato'
}
That's it.
Save it and see the magic π«
Top comments (0)