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
Installing SvelteKit with shadcn-svelte & daisyUI Together
Struggle to choose between Shadcn svelte and daisyUI? Don't! This guide shows you how to install and configure both in SvelteKit for a powerful, flexible UI stack.
How to Fix PermissionError [Errno 13] in Frappe & ERPNext
Getting Permission denied in Frappe? Learn why it happens and how to fix file ownership issues in your bench with one simple command.
JavaScript Prototypes Explained prototype vs proto
Confused by prototype and __proto__ in the browser console? Master JavaScript's inheritance model with this clear, expert guide.