Как подключить шрифты vue 3 и препроцессор SCSS?

Question

[konst34]

Не подключаются шрифты в проекте написанном на VUE 3 с использованием препроцессора SCSS.

Т.е., когда я в главном(или дочернем) по иерархии компоненте пытаюсь подключить шрифт внутри

<style lang="scss">
font-family: "Nunito", sans-serif;
</style>

, то он не работает(шрифт).

Почему, с чем это связано?

ПЕРЕРЫЛ ВЕСЬ ГУГЛ, но ответа не нашел. Так как подключить шрифт?

Comments

[Ankhena]

В вашем коде нет подключения шрифтов.
1. Шрифты подключаются с помощью правила @font-face
2. Ну а дальше нужно смотреть в консоль, правильные пути и потом по обстоятельствам.

[konst34]

Ankhena, Где можно об этом почитать? Об @font-face

[Ankhena]

konst34, "ок, гугл" серьезно не помог?
"ок, гугл, подключение шрифтов из папки"

[konst34]

Ankhena, Просто я сделал, как написано в Гугле, но оно не работает. Сделал вот так:

@font-face {
font-family: "Nunito";
src: url(https://fonts.googleapis.com/css2?family=Nunito+Sa...);
}

[Ankhena]

konst34, теперь тыкните на ту самую ссылку, там разве файл шрифта?

Если вы собираетесь подключать прямо из гугла, то и подключайте теми вариантами, которые дает гугл.
Зачем кашу-то делать?

[konst34]

Ankhena, ну вот я сделал, а все равно не работает

<styles lang='scss'>
@font-face {
  font-family: "Nunito-Regular", arial;
  src: url(http://www.allfont.es/cache/fonts/nunito-regular_e3ee72393dd6916a600a7431e0a07f1f.woff);
}
</styles >

[Сергей delphinpro]

konst34, ну так вы укажите этот шрифт для какого-нибудь элемента

Здесь font-family: "Nunito-Regular", arial; указывается название шрифта, а не стек для использования.

<styles lang='scss'>
@font-face {
  font-family: "Nunito-Regular";
  src: url(http://www.allfont.es/cache/fonts/nunito-regular_e3ee72393dd6916a600a7431e0a07f1f.woff);
}

body {
  font-family: Nunito-Regular, sans-serif;
}
</styles >

Вы вообще хоть что-нибудь знаете в CSS? Может книжку какую-то сначала почитать?

[Ankhena]

konst34,
1. При подключении шрифта через font-face в font-family пишется только его название.
2. А вот когда вы хотите применить его к какому-то элементу, там уже нужно указывать запасной шрифт из стандартных и/или семейство.

Не поверю, что в первых же строках гугла нет примеров.

p.s. современным браузерам лучше формат woff2, а woff для предыдущего поколения.

Answer 1

[Илья Родин]

Ты установил пакет для работы sass? Если нет, то установи:

npm i sass

или если через yarn, то

yarn add sass