If you're looking to add custom fonts to your Gatsby project, here is a quick run down on how to get up and running! π
I recently started looking into how I could integrate Google Fonts into my Gatsby project. I found that there's quite a bit of documentation regarding what plugins to use but it wasn't clear on what to do after you install them and how to utilize your new fonts.
βA few prerequisites, you have:
- A Gatsby project set up (check out the quick-start docs if you need to do this)
- styled-components set up within your Gatsby project (check out the Gatsby styled-components docs if you need to do this)
- Terminal with npm access (download Node here if you need this)
- An editor of your choice (I use and will reference VS Code)
Now let's get to the fun part and add Google Fonts to our project! π
1οΈβ£ Download your favorite font from Google Fonts
I chose to download Inter and will reference that throughout the rest of these steps.
2οΈβ£ Install gatsby-plugin-prefetch-google-fonts plugin
To install this, from your Terminal window run npm install --save gatsby-plugin-prefetch-google-fonts
.
3οΈβ£ Update gatsby-config.js
Navigate in VS Code to the gatsby-config.js
file. Insert this snippet at the end of plugins to utilize our newly installed plugin:
{
resolve: `gatsby-plugin-prefetch-google-fonts`,
options: {
fonts: [
{
family: 'Inter',
variants: ['400', '400i', '700', '700i'],
subsets: ['latin-ext'],
},
],
},
},
4οΈβ£ Create static and fonts Folders
In the src/
folder, create a static
folder; and inside of the static
folder, create a fonts
folder
5οΈβ£ Add Google Fonts Files to Project
Move the Google Fonts downloaded Inter TTF (*.ttf) files into the fonts folder.
6οΈβ£ Create and Update fonts.css File
In the fonts
folder, create fonts.css
and create the following font-face for each TTF file:
@font-face {
font-family: 'Inter Extra Light';
src: url('./Inter-ExtraLight-slnt=0.ttf') format('truetype');
font-style: normal;
}
Note: You want to update the font-family and url in the snippet above to point to each TTF file.
7οΈβ£ Create styled Folder and Associated Files
Create one folder: in the src/
folder, create a styles
folder with a theme.js
file and a GlobalStyles.js
file.
8οΈβ£ Update theme.js
and GlobalStyles.js
Files
In the theme.js
file, add the following:
const theme = {
font: {
primary: `'Inter Black'`,
},
}
And in the GlobalStyles.js
file, add the following:
import { createGlobalStyle } from 'styled-components';
const normalize = `
/*! modern-normalize | MIT License | https://github.com/sindresorhus/modern-normalize */html{box-sizing:border-box}*,::after,::before{box-sizing:inherit}:root{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'}hr{height:0}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:SFMono-Regular,Consolas,'Liberation Mono',Menlo,Courier,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{padding:0}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}
`;
const GlobalStyles = createGlobalStyle`
${normalize};
body {
font-family: ${(props) => props.theme.font.primary};
}
`;
export default GlobalStyles;
Note: Read more about createGlobalStyle
here.
9οΈβ£ Update Layout
Within layout.js
, add the following:
import React from 'react';
import PropTypes from 'prop-types';
import { ThemeProvider } from 'styled-components';
import theme from '../styles/theme';
import GlobalStyles from '../styles/GlobalStyles';
import '../static/fonts/fonts.css';
const Layout = ({ children }) => (
<ThemeProvider theme={theme}>
<>
<GlobalStyles />
{children}
</>
</ThemeProvider>
);
Layout.propTypes = {
children: PropTypes.node.isRequired,
};
export default Layout;
Note: This provides access to the theme via ThemeProvider.
π Verify Font Updates
Run gatsby develop
in Terminal and verify the Google Fonts are now applied!
π Enjoy!
Hopefully this helps you out if you have struggled with trying to add custom fonts to your Gatsby project. Feel free to reach out to me in the comments or on Twitter (@kyleh919) with any questions you have!
Top comments (2)
i was looking for this yesterday
thanks ππ
So glad to hear this helped! π