Как правильно подключить шрифты во Vue приложении (удаляются ковычки при компиляции scss)?

Question

[isxam]

Подключаю шрифты в приложении Vue

@font-face {
    font-family: "Source Sans Pro";
    font-weight: 400;
    font-style: normal;
    src: url('~@/assets/fonts/xxx.eot');
    src: url('~@/assets/fonts/xxx.eot?#iefix') format("embedded-opentype"),
    url('~@/assets/fonts/xxx.woff') format("woff"),
    url("~@/assets/fonts/xxx.ttf") format("truetype"),
    url("~@/assets/fonts/xxx.svg#Source Sans Pro") format("svg");

Но при компиляции удаляются ковычки, в итоге на клиенте шрифты не подгружаются.

@font-face {
    font-family: "Source Sans Pro";
    font-weight: 400;
    font-style: normal;
    src: url(/fonts/xxx.012556a5.eot);
    src: url(/fonts/xxx.012556a5.eot?#iefix) format("embedded-opentype"),
    url(/fonts/xxx.012556a5.woff) format("woff"),
    url(/fonts/xxx.012556a5.ttf) format("truetype"),
    url(/fonts/xxx.012556a5.svg#Source Sans Pro) format("svg");

Comments

[Ankhena]

Если вы про кавычки в url, то браузеру без разницы есть они или нет.

НО для современных браузеров нужны шрифты в формате woff2 и woff (сначала woff2, потом woff). Всю остальную кашу можно убрать.

Answer 1

[eugenedrvnk]

Вот фрагмент из моего кода :

@font-face {
  font-family: "Morganite";
  font-weight: 800;
  src: url('~@/assets/fonts/Morganite-Bold.woff2') format('woff2'),
  url('~@/assets/fonts/Morganite-Bold.woff') format('woff');
}