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-demo
Cleanup
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 # yarn
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest # npm
Generating the config files -
npx tailwindcss init -p
This will generate tailwind.config.js
and postcss.config.js
Adding the files to purge through
Replace the purge in tailwind.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 # yarn
npm run dev # npm
Getting our custom font
Go to Google Fonts and select the font you want in your app.
I am gonna use Rampart 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
fontFamily
and 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)
Great share ! I was trying to figure out where to put the import statement for so long !
Thank you!
Your post helped me save my time!
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
@ekimcem you can do that by adding below snippet to your main CSS file in this case in global.css
So for example your final version of global.css should like below