I personally used @fontsource/roboto:

import '@fontsource/roboto/400.css';
import '@fontsource/roboto/700.css';
import '@fontsource/roboto/400-italic.css';
import '@fontsource/roboto/700-italic.css';

Also just stumbled over this, here's what I came up with...

Installation via @fontsource/roboto + unplugin-fonts

This installs the Roboto font locally, including all required weights and styles, and bundles it through vite.

Run

npm install --save-dev unplugin-fonts

npm install @fontsource/roboto

Add the following to your vite config

import ViteFonts from "unplugin-fonts/vite";

export default defineConfig({
  plugins: [
    ViteFonts({
      fontsource: {
        families: [
          {
            name: "Roboto",
            weights: [100, 300, 400, 500, 700, 900],
            styles: ["normal", "italic"],
          },
        ],
      },
    }),
  ],
});

Add the following to your main.js or main.ts:

import "unfonts.css";

Installation via unplugin-fonts + Google-hosted fonts (not recommended)

This is what create-vuetify is currently doing.

Run

npm install --save-dev unplugin-fonts

Add the following to your vite config (see create-vuetify template)

import ViteFonts from "unplugin-fonts/vite";

export default defineConfig({
  plugins: [
    ViteFonts({
      google: {
        families: [{
          name: 'Roboto',
          styles: 'wght@100;300;400;500;700;900',
        }],
      },
    }),
  ],
});

Issues with this approach

• Uses Google Fonts (i.e. not self-hosted, making a request to this URL), which I personally don't want to do, and may also violate GDPR or at the very least require user consent
• Does not include italic font style. No vuetify components use the italic style, unless you count the font-italic helper class, but it's still good to have IMHO.

See also

#18391