Работа с шрифтами

Сайт fontsource.org позволяет установить как npm пакет множество open-source шрифтов, в том числе с Google fonts.
Шрифты интегрируются в бандл, что имеет свои плюсы и минусы.

npm install @fontsource-variable/inter

import { createApp } from "vue";
import '@fontsource-variable/inter';

import App from "./App.vue";
...

#fonts #lib

Если вы используете сторонние шрифты (например, Google Fonts), то подключать их лучше не в вашем CSS, а в index.html.

Таким образом браузер начнет грузить их до получения ваших CSS файлов, и они появятся у него быстрее, снижая вероятность "дергания" текста на экране при замене шрифта с базового на кастомный.

#fonts #css #tip

Вариативный шрифт (variable font) предоставляет возможность в рамках одного шрифтового файла самостоятельно плавно регулировать такие параметры, как: ширина, вес, курсив, наклон, оптический размер, длина засечек, контраст, свойства нижнего и верхнего регистра и т.д.

Вариативные шрифты давно поддерживаются операционными системами и браузерами.

Попробовать

#fonts