Как можно быстро подключить шрифты в css?

Question

[Андрей]

есть ли какой нибудь вариант как быстро подключить шрифты в css локально?
Можно как-то автоматизировать этот процесс?
Или всегда вручную туда сюда туда сюда

Comments

[Модератор]

Не надо ставить как можно больше тэгов. Лучше оставить один, но конкретный, с которым проблема.
См.п.3.1 Регламента. Также обратите внимание на п.3.4

[Ankhena]

Поясните, пожалуйста, куда "туда-сюда вы их вручную"?
Один раз закинули в папку, написали правила @font-face.

Для препроцессоров можно написать миксин (или нагуглить готовый и отредактировать под современные реалии).

[Андрей]

Ankhena, это когда каждый шрифт и его жирность мы прописываем font face и пути

[Ankhena]

Андрей, ответ выше: используйте миксины

Answer 1

[holllop]

Так давай по полкам всё. Я конечно сомневаюсь, что подобного вопроса не было, но всё же
1. Локальное хранение шрифтов: Вы можете скачать шрифт в нужном формате (например, WOFF или TTF) и сохранить его в своем проекте. Затем в CSS вы можете использовать правило @font-face, чтобы подключить шрифт, указывая путь к файлу на вашем сервере. Например:

@font-face {
  font-family: 'MyFont';
  src: url('/path/to/font.woff2') format('woff2'),//пример пути
       url('/path/to/font.woff') format('woff');//пример пути
}

2.Есть вариант автоматизации этих процессов. Для этого используйте инструментов сборки и управления зависимостями(например GULP или WEBPACK)
3.Есть ещё возможность. Внедрение шрифтов через сервисы веб-шрифтов: Некоторые сервисы веб-шрифтов, такие как Google Fonts или Adobe Fonts, предоставляют быстрый и простой способ подключения шрифтов на вашем сайте, предоставляя вам готовый код CSS для вставки на ваш сайт.

Comments

[Андрей]

Вот это меня и интересует, мне бы хотелось что бы условный галп или веб пак автоматически занимался подключением, вот я закинул в папку шрифты и галп сам их подключил все

[holllop]

Андрей, ну это отлично, что вы заинтересованы этим. Для этого смотрите видео или читайте статьи о GULP или Webpack(что вам ближе). Потом попытайтесь сделать своё, если не получиться не чего страшного, задавайте вопросы здесь с тегом GULP или Webpack

[imko]

Андрей, да галп там и не нужен в принципе, прочитать директорию шрифтов и записать в файл просто подключения с путем к каждому файлу, сам файл можно создать ручками заранее пустой и импортнуть его в основной цсс

[holllop]

imko, возможно не спорю, я не очень силён в GULP.