How to correctly include fonts in a Vue application (quotes are removed when compiling scss)?

Question

Frontend

Including fonts in a Vue app

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

But when compiling, the quotes are removed, as a result, the fonts are not loaded on the client.

@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");

Answer 1

Here is a snippet from my code:

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