La police Marelle en page d’accueil

Petit clin d’œil à mes anciens métiers, voici en page d’accueil le slogan du site écrit avec la police Marelle.
C’est grâce à Mastodon que j’ai découvert Marelle, une police libre et open-source promue par le Ministère de l’Éducation nationale et la Forge des Communs.

Une police pour l’école avec diverses variantes

Jonathan Fabreguettes annonçait ce matin sur Mastodon le projet d’écriture qu’il coordonne avec Arnaud Champollion (est-il descendant de Jean-François né à Figeac ? pour une police d’écriture ce serait logique…). Il s’agit du projet Marelle.

Comme l’annonce le site : « Marelle est une police cursive libre pour l’enseignement de l’écriture à l’école élémentaire. » Elle peut être téléchargée et installée facilement. Il existe des variantes et il est même possible d’aller tester en ligne.

Les enseignantes et enseignants apprécieront de savoir que la police est compatible avec les différents systèmes et logiciels : LibreOffice, Word, Pages, Scribus, InDesign, TextEdit, Canva.

Une adaptation spécifique est utilisable sur un site web.

J’aurais aimé pouvoir disposer d’un si bel outil !

La ressource est proposée sous une licence de type : GNU General Public License.

Un beau travail d’équipe !

Une installation archi simple

Sur Linux, on télécharge, on fait l’extraction, on clique, on ne se pose pas de question et je retrouve la police dans LibreOffice (ou ailleurs).

Pour WordPress, il faut juste prendre garde à télécharger la version pour internet au format .woff2

Mon thème est Twenty Twenty-Five, c’est un thème FSE (full site editing). Il suffit d’aller dans l’éditeur > styles> polices puis d’ajouter la police en un seul clic.

Pour faciliter les choses et maintenir les performances, il faut savoir que WordPress/Twenty Twenty-Five charge la police Marelle sans préciser comment gérer l’affichage pendant le téléchargement. Pour éviter que le navigateur n’hésite on lui ajoute une directive.

Via WP Code j’ajoute

add_filter( 'wp_font_face_generator_style', function( $style ) {
    return str_replace(
        'font-family:Marelle;font-style:normal;font-weight:400;font-display:fallback',
        'font-family:Marelle;font-style:normal;font-weight:400;font-display:swap',
        $style
    );
});

Ce n’est pas obligatoire mais cette directive permet de conserver 100% de performance au test de PageSpeed Insigths y compris sur mobile.

Peut-être réutiliserais-je cette police notamment pour des poèmes ou des textes pour les enfants.

Je l’ai utilisée pour le slogan du site et je trouve que le nom de cette police « Marelle » s’associe bien au petit personnage facétieux de Pablo Stanley, ce sauteur qui court avec entrain vers le monde de la poésie .