dhat
@dhat

Влияют ли настройки Gulp на подключение локальных шрифтов?

Предыдущий вопрос стартовал с неверной формулировки, поэтому выделю отдельно вопрос.

Имею шрифт .otf, который хочу подключить к сайту. На пустом тестовом проекте состоящем из index.html и style.css все работает замечательно. Но когда я пытаюсь его подключить на рабочем проекте - ничего не пашет. Код css (работает на тестовом):

@font-face {
font-family: Proxima Nova Regular;
src: url("Proxima Nova Regular.otf") format("opentype");
}
body {
    color: blue;
    font-family: Proxima Nova Regular;
}


Структура проекта - imgur.com/a/P8a2x
Использую Gulp. В styles.css стоит:
@import './blocks/layout/layout.css';
Конфигурация Gulp:
var gulp = require('gulp')
var concat = require('gulp-concat')
var rename = require('gulp-rename')
var browserSync = require('browser-sync').create()
var reload = browserSync.reload
var autoprefixer = require('autoprefixer')
var postcss = require('gulp-postcss')

var params = {
  out: 'public',
  htmlSrc: 'index.html',
  levels: ['blocks']
}

gulp.task('default', ['server', 'build'])

gulp.task('server', function() {
  browserSync.init({
    server: params.out
  })
  gulp.watch('*.html', ['html'])
  gulp.watch(params.levels.map(function(level) {
    var cssGlob = level + '/**/*.css'
    return cssGlob
  }), ['css'])
})

gulp.task('build', ['html', 'css'])

gulp.task('html', function() {
  gulp.src(params.htmlSrc)
  .pipe(rename('index.html'))
  .pipe(gulp.dest(params.out))
  .pipe(reload({stream: true}))
})

gulp.task('css', function() {
  gulp.src(['blocks/**/*.css'])
  .pipe(concat('styles.css'))
  .pipe(postcss([ autoprefixer() ]))
  .pipe(gulp.dest(params.out))
  .pipe(reload({stream: true}))
})


Т.е. Gulp собирает файлы из папки blocks и конкатенирует их в рабочий файл styles.css, который находится в папке public.

В чем может быть проблема? Почему в обычном проекте шрифт подключается, а тут нет?
  • Вопрос задан
  • 360 просмотров
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
не все браузеры понимают otf

Воспользуйтесь сервисом www.fontsquirrel.com/tools/webfont-generator для конвертирования вашего odt-шрифта в необходимые форматы. Этот же сервис сгенерирует вам правило font-face для правильного подключения сконвертированных шрифтов.

И да, галп здесь совсем не при делах.

Еще: если имя шрифта состоит из нескольких слов, его нужно заключать в кавычки.
font-family: "Proxima Nova Regular";
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы