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 :)