title: How to import fonts using Gulp/Sass?
body: <p>I'm trying to import custom fonts using Gulp and Sass, but i can't figure out how.</p>
  
  <p>For now, i've tried many things :</p>
  
  <ol>
  <li>Create a mixin </li>
  </ol>
  
  <pre><code>@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");
      }
    }
  }
  </code></pre>
  
  <ol start="2">
  <li>Then in my main scss file, i've included it like so </li>
  </ol>
  
  <pre><code>/* 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;
  
  </code></pre>
  
  <p>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 :</p>
  
  <pre><code>"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"]);
  
  </code></pre>
  
  <p>By the way, here is my project folder structure :
  <a href="https://i.stack.imgur.com/7GyDn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7GyDn.png" alt="Folder structure"></a></p>