Inject Any Google Font to Tailwind CSS in the NextJS Project

I am writing this to make others’ life much easier.

Let’s begin with the last update of the NextJS

{
  "name": "font-injection",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "lint": "next lint",
    "start": "next start"
  },
  "dependencies": {
    "next": "14.2.7",
    "react": "18.3.1",
    "react-dom": "18.3.1"
  },
  "devDependencies": {
    "@types/node": "22.5.2",
    "@types/react": "18.3.5",
    "@types/react-dom": "18.3.0",
    "eslint": "9.9.1",
    "eslint-config-next": "14.2.7",
    "postcss": "8.4.44",
    "tailwindcss": "3.4.10",
    "typescript": "5.5.4"
  }
}

You can notice I used NextJS's newest version on the 3rd of September.

I will start to google two fonts as the examples.

• Montserrat
• Inter

Navigate to the first found result and click on the link.

The screenshot was taken by the author

We need to click on this button to move on.

The screenshot was taken by the author

Click on this and will be here.