How to Add a Google Font to Vue.js with Tailwind CSS
Adding a custom font to your Vue.js project can significantly enhance the look and feel of your application.
In this guide, we'll go through the steps to add a Google Font to a Vue.js project using Tailwind CSS.
Step 1: Choose Your Font
First, visit the Google Fonts website at https://fonts.google.com/.
For this example, I will select a font called Playwrite USA Traditional. Here's how to select your font:
Step 2: Get the Embed Code
After selecting your font, click on the Get Font button and then on the Get Embed Code.
Step 3: Copy the Embed Code
Copy the HTML embed code provided by Google Fonts.
Step 4: Add Font to Your Project
Open your index.html file and paste the Google font code inside the <head> tag.
Step 5: Configure Tailwind CSS
Next, configure your Tailwind CSS to include the new font like the following image.
Open the tailwind.config.js file and add your font like this:
module.exports = {
theme: {
extend: {
fontFamily: {
Playwrite: ['Playwrite US Trad', 'cursive']
}
}
}
}
Step 6: Use the Font in Your Project
You can now use the new font by applying the utility class in your components:
<h1 class="font-roboto">Hello, world!</h1>
Related posts
How to Unshallow a Git Repository & Restore Full History
Accidentally did a shallow clone? Learn how to use git fetch unshallow to convert a git shallow clone into a full repository without losing data.
How to Configure Google Antigravity for Complex WSL Workflows
Preventing AI disasters in WSL! Learn how to configure Google Antigravity for Frappe & ERPNext projects to avoid 'sudo' errors and master your dev environment.
How to Install Frappe 16 on WSL with Python 3.14
Step-by-step guide to installing Frappe 16 and ERPNext on Windows using WSL. Learn to set up Python 3.14, Node 24, and PostgreSQL for a next-gen dev environment.