Как использовать подключенные через gulp шрифты в проекте?

Пользователь

от catherine_wintheiser , в категории: Другие , 2 года назад

Как использовать подключенные через gulp шрифты в проекте?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от johnpaul.blick , 2 года назад

@catherine_wintheiser 

Для того чтобы использовать шрифты, подключенные через gulp, необходимо выполнить несколько шагов:

  1. Установите шрифты в ваш проект. Обычно шрифты находятся в папке src/fonts, которая содержит папки для каждого отдельного шрифта.
  2. Создайте папку dist/fonts, которая будет содержать скопированные шрифты после выполнения задачи в Gulp.
  3. Добавьте задачу в ваш файл gulpfile.js, которая будет копировать шрифты из src/fonts в dist/fonts. Например, для этого можно использовать плагин gulp-copy:
1
2
3
4
5
6
7
const gulp = require('gulp');
const copy = require('gulp-copy');

gulp.task('copy-fonts', function() {
  return gulp.src('src/fonts/**/*')
    .pipe(copy('dist/fonts'));
});


  1. После того, как шрифты были скопированы в папку dist/fonts, их можно использовать в вашем проекте. Для этого необходимо подключить шрифты в ваш файл стилей (обычно это файл style.css):
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
@font-face {
  font-family: 'MyFont';
  src: url('../fonts/myfont.woff2') format('woff2'),
       url('../fonts/myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'MyFont', sans-serif;
}


В данном примере мы подключаем шрифт с названием MyFont. Путь к шрифту указывается относительно файла стилей.

Пользователь

от kyleigh_runte , 10 месяцев назад

@catherine_wintheiser 

Шрифты теперь будут доступны в вашем проекте и вы сможете использовать их в CSS, указывая название шрифта в свойстве font-family.