{% if webmention.content %} {{ webmention.content }} {% else %} {{ webmention.title }} {% endif %}
Utiliser une fonte personnalisée avec Cufón
https://chierchia.fr/blog/2009/12/utiliser-une-fonte-personnalisee-avec-cufon
Dans un précédent billet j’avais mentionné Cufón et sIFR, comme moyen d’utiliser des polices personnalisées sur nos sites Internet, de bonnes alternatives à la propriété CSS3 @font-face qui n’est pas prise en compte par tout les navigateurs web. Aujourd’hui je vais vous montrer comment utilisé vos polices d’écriture préférées sur votre site Web en utilisant Cufón.
Qu’est-ce que c’est Cufón ?
Cufón est un simple fichier Javascript qui se charge de remplacer n’importe quel texte par une image en utilisant la police de votre choix. Cufón est aussi une très bonne alternative à sIFR, qui fait exactement la même chose mais est beaucoup plus lourd et moins facile à configurer.
Comment le mettre en oeuvre ?
Téléchargement du script de remplacement
La première étape à effectuer pour pouvoir utiliser Cufón, c’est bien entendu de télécharger le fameux fichier disponible à cette adresse.
Conversion de notre police
Ensuite, nous allons devoir générer un fichier Javascript qui ne contiendra ni plus ni moins que les information de notre police, pour cela, le site de Cufón dispose d’un générateur de police dans lequel on va pouvoir télécharger le(s) fichier(s) de notre police.
On devra ensuite choisir quels lettres et symboles inclure dans notre fichier généré, et d’autres options facultatives. Une fois les conditions d’utilisation acceptées, un petit clique sur le bouton de validation et l’on pourra télécharger notre police d’écriture converti au format JavaScript.
Voilà, on a déjà fait le plus gros du travail. Éprouvant non? ^^
Installation de Cufón
Ouvrez bien les yeux ça va aller vite maintenant, vous n’avez qu’a inclure le code suivant entre vos balises <head></head> :
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="cufon-yui.js" type="text/javascript"></script> //le script Cufon
<script src="Makem_300.font.js" type="text/javascript"></script> //notre police converti
<script type="text/javascript">
Cufon.replace('h1'); //remplacer les h1 par notre police
</script>
</head>Et c’est terminé tous les élément H1 utiliseront notre police personnalisée! Simple non?
0 Webmentions
No webmentions were found.
{% if webmentions.size > 0 %}
- {% for webmention in webmentions %}
- {{ webmention.content }} {% endfor %}
No bookmarks were found.
{% endif %} {% if webmentions.size > 0 %}
- {% for webmention in webmentions %}
-
No likes were found.
{% endif %} {% if webmentions.size > 0 %}
- {% for webmention in webmentions %}
- {{ webmention.content }} {% endfor %}
No links were found.
{% endif %} {% if webmentions.size > 0 %}
- {% for webmention in webmentions %}
- {{ webmention.title }} {% endfor %}
No posts were found.
{% endif %} {% if webmentions.size > 0 %}
- {% for webmention in webmentions %}
- {{ webmention.content }}{% if webmention.author %} {% if webmention.author.photo %}
{% endif %} {{ webmention.author.name }} {% endif %} {% if webmention.pubdate and webmention.author %}on{% endif %} {% if webmention.pubdate %} {% endif %}
{% endfor %}
No replies were found.
{% endif %} {% if webmentions.size > 0 %}
- {% for webmention in webmentions %}
-
No reposts were found.
{% endif %} {% if webmentions.size > 0 %}
{% capture webmention_types %}{{ types | join: ',' }}{% endcapture %} {{ count }}{% capture webmention_types %}{{ types | join: ',' }}{% endcapture %} - {% for webmention in webmentions %}
- {% endfor %}
No RSVPs were found.
{% endif %} {% if webmentions.size > 0 %}
- {% for webmention in webmentions %}
-
{% if webmention.author %} {% endif %} {% endfor %}
No webmentions were found.
{% endif %}