Skip to main content
WWowFreeFonts

Vue / Nuxt Google Fonts Setup

Two-block snippet for Nuxt (@nuxtjs/google-fonts) and Vue (@fontsource) projects.

Runs entirely in your browser — no upload, no registration.

Nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/google-fonts'],
  googleFonts: {
    families: { 'Inter': [300, 400, 600, 700] },
    display: 'swap',
    preconnect: true,
    preload: true,
  },
});

Vue 3 + @fontsource

// app.vue or main entry
import '@fontsource/inter/400.css';
import '@fontsource/inter/700.css';

What this tool does

Config for the Nuxt module and an import example for @fontsource so you can pick whichever you prefer.

Why you might need it

Both approaches are self-hosted and privacy-friendly.

How to use it

  1. Pick your font.
  2. Copy the block that matches your stack.
  3. Paste it in.

Always review the included licence before commercial use. Do not remove copyright records, designer names, licensing metadata or embedding restrictions from any font you process.