Answer the question
In order to leave comments, you need to log in
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;
}
@import './blocks/layout/layout.css';
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}))
})
Answer the question
In order to leave comments, you need to log in
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 questionAsk a Question
731 491 924 answers to any question