Par , le 30 janvier 2015

Un problème de Cross-Origin avec vos webfonts ?

Développement | 0

Créer une atmosphère fonctionnelle compatible avec les nouveaux types d’écrans demande une mise en place complexe. Dans cet article, je vous explique comment nous utilisons les bibliothèques d’icônes font et comment résoudre les problèmes de déploiement, surtout si vous utilisez un CDN pour gérer les assets de votre application Ruby on Rails.


Font from origin "xxx" has been blocked from loading by Cross-Origin Resource Sharing policy. No "Access-Control-Allow-Origin" header is present on the requested resource. Origin "xxx" is therefore not allowed access.  

Une police depuis CloudFront ne se charge pas en staging.

Un format universel

Pour réaliser des interfaces qui s’affichent correctement sur les écrans HD ou Retina, nous demandons à nos designers de nous fournir des bibliothèques d’icônes au format SVG & polices de caractères Unicode.

Si votre équipe ne dispose pas de designer, il est toujours possible d’utiliser des solutions en ligne comme fontawesome, ionicons ou encore foundation icons.

Chaque charte graphique est unique. Pour gagner du temps et être compatible avec tous les navigateurs, nous utilisons un outil en ligne afin de générer les différents formats d’icônes :

  • woff2
  • woff
  • eot
  • ttf

N’oubliez pas de consulter la liste des navigateurs compatibles avec les webfont. A l’heure où j’écris cet article vous pouvez rencontrer des problèmes avec le format .woff2 qui n’est pas encore implémenté dans tous les navigateurs.

Des webfonts personnalisées et l’asset pipeline de Ruby on Rails

Pré-requis

Cet exemple fonctionne avec une application Rails 4+.

Dans une application Ruby on Rails, la « règle » est de placer vos assets dans le dossier /app/assets/. Cela permet pendant la mise en production d’envoyer les fichiers sur un CDN comme CloudFront.

Le cas des polices de caractères est un peu particulier, vous devez les mettre dans le dossier :

/vendor/fonts/fonts/

Le but est d’isoler la webfont afin de ne pas la déplacer sur le CDN lors du déploiement, sinon vous allez tomber sur un problème de Cross-Origin.

Configuration des settings

Dans votre fichier appplication.rb vous devez instaurer la règle suivante :

fonts-1

Inclure votre font à l’aide de Sass et Compass

Si vous utilisez des préprocesseurs, créez un fichier _icon.sass pour y mettre toutes vos déclarations d’icônes.

fonts-2

icon-font-montresandco

Et voilà ! une belle icône de notation pour montresandco.com !

Moralité

  • On ne sert pas des fonts depuis le CDN, elles sont hébergées depuis l’application Rails. Si cette règle n’est pas respectée, vous allez rencontrer des problèmes de Cross-Origin.
  • Nommer les fichiers en minuscule (Juste au cas où).
  • Pour invalider le cache, déployer 2 fois d’affilée peut régler votre problème si vos fichiers de polices de caractères sont mis à jour.
Partager l'article :

Vous souhaitez réagir ?

En soumettant ce commentaire vous donnez à Silicon Salad le droit de citer vos propos ainsi que votre nom/site. Tous commentaires dégradants ou hors-sujet peuvent-être supprimés par décision de l’auteur. Votre e-mail, ne sert qu’à des fins d’authentification, il ne peut-être ni partagé ni diffusé.
Vous pouvez commenter avec la syntaxe Markdown. En savoir plus

Article précédent
Responsive multi-resolution : CSS et "Hairlines" Borders Retina