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 https://fonts.google.com/specimen/Varela+Round?selection.family=Varela+Round
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?

THanks

Mik

I found!
just insert @import url(‘https://fonts.googleapis.com/css?family=Varela+Round’); into style section of the .vue file

<style>
   @import url('https://fonts.googleapis.com/css?family=Varela+Round');

    #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;
    }


 </style>
4 Likes

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

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(‘https://fonts.googleapis.com/css?family=Varela+Round’);

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.

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


Step2:
And in your App.vue - style add
snippet-002

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

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

Hope this helpful