How to Add a Google Font to Vue.js with Tailwind CSS
frontend development
font integration
ui design
tailwindcss
vue
tailwind typography
vueJS
google font
vue js tutorial
web development
vue3
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>