D
D
dhat2016-09-04 17:39:33
css
dhat, 2016-09-04 17:39:33

Do Gulp settings affect the inclusion of local fonts?

The previous question started with the wrong wording, so I will single out the question separately.
I have a .otf font that I want to connect to the site. On an empty test project consisting of index.html and style.css everything works great. But when I try to connect it on a working project, nothing works. css code (works on test):

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

Project structure - imgur.com/a/P8a2x I
use Gulp. In styles.css is:
@import './blocks/layout/layout.css';
Gulp configuration:
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}))
})

Those. Gulp collects files from the blocks folder and concatenates them into a working styles.css file, which is located in the public folder.
What could be the problem? Why is the font included in a regular project, but not here?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
S
Sergey delphinpro, 2016-09-04
@dhat

not all browsers understand otf
Use the www.fontsquirrel.com/tools/webfont-generator service to convert your odt font into the required formats. The same service will generate a font-face rule for you to correctly connect the converted fonts.
And yes, galp is not at all in business here.
Another thing: if the font name consists of several words, it must be enclosed in quotation marks.
font-family: "Proxima Nova Regular";

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question