How to import fonts using Gulp/Sass? - sass

Question

I'm trying to import custom fonts using Gulp and Sass, but i can't figure out how.
For now, i've tried many things :
Create a mixin
#mixin font-face($font-family, $file-path, $font-weight, $font-style) {
#font-face {
font-family: $font-family;
src: url("#{$file-path}.eot");
src: url("#{$file-path}.eot?#iefix") format("embedded-opentype"),
url("#{$file-path}.woff") format("woff"),
url("#{$file-path}.ttf") format("truetype"),
url("#{$file-path}.svg##{$font-family}") format("svg");
font-weight: $font-weight;
font-style: $font-style;
}
// Chrome for Windows rendering fix: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/
#media screen and (-webkit-min-device-pixel-ratio: 0) {
#font-face {
font-family: $font-family;
src: url("#{$file-path}.svg##{$font-family}") format("svg");
}
}
}
Then in my main scss file, i've included it like so
/* Include custom fonts */
#include font-face(
"Myfont-Regular",
"../../src/fonts/Myfont-Regu",
400,
normal
);
#include font-face(
"Myfont-Bold",
"../../src/fonts/Myfont-Bold",
700,
bold
);
#include font-face(
"Myfont-Black",
"../../src/fonts/Myfont-BlacExte",
900,
normal
);
/* End custom fonts include */
///Defining Font Family
$body-font-regular: "Myfont-Regular", Arial, Helvetica, sans-serif;
$body-font-bold: "Myfont-Bold", Arial, Helvetica, sans-serif;
$body-font-black: "Myfont-Black", Arial, Helvetica, sans-serif;
I think the main problem comes from my .gulpfile, but i can't find out where (i'm just starting using gulp, so i made it out of snippets i found). I've created a gulp task to copy the font folder but i'm not sure how to make it work. Here is my gulpfile :
"use strict";
/*global require*/
const autoprefixer = require("autoprefixer");
const babel = require("gulp-babel");
const browserSync = require("browser-sync");
const changed = require("gulp-changed");
const concat = require("gulp-concat");
const data = require("gulp-data");
const del = require("del");
const gulp = require("gulp");
const gulpif = require("gulp-if");
const imagemin = require("gulp-imagemin");
const path = require("path");
const plumber = require("gulp-plumber");
const postcss = require("gulp-postcss");
const pug = require("gulp-pug");
const runSequence = require("run-sequence");
const sass = require("gulp-sass");
const sourcemaps = require("gulp-sourcemaps");
const uglify = require("gulp-uglify");
/**
* List of options
*/
const options = {
uglifyJS: true,
sourceMaps: true,
useBabel: true
};
/*
* List of directories
*/
const paths = {
input: {
sass: "./src/sass/",
data: "./src/_data/",
js: "./src/js/",
images: "./src/img/",
fonts: "./src/fonts"
},
output: {
css: "./public/css/",
js: "./public/js/",
images: "./public/img/",
fonts: "./public/fonts"
},
public: "./public/"
};
/************************
* Gulp Tasks *
************************/
/**
* Concat all scripts and make sourcemap (optional)
* Scripts from vendor folder added first
*/
gulp.task("javascript", function() {
return gulp
.src([paths.input.js + "vendor/**/*.js", paths.input.js + "**/*.js"])
.pipe(plumber())
.pipe(gulpif(options.sourceMaps, sourcemaps.init()))
.pipe(
gulpif(
options.useBabel,
babel({
presets: ["#babel/preset-env"]
})
)
)
.pipe(concat("script.js"))
.pipe(gulpif(options.uglifyJS, uglify()))
.pipe(gulpif(options.sourceMaps, sourcemaps.write("../maps")))
.pipe(gulp.dest(paths.output.js))
.pipe(
browserSync.reload({
stream: true
})
);
});
/*
* Minify all images
*/
gulp.task("image-min", function() {
return gulp
.src(paths.input.images + "**/*.+(png|jpg|gif|svg|jpeg)")
.pipe(plumber())
.pipe(changed(paths.output.images))
.pipe(imagemin())
.pipe(gulp.dest(paths.output.images));
});
/**
* Compile .pug files and pass in data from json file
* Example: index.pug - index.pug.json
*/
gulp.task("pug", function() {
return gulp
.src("./src/*.pug")
.pipe(plumber())
.pipe(
data(function(file) {
const json = paths.input.data + path.basename(file.path) + ".json";
delete require.cache[require.resolve(json)];
return require(json);
})
)
.pipe(pug({ pretty: true }))
.pipe(gulp.dest(paths.public))
.pipe(
browserSync.reload({
stream: true
})
);
});
/**
* Removing public folder with it contents
*/
gulp.task("build-clean", function() {
return del(paths.public);
});
/**
* Recompile .pug files and live reload the browser
*/
gulp.task("rebuild", ["pug"], function() {
browserSync.reload();
});
/**
* Launch the browser-sync Server
*/
gulp.task("browser-sync", function() {
browserSync({
server: {
baseDir: paths.public
},
notify: false
});
});
/**
* Copy custom font folder
*/
gulp.task("copy", ["clean"], function() {
return gulp
.src(["src/fonts/*"], {
base: "src"
})
.pipe(gulp.dest("public"));
});
/**
* Task group for development
*/
gulp.task("develop", function() {
runSequence(
"build-clean",
["sass", "javascript", "image-min", "pug"],
"browser-sync"
);
});
/**
* Building distributive
*/
gulp.task("build-dist", function() {
runSequence("build-clean", ["sass", "javascript", "image-min", "pug"]);
});
/**
* Compile .scss files
* Autoprefixer
* Sourcemaps (optional)
*/
gulp.task("sass", function() {
return gulp
.src(paths.input.sass + "*.scss")
.pipe(plumber())
.pipe(gulpif(options.sourceMaps, sourcemaps.init()))
.pipe(
sass({
includePaths: [paths.input.sass],
outputStyle: "compressed"
})
)
.pipe(postcss([autoprefixer()]))
.pipe(gulpif(options.sourceMaps, sourcemaps.write("../maps")))
.pipe(gulp.dest(paths.output.css))
.pipe(
browserSync.reload({
stream: true
})
);
});
/**
* Watch files for changes
*/
gulp.task("watch", function() {
gulp.watch(paths.input.sass + "**/*.scss", ["sass"]);
gulp.watch(paths.input.js + "**/*.js", ["javascript"]);
gulp.watch(paths.input.images + "**/*", ["image-min"]);
gulp.watch(["./src/**/*.pug", "./src/**/*.json"], ["pug"]);
});
/**
* Shorthand for build-dist
*/
gulp.task("build", ["build-dist"]);
/**
* Default task for development, fast-start by 'gulp' command
*/
gulp.task("default", ["develop", "watch"]);
By the way, here is my project folder structure :