Как быстро и легко подключить кастомные шрифты к проекту #easyit #webpack #vitejs

Рассматриваем как подключить и использовать пользовательские шрифты в проекте, собираемом с помощью   webpack или vitejs

Исходные файлы проекта для vitejs здесь:

Исходные файлы проекта для webpack здесь:

Еще примеры по работе с vitejs:

Полезные видео по настройке webpack:

Самый простой способ установить nodejs на Linux и Mac:

#easyit #javascript #js #vitejs #vanillajs #webpack

[Hits]

Отлично, а как потом в бандле их искать?

[aweb_]

не пойму как сгенерировать желаемую структуру билд проекта, например чтоб из src/assets/img так же переходили в dist/assets/img и так все ресурсы, типа шрифтов И так далее

[aleksandera]

видео находится в плейлисте "webpack", а вебпака тут и нет

[enotus_chang]

Годно. Однако, непонятно, как при подключении локального шрифта заставить vite сбилдить это все великолепие в папку dist. Уперся в "didn't resolve at build time, it will remain unchanged to be resolved at runtime" и ни фига не могу с этим поделать.

[divatoz]

Еще бы манул по конвертации картинок в webp, шрифтов в woff + woff2, как эти плагины настроить? И pug  до кучи..

[ДмитрийРыбальченко-вц]

Привет, приходя на это видео очень надеялся увидеть преоброзование шрифта с ttf на wow2 с дальнейшим подключением(((

[Michael-mksm]

А можете сделать для vitejs так, чтобы определенный скрипт генерировал @font-face сразу в css, исходя из названия шрифта, который лежит в папке fonts? Например, взять шрифт alconica-regular-400. Будет происходить поиск по "regular" или "400" и присваиваться определенный стиль шрифта (bold, italic etc.). Было бы очень удобно, особенно, если бы еще ttf конвертировался в dist сразу в форматах woff и woff2 (возможно, с помощью сторонних плагинов) . Тогда можно будет просто качать с google fonts .ttf и не заморачиваться с созданием @font-face и с поиском woff/woff2 шрифтов, или с конвертацией вручную, например, с помощью каких-то сайтов. Если получится, сделайте, пожалуйста, видео. Заранее спасибо.