Невозможно импортировать шрифт в scss ⇐ CSS

[Anonymous]

Я пытаюсь импортировать шрифт Google в свой проект.

Вот что я ожидаю:



Фактический результат:



App.vue

Код: Выделить всё

Luckiest Guy



export default {
name: "App",
};



@import "./assets/scss/main.scss";

#app {
font-family: "Luckiest Guy", "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}

main.scss

Код: Выделить всё

@import '../fonts/fonts.scss';

fonts.scss

Код: Выделить всё

@font-face {
font-family: 'Luckiest Guy';
src: url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');
}

Codesandbox:

https://codesandbox.io/s/dazzling-frost ... rc/App.vue
Обновление 1

Я также пытался использовать загруженный otf, но не работает
fonts.scss

Код: Выделить всё

@font-face {
font-family: 'Luckiest Guy';
src: url('');
}

Обновление 2

Я также пытался использовать загруженный ttf, но не помогло

Код: Выделить всё

@font-face {
font-family: 'Luckiest Guy';
src: url('./LuckiestGuy-Regular.ttf');
}

Codesandbox:

https://codesandbox.io/s/dazzling-frost ... fonts.scss


Подробнее здесь: https://stackoverflow.com/questions/697 ... ce-in-scss