Bonjour à tous !

Je suis actuellement confronté à un petit problème: ma police d'écriture n'est pas prise en compte

Voici le message que j'obtiens dans la console de mon navigateur:

downloadable font: Failed to convert WOFF 2.0 font to SFNT (font-family: "Material Icons" style:normal weight:normal stretch:normal src index:2) source: http://local/design/dist/fonts/Material-Icons.woff2
downloadable font: rejected by sanitizer (font-family: "Material Icons" style:normal weight:normal stretch:normal src index:2) source: http://local/design/dist/fonts/Material-Icons.woff2

Voici mon arborescence:

/dev
    |-- /fonts
        |-- Material-Icons.woff2
        |-- ...
    |-- /img
    |-- /js
    |-- /scss
        |-- components/
            |-- _icons.scss
        |-- style.scss
/dist
    |-- /css
        |-- style.css
    |-- /fonts
        |-- Material-Icons.woff2
        |-- ...
    |-- /img
    |-- /js
/ext
    |-- ...
/node_modules
    |-- ...
gulpfile.js
index.html
package.json

Mon fichier gulpfile.js

"use strict";

/*
 * -----------------------------------------------------------------------------
 * Paramètres
 * -----------------------------------------------------------------------------
 */

var paths = {
    "dev": {
        "fonts": "dev/fonts/",
        "img": "dev/img/",
        "js": "dev/js/",
        "scss": "dev/scss/"
    },

    "dist": {
        "css": "dist/css/",
        "fonts": "dist/fonts/",
        "img": "dist/img/",
        "js": "dist/js/"
    }
};

var browsers = ["ie >= 8", "ie_mob >= 10", "ff >= 30", "chrome >= 34", "safari >= 7", "opera >= 23", "ios >= 7", "android >= 4.4", "bb >= 10"];

/*
 * -----------------------------------------------------------------------------
 * Requires
 * -----------------------------------------------------------------------------
 */

var gulp = require("gulp");
var autoprefixer = require("gulp-autoprefixer");
var concat = require("gulp-concat");
var sass = require("gulp-sass");
var size = require("gulp-size");
var sourcemaps = require("gulp-sourcemaps");

/*
 * -----------------------------------------------------------------------------
 * Liste des tâches
 * -----------------------------------------------------------------------------
 */

gulp.task("fonts", function() {
    return gulp.src(paths.dev.fonts + "**/*.*")
        .pipe(gulp.dest(paths.dist.fonts));
});

gulp.task("js", function() {
    return gulp.src(paths.dev.js + "*.js")
        .pipe(concat("Faucon.js"))
        .pipe(gulp.dest(paths.dist.js));
});

gulp.task("sass", function() {
    return gulp.src(paths.dev.scss + "*.scss")
        .pipe(sourcemaps.init())
        .pipe(sass({
            //outputStyle: "compressed"
        }).on("error", sass.logError))
        .pipe(autoprefixer({browsers: browsers}))
        .pipe(sourcemaps.write("."))
        .pipe(gulp.dest(paths.dist.css))
        .pipe(size());
});

gulp.task("default", function() {
    gulp.watch(paths.dev.scss + "**/*.scss", ["sass"]);
    gulp.watch(paths.dev.js + "**/*.js", ["js"]);
    gulp.watch(paths.dev.fonts + "**/*.*", ["fonts"]);
});

Mon fichier _icons.scss

$path-fonts: "../fonts";

@font-face {
    font-family: "Material Icons";
    font-style: normal;
    font-weight: 400;
    src: local("Material Icons"),
         local("MaterialIcons-Regular"),
         url($path-fonts + "/Material-Icons.woff2") format("woff2");
}

.icons {
    font-family: "Material Icons";
    font-weight: normal;
    font-style: normal;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -moz-font-feature-settings: 'liga';
    -moz-osx-font-smoothing: grayscale;
}

Je vous passe mon fichier style.scss qui comporte bien la ligne

@import "compoments/_icons.scss";

Mon index.html contient bien la liaison avec le fichier css:

<link rel="stylesheet" href="dist/css/style.css" />

Lorsque je fais appel à une icon je fais:

<i class="icons">close</i>

Avec le code ci-dessus, je devrais obtenir une croix (cf. ici), mais j'obtiens simplement "menu" et non l'icône correspondante :/

Est-ce que quelqu'un serat d'oû viendrait mon problème svp ^^' ?

Je vous remercie d'avoir pris le temps de lire ce sujet :)

1 réponse


Ludo46
Auteur

Ah bon ? Pourtant mon fichier est bien pris en compte (il est bien, à la fin, dans mon fichier style.css) et je fais cela avec tous mes fichiers *.scss et j'ai juste cette histoire de police d'écriture qui n'est pas pris en compte sur ce fichier ^^

EDITION:

Je n'avais pas remarqué un message d'erreur dans la console du navigateur, je vous la poste dans le 1er message, au cas ou, et je continu mes recherches.