Posted on • Edited on • Originally published atblog.avneesh.tech
How to use Google Fonts in TailwindCSS
We would like to use some beautiful fonts in our app, so I will teach you how to do that in this article. I am going to use Next.js today but you can use it in any other framework/library or vanilla as well. The procedure is going to be pretty much the same.
Setting up the app
Creating a Next.js app
npx create-next-app next-tailwind-ts-demoCleanup
Delete everything under the Head tag until the footer like this
import Head from "next/head";export default function Home() { return ( <div> <Head> <title>Create Next App</title> <meta name="description" content="Generated by create next app" /> <link rel="icon" href="/favicon.ico" /> </Head> </div> );}Adding Tailwind to the app
Installing the dependencies -
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest # yarnnpm install -D tailwindcss@latest postcss@latest autoprefixer@latest # npmGenerating the config files -
npx tailwindcss init -pThis will generatetailwind.config.js andpostcss.config.js
Adding the files to purge through
Replace the purge intailwind.config.js with this
purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],Change your globals.css
@tailwind base;@tailwind components;@tailwind utilities;Starting the app
yarn dev # yarnnpm run dev # npmGetting our custom font
Go toGoogle Fonts and select the font you want in your app.
I am gonna useRampart One for this demo.
- Click on "Select this style" and a sidebar should pop in.
- Now copy the import URL given in Use on the web section.
Using the font
To use the font follow these steps-
- Paste the import in
globasl.css
@import url("https://fonts.googleapis.com/css2?family=Rampart+One&display=swap");@tailwind base;@tailwind components;@tailwind utilities;- Inside themes > extend add a new property of
fontFamilyand give the font a name
theme: { extend: { fontFamily: { Rampart: ["Rampart One", "cursive"], }, }, },The rules in the array should be the same as given in Google fonts.
- Now you can give any tag the className of font-fontName in this case
font-Rampart.
<h1 className="font-Rampart">This is using a custom font</h1>Now you have got the beautiful font you need 🥳.
Useful links -
Top comments(4)
- Email
- EducationComputer Science
- WorkDeveloper Relations
- Joined
Great share ! I was trying to figure out where to put the import statement for so long !
- Email
- LocationAnkara, Turkey
- EducationAtilim University BSc. / METU MSc.
- WorkSoftware Developer @BronixSoftware
- Joined
What if we do not extend and want to change all of fonts so we will not need to type font-[fontname] everytime, how can we do it?
I tried just add the fontFamily in the same level of extend but it didnt work.
@avneesh0612
- LocationBanjul, The Gambia
- EducationBSC Computer Science, Self Thaught
- WorkFullstack Developer and Code Instructor at Tritech Software
- Joined
@ekimcem you can do that by adding below snippet to your main CSS file in this case inglobal.css
@layerbase{html{font-family:"Rampart One",cursive;}}So for example your final version of global.css should like below
@importurl("https://fonts.googleapis.com/css2?family=Rampart+One&display=swap");@tailwindbase;@tailwindcomponents;@tailwindutilities;@layerbase{html{font-family:"Rampart One",cursive;}}For further actions, you may consider blocking this person and/orreporting abuse
