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

Question

[Сергей]

Ребят, а подключал кто локальные шрифты используя 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;
}

Но приложение не видит

Comments

[Сергей]

Сергей delphinpro, Просто лучший. Заработался и не заметил, что парсингом пробежался не корректно.

Answer 1

[Сергей delphinpro]

в каждый 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;
}