Police d’icônes – devfrontend.info

Après mise à jour de la police d’icônes, ce n’est pas la bonne police qui s’affiche

Vous avez ajouté ou retiré des icônes de votre police et, après mise à jour sur votre serveur, l’affichage des polices est décalé et ce n’est plus les bonnes polices qui s’affichent au bon endroit (je sais, c’est pas très français tout ça, mais vous comprenez ce que je veux dire, non?)

Le problème peut venir de la mise en cache des fonts et le blog CSS Tricks propose plusieurs solutions dans son article Strategies for Cache-Busting CSS.

C’est notamment la seconde solution qui est intéressante pour un dev front-end: Changing file name.
Elle consiste (pour faire simple) à attribuer un libellé unique au fichier incriminé à chaque fois qu’il est modifié. De cette manière, le serveur (quasiment) peu importe comment il est configuré, verra que c’est un nouveau fichier et en tiendra compte lors du prochain affichage d’une page dans un navigateur.

css-tricks.com-Strategies for Cache-BustingCSS (version PDF pour la postérité).

Une solution à mettre en place via Gulp

gulp-iconfont issue – font change so every build. One think bothers me: on every build of the iconfont the resulting font changes so it’s in my local changes all the time. Why the font changes despite I’m not changing the svg icons? How can I solve this issue?

See the gulp-svg2ttf timestamp option https://github.com/nfroidure/gulp-iconfont#iconfontoptions.

I have solved this problem as follows: first I generate a checksum and store it in the package.json with the current timestamp. This way the timestamp changes only when the checksum changes.

The relevant parts of my gulpfile:

'use strict';

var fs = require('fs');
var path = require('path');
var crypto = require('crypto');

var gulp = require('gulp');
var iconfont = require('gulp-iconfont');
var intercept = require('gulp-intercept');
var naturalSort = require('gulp-natural-sort');

var del = require('del');

var PACKAGE = require('./package.json');
if(!('timestamps' in PACKAGE)) {
    PACKAGE.timestamps = {};
}

var FILES = '/your/path/here/*.svg';
var FONT_NAME = 'your-name';
var DESTINATION = '/your/path/here/';

var digest;

gulp.task('digest', function() {
    var hash = crypto.createHash('sha1');
    return gulp.src([FILES])
        .pipe(naturalSort())
        .pipe(intercept(function(file){
            hash.update(file.relative);
            hash.update(file.contents);
        }))
        .on('end', function() {
            digest = hash.digest('base64').replace(/[+\/=]+/g, '').substring(0, 5);
            if(!(digest in PACKAGE.timestamps)) {
                PACKAGE.timestamps[digest] = Math.round(Date.now()/1000);
            }
            fs.writeFileSync('./package.json', JSON.stringify(PACKAGE, null, 2));
        });
});

gulp.task('clean', ['digest'], function() {
    var glob = path.join(DESTINATION, FONT_NAME);
    return del([glob+'*', '!'+glob+'@'+digest+'*'], {force: true});
});

gulp.task('generate', ['digest'], function() {
    var options = {
        fontName: FONT_NAME,
        fileName: FONT_NAME+'@'+digest,
        timestamp: PACKAGE.timestamps[digest]
    };
    return gulp.src([FILES])
        .pipe(iconfont(options))
        .pipe(gulp.dest(DESTINATION));
});

gulp.task('font', ['generate', 'clean']);

'use strict';

var fs = require('fs');

var path = require('path');

var crypto = require('crypto');

var gulp = require('gulp');

var iconfont = require('gulp-iconfont');

var intercept = require('gulp-intercept');

var naturalSort = require('gulp-natural-sort');

var del = require('del');

var PACKAGE = require('./package.json');

if(!('timestamps' in PACKAGE)) {

PACKAGE.timestamps = {};

}

var FILES = '/your/path/here/*.svg';

var FONT_NAME = 'your-name';

var DESTINATION = '/your/path/here/';

var digest;

gulp.task('digest', function() {

var hash = crypto.createHash('sha1');

return gulp.src([FILES])

.pipe(naturalSort())

.pipe(intercept(function(file){

hash.update(file.relative);

hash.update(file.contents);

}))

.on('end', function() {

digest = hash.digest('base64').replace(/[+\/=]+/g, '').substring(0, 5);

if(!(digest in PACKAGE.timestamps)) {

PACKAGE.timestamps[digest] = Math.round(Date.now()/1000);

}

fs.writeFileSync('./package.json', JSON.stringify(PACKAGE, null, 2));

});

gulp.task('clean', ['digest'], function() {

var glob = path.join(DESTINATION, FONT_NAME);

return del([glob+'*', '!'+glob+'@'+digest+'*'], {force: true});

});

gulp.task('generate', ['digest'], function() {

var options = {

fontName: FONT_NAME,

fileName: FONT_NAME+'@'+digest,

timestamp: PACKAGE.timestamps[digest]

};

return gulp.src([FILES])

.pipe(iconfont(options))

.pipe(gulp.dest(DESTINATION));

});

gulp.task('font', ['generate', 'clean']);

Ce n’est pas la bonne icône qui s’affiche sous Chrome

Après avoir ajouté à la volée une ou plusieurs icônes à votre bibliothèque custom, certaines icônes en front sont remplacées par d’autres… C’est un souci avec les caches du navigateur Chrome. Il est évoqué ici: Issue with Icon Fonts in Chrome 23.

La solution consiste à déclarer le(s) format(s) woff jsute après le format eot et avant tous les autres:

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

@font-face {

font-family: 'Graublau Web';

src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');

}

Source: Bulletproof @font-face Syntax par Paul Irish.

Une deuxième solution consiste à ne générer que le format woff, la prise en charge de ce dernier étant particulièrement étendue aujourd’hui:

// conf GULP
    "iconfont": {
      "fontName": "iconfont",
      "centerHorizontally": true,
      "normalize": true,
      "fontHeight": 1001,
      "formats": ["woff"],
      "prependUnicode": false,
      "timestamp": "runTimestamp"
    },

// conf GULP

"iconfont": {

"fontName": "iconfont",

"centerHorizontally": true,

"normalize": true,

"fontHeight": 1001,

"formats": ["woff"],

"prependUnicode": false,

"timestamp": "runTimestamp"

// TEMPLATE SASS
@font-face {
  font-family: '<%= fontName %>';
  // src: url('<%= fontPath %><%= fontName %>.eot');
  // src: url('<%= fontPath %><%= fontName %>.eot?#iefix') format('embedded-opentype'),
  //      url('<%= fontPath %><%= fontName %>.woff2') format('woff2'),
  //      url('<%= fontPath %><%= fontName %>.woff') format('woff'),
  //      url('<%= fontPath %><%= fontName %>.ttf') format('truetype'),
  //      url('<%= fontPath %><%= fontName %>.svg') format('svg');
  src: url('<%= fontPath %><%= fontName %>.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

// TEMPLATE SASS

@font-face {

font-family: '<%= fontName %>';

// src: url('<%= fontPath %><%= fontName %>.eot');

// src: url('<%= fontPath %><%= fontName %>.eot?#iefix') format('embedded-opentype'),

// url('<%= fontPath %><%= fontName %>.woff2') format('woff2'),

// url('<%= fontPath %><%= fontName %>.woff') format('woff'),

// url('<%= fontPath %><%= fontName %>.ttf') format('truetype'),

// url('<%= fontPath %><%= fontName %>.svg') format('svg');

src: url('<%= fontPath %><%= fontName %>.woff') format('woff');

font-weight: normal;

font-style: normal;

}

Articles récents

Catégories

Archives

Méta

Étiquette : Police d’icônes

[Police d’icônes] bugs connus et leurs solutions

Après mise à jour de la police d’icônes, ce n’est pas la bonne police qui s’affiche

Une solution à mettre en place via Gulp

Ce n’est pas la bonne icône qui s’affiche sous Chrome