Use google font into my project

Hi all,
I search a lot but I can’t find a clear way to use a custom font from google font.
This is the font I’d like to use
Should I download it or can I use url?
Where to put if I have to download and how I can use in my project?



I found!
just insert @import url(‘’); into style section of the .vue file

   @import url('');

    #app {
      font-family: 'Varela Round', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;


This works when I run it in development mode, but when I build it, the browser does not load the font.

1 Like

this works great:

I’m using vuepress 14.4 and I want to change the font of my website (google font).
It’s using the default theme at the moment. I tried putting the font into the override.styl file as is written in guide, but the font doesn’t get changed. Could someone please guide me in doing this.

`// override.styl

$accentColor = #3eaf7c
$textColor = #000000
$borderColor = #eaecef
$codeBgColor = #282c34

@import url(‘’);

font-family= ‘Varela Round’, sans-serif;

The easiest way to import Google Fonts locally, is to use the Typeface Project.

Search for your Google Font on npm in the form of typeface-, install with npm and include the following way inside your main.js:

// with preloading
import (/* webpackPreload: true */ 'typeface-<your-favorite-font>/index.css')

// without preloading
import 'typeface-<your-favorite-font>/index.css'

Hope this helps.

I found that is was easier just to embed the google font in the html document in the

And in your App.vue - style add

For You Tailwindcss users::
step 1 repeat step 1 from above
step 2 in your tailwindcss.css file

or use just it like you would do with the rest of tailwinds components.

Hope this helpful