# How to Set Up Fonts in FastPocket Using Tailwind Setting up fonts in FastPocket can be a straightforward process if you follow a few key steps. This guide will walk you through how to configure fonts using the Tailwind config file and layout file, with a focus on using Google Fonts. [](https://youtu.be/azfwE-tf3UY) ## Choosing a Font To start, you'll need to choose a font from Google Fonts. Visit [fonts.google.com](https://fonts.google.com) to browse the available fonts. You might want to select a font that is trending, new, or simply one that appeals to your design needs. Note that not all fonts may be available immediately.    ## Setting Variables in Tailwind Config Once you've selected your font, you need to set the font variables in the Tailwind config file. For example, you might choose Roboto for your heading font and Indie Flower for your body font. ```javascript module.exports = { theme: { extend: { fontFamily: { heading: ['Roboto', 'sans-serif'], body: ['Indie Flower', 'cursive'], }, }, }, } ```  ## Swapping Fonts If you decide to swap the fonts for body and heading, you can do so easily. For instance, if you want Roboto as your body font and Indie Flower as your heading font, update the Tailwind config accordingly. ```javascript module.exports = { theme: { extend: { fontFamily: { heading: ['Indie Flower', 'cursive'], body: ['Roboto', 'sans-serif'], }, }, }, } ```   ## Accessing Fonts by Font Family In your layout file, you can access the fonts by their font family. For example, if you have set up Roboto as your body font, you can use it like this: ```html