how to import google-font with vitejs?

Question

Troubles with google-font & vitejs

I would like to know how to import google-font (or other fonts) for my Vite project, despite Vite has already all config in index.html for css, scss, sass, etc.., but there is nothing about how to configure Vite for google-font. Please, help me. (My config = Vite -> React -> TypeScript -> sass).

Answer 1

I had the same issue, so I used the google fonts' provided <link> until I found FontSource.

It allows to import google fonts via npm. Since then, it became my standard for every project because of the DX and its benefits. https://fontsource.org/docs/getting-started

This solution also happens to be adopted in the Astro framework, powered by vite. https://docs.astro.build/en/guides/fonts/#using-fontsource

Hope it helps, GdS.

Answer 2

So, you can import the url in your css file(s), it´s so simple:

@import url('https://fonts.googleapis.com/css2family=__CHOSEN_FONT__);

body{
  font-family: '__CHOSEN_FONT__', sans-serif;
}