[Documentation] Missing docs for installing the Roboto font for adding Vuetify to an existing project

segevfiner commented 5 months ago

Environment

Browsers: Chrome 121.0.0.0 OS: Mac OS 10.15.7

Steps to reproduce

There are no instructions in the given section about the need to install the Roboto font used by Vuetify into the project.

Expected Behavior

Give instructions on how to do so.

Actual Behavior

There is none, likely leading to it being forgotten at all.

Reproduction Link

https://vuetifyjs.com/en/getting-started/installation/#existing-projects

segevfiner commented 1 month ago

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';

romankaravia commented 1 week ago

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.

vuetifyjs / vuetify