Search code examples
vitegoogle-fonts

how to import google-font with vitejs?

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).

Solution

  • 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.