Webdesign, Font, Cufon, CSS – S’affranchir des polices système sur un site web avec cufón

by Posted on


L’objectif de cet article est bien de pouvoir mettre sur un site toutes les polices même les plus exotiques. En effet, ne pas pouvoir utiliser les polices que l’on veut sur une page web est souvent considéré comme une contrainte quasi insurmontable par les webdesigners, surtout ceux qui viennent du “print” et ils sont nombreux. C’est aussi souvent un des arguments qui milite en faveur du “tout-flash” où le problème du choix des polices ne se pose pas.

Un homme sorti du rang, Simo Kinnunen, finlandais de surcroit, s’est attaqué à ce problème et semble l’avoir résolu en créant cufón. Pour faire simple, il s’agit d’un script JavaScript qui permet à la volée la conversion des éléments textes de votre page.

La liste des balises est celle de pratiquement de toutes les balises html : <h1>...</h1>, <h2>...</h2>, <h3>...</h3>, <a>...</a>, <p>...</p>…

D’autres essais avaient été tenté, via un javascript notamment, un peu sur le même modèle que cufón avec typeface.js

Source : http://www.alsacreations.com/actu/lire/636-cufon-nouvelle-alternative-pour-intgrer-des-polices-truetype-et-opentype-au-web.html

Ainsi font font…

On va essayer juste à titre d’essai avec une police qui est mis à disposition sur site de cufón. Cette police se nomme Vegur. On passe outre le processus de conversion du fichier .ttf au format .font.js, par lequel on obtient un fichier .font.js, en l’occurrence Vegur.font.js. Cette conversion, on y revient en toute fin d’article.

Le fichier de la police Vegur convertie en javascript

/*!
* Copyright (C) 2004-2008 dot colon. All rights reserved.
*/
Cufon.registerFont({"w":209,"face":{"font-family":"Vegur","font-weight":200,"font-stretch":"normal","units-per-em":"360","panose-1":"0 0 0 0 0 0 0 0 0 0","ascent":"270","descent":"-90","x-height":"4","bbox":"-11 -274 322 94","underline-thickness":"18","underline-position":"-36","unicode-range":"U+0020-U+00F3"},

Le fichier de la police Vegur que nous avons renommé Ma_police_de_site (Ma_police_de_site.font.js)

/*!
* Copyright (C) 2004-2008 dot colon. All rights reserved.
*/
Cufon.registerFont({"w":209,"face":{"font-family":"Ma_police_de_site","font-weight":200,"font-stretch":"normal","units-per-em":"360","panose-1":"0 0 0 0 0 0 0 0 0 0","ascent":"270","descent":"-90","x-height":"4","bbox":"-11 -274 322 94","underline-thickness":"18","underline-position":"-36","unicode-range":"U+0020-U+00F3"},

Source : http://github.com/sorccu/cufon/blob/master/fonts/Vegur.font.js

Charger cufón à l’aide de mootools

Un vue rapide de l’arborescence de fichiers et de répertoires nécessaires au fonctionnement de l’ensemble. Le style de l’ensemble figure classiquement dans un fichier .css. Un grand merci à Ben, pour la mise à disposition des fichiers et de ses explications.

Webdesign, Font, Cufon, CSS - S'affranchir des polices système sur un site web avec le script cufon

Détails du répertoire js

  • cufon-yui.js

    • L’indispensable

  • mootools-1.2-full.js

    • Le nécessaire, le framework Mootools

  • functions.js

    • L’accessoire

Le code source functions.js

var txt2img = {
	init: function(){
 
		if(!$('page')) {
			log.console('init stopped !');
			return false;
		}
 
		$('page').getElements('.txt2img').each(function(L, I){
			// Cufon.replace(L, { fontFamily: 'Vegur' });
			Cufon.replace(L, { fontFamily: 'Ma_police_de_site' });
 
		});
 
	}
};
window.addEvent('domready', function() {
	txt2img.init();
});

Le code source du fichier load_cufon.php
L’ensemble des fichiers est appelé dans le fichier load_cufon.php

	<?php
	/** timer start **/
	$timer['start'] = microtime(true);
 
	/** auto detect paths **/
	$self = pathinfo(__FILE__);
	define('BASEPATH', rtrim($self['dirname'], '/') . '/');
	define('BASEURL', 'http://' . rtrim($_SERVER['HTTP_HOST'], '/') . '/' . str_replace(rtrim($_SERVER['DOCUMENT_ROOT'], '/') . '/', '', rtrim($self['dirname'], '/') . '/'));
 
	/** config **/
	define('_CSS', BASEURL . 'css/styles.css');
 
	/* FONTS */
	// define('_CUFON_FONT_1', BASEURL . 'fonts/Vegur.font.js');
	define('_CUFON_FONT_1', BASEURL . 'fonts/Ma_police_de_site.font.js');
 
 
 
 
	define('_CUFON_FRAMEWORK', BASEURL . 'js/cufon-yui.js');
	define('_MOOTOOLS_FRAMEWORK', BASEURL . 'js/mootools-1.2-full.js');
	define('_MOOTOOLS_MYFUNCTIONS', BASEURL . 'js/myfunctions.js');
 
	/** timer stop **/
	$timer['stop'] = microtime(true);
 
	?>
 
 
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
		<title>test cufon</title>
 
		<!-- css -->
		<link rel="stylesheet" href="<?=_CSS;?>" type="text/css" media="screen"/>
		<!-- End css -->
 
		<!-- cufon inclusions -->
		<script language="javascript" type="text/javascript" src="<?=_CUFON_FRAMEWORK;?>"></script>
		<script language="javascript" type="text/javascript" src="<?=_CUFON_FONT_1;?>"></script>
		<!-- End cufon inclusions -->
 
		<!-- mootools -->
		<script language="javascript" type="text/javascript" src="<?=_MOOTOOLS_FRAMEWORK;?>"></script>
		<script language="javascript" type="text/javascript" src="<?=_MOOTOOLS_MYFUNCTIONS;?>"></script>
		<!-- mootools -->
 
	</head>
 
	<body>
 
		<div id="page">
 
			<h1 class="txt2img uppercase">Lor&eacute;m ipsum dolor s&icirc;t amet</h1>
 
			<br class="clear_10">
 
			<a href="http://www.google.fr" target="_blank" class="txt2img italic">Lien Lor&eacute;m ipsum dolor s&icirc;t amet lien</a>
 
			<br class="clear_10">
 
			<h2 class="txt2img italic">Lor&eacute;m ipsum dolor s&icirc;t amet</h2>
 
			<br class="clear_10">
 
			<h3 class="txt2img underline">Lor&eacute;m ipsum dolor s&icirc;t amet</h3>
 
			<br class="clear_20">
 
			<p class="txt2img">
				Lor&eacute;m ipsum dolor s&icirc;t amet: consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua? Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />
 
				Lor&eacute;m ipsum dolor s&icirc;t amet: consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua? Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</p>
 
			<br class="clear_20">
 
		</div>
 
		<!-- IE cufon hack to correct delay -->
		<script language="javascript" type="text/javascript"> Cufon.now(); </script>
 
	</body>
	</html>

Extrait du code de styles.css

	body {
		font-size: 12px;
		font-family: arial, helvetica, sans-serif;
		background-color: #ffffff;
		color: #434343;
		text-align: center;
		margin: 0 auto;
		padding: 0;
	}
	a {
		font-size: 12px;
		color: #434343;
		outline: none;
	}
	.clear_O {
		line-height: 0;
		clear: both;
	}
	.clear_10 {
		line-height: 10px;
		clear: both;
	}
	.clear_20 {
		line-height: 20px;
		clear: both;
	}
	h1 {
		background-color: #5698D2;
		margin: 0;
		padding: 10px;
		line-height: 16px;
		font-size: 16px;
		font-weight: normal;
		font-style: normal;
		text-decoration: none;
		text-transform: none;
		text-align: left;
		color: #ffffff;
	}
	h2 {
		background-color: #5698D2;
		margin: 0;
		padding: 10px;
		line-height: 14px;
		font-size: 14px;
		font-weight: normal;
		font-style: normal;
		text-decoration: none;
		text-transform: none;
		text-align: left;
		color: #ffffff;
	}
	h3 {
		background-color: #5698D2;
		margin: 0;
		padding: 10px;
		line-height: 12px;
		font-size: 12px;
		font-weight: normal;
		font-style: normal;
		text-decoration: none;
		text-transform: none;
		text-align: left;
		color: #ffffff;
	}
	/* to be continued */

Le plus important, le rendu du chargement
Le police est de la Vegur mais rien ne vous empêche de faire le test avec de la TradeGothic, GillSans, HelveticaNeue… Il vous faudra cependant avoir acheté les droits d’usage de cette police.

Webdesign, Font, Cufon, CSS - S'affranchir des polices système sur un site web avec le script cufon

L’interface de conversion

Au terme de cette étape, vous obtiendrez le sésame pour votre site, c’est à dire la conversion de votre fichier .ttf en .font.js qui vous permettra de la mettre en place sur votre site.

Le site de cufón où vous pourrez envoyer votre .tff
Webdesign, Font, Cufon, CSS - S'affranchir des polices système sur un site web avec le script cufon

Les paramètres de conversion de votre police
Webdesign, Font, Cufon, CSS - S'affranchir des polices système sur un site web avec le script cufon

Les paramètres plus complets de conversion de votre police
Webdesign, Font, Cufon, CSS - S'affranchir des polices système sur un site web avec le script cufon

Le paramètre de sécurité, vous devez déclarer le site sur lequel vous allez utiliser cette police. Dans notre exemple, nous avons mis est www.google.com, ils ont les moyens de supporter un procès pour du “Copyright infringement”
Webdesign, Font, Cufon, CSS - S'affranchir des polices système sur un site web avec le script cufon

Pour aller plus loin

Published by Bruno Flaven

By now, Bruno Flaven works as AI Coordinator. He has been a project manager in a wide variety of Internet business applications both in Mobile and in Desktop for 20 years now. You can find more information about his professional life on his personal website (www.flaven.fr) or his linkedin profile: https://www.linkedin.com/in/brunoflaven. He is currently working In France Media Monde (FMM) mostly on mobile applications (iOS and Android). He has also worked as P.O for a Backoffice project made with Symfony. He also made few trainings to facilitate the handling of the tools that he helps to make.

Related Posts