Sergamers
@Sergamers
front-end

Как правильно подключить локальные шрифты в vue?

Ребят, а подключал кто локальные шрифты используя vue cli? Пробую подключать так
@font-face {
  font-family: 'Geometria';
  src: url('~@/assets/fonts/geometria/Geometria-Thin.eot');
  src: local('Geometria Thin'), local('Geometria-Thin'),
    url('Geometria-Thin.eot?#iefix') format('embedded-opentype'),
    url('Geometria-Thin.woff') format('woff'),
    url('Geometria-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}

Но приложение не видит
  • Вопрос задан
  • 9954 просмотра
Решения вопроса 1
delphinpro
@delphinpro
frontend developer
в каждый url путь подставьте
сейчас вы только eot подключили

И уж, коли на Vue пилите, а значит более или менее современные браузеры, то подключайте только woff и woff2 — покроют всё.

@font-face {
  font-family: 'Geometria';
  src: local('Geometria Thin'), local('Geometria-Thin'),
    url('~@/assets/fonts/geometria/Geometria-Thin.woff2') format('woff2'),
    url('~@/assets/fonts/geometria/Geometria-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы