How to Add a Google Font to Vue.js with Tailwind CSS

Add utility class for google font

Integrate Google Fonts in Vue.js with Tailwind CSS

frontend development
font integration
ui design
tailwind typography
google font
vue js tutorial
web development

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

For this example, I will select a font called Playwrite USA Traditional. Here's how to select your font:

Select Google Font

Step 2: Get the Embed Code

After selecting your font, click on the Get Font button and then on the Get Embed Code.

Google Font Get Embed Code

Get Embed Code

Step 3: Copy the Embed Code

Copy the HTML embed code provided by Google Fonts.

Goggle font copy embed code

Step 4: Add Font to Your Project

Open your index.html file and paste the Google font code inside the <head> tag.

Paste Embed Code in Index.html

Step 5: Configure Tailwind CSS

Next, configure your Tailwind CSS to include the new font like the following image.

tailwindcss config google font template

Open the tailwind.config.js file and add your font like this:

    module.exports = {
    theme: {
        extend: {
        fontFamily: {
            Playwrite: ['Playwrite US Trad', 'cursive']

tailwindcss config add google font

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>

Add utility class for google font