Customize Consent Preferences

We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.

The cookies that are categorized as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. ... 

Always Active

Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.

No cookies to display.

Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.

No cookies to display.

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.

No cookies to display.

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

No cookies to display.

Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns.

No cookies to display.

Personnaliser les polices d’une page web avec @font-face

Il y a deux mois de ça j’avais publié un billet où je m’extasiais presque sur les possibilités de la Google Fonts API. J’avais tort.

Entre temps j’ai lu des articles bien intéressants ici ou écrits par des gens qui maîtrisent le sujet, et ils m’ont convaincu que cette API ne sert finalement pas à grand-chose. En gros il s’agit juste d’un bout de code Javascript qui va générer dynamiquement des règles CSS @font-face pour embarquer dans la page des polices hébergées chez Google, donc bien loin de chez nous.

Vu le nombre limité de polices disponibles au catalogue Google Web Fonts, on peut se demander quel est l’intérêt de la chose alors que l’utilisation de @font-face permet d’utiliser quasiment n’importe quelle typo hébergée sur votre serveur, pourvu qu’elle soit libre de droits (le problème des droits est une limitation légale, pas technique, pour le moment il n’y a pas de DRM sur les polices ;)).

Mise en oeuvre de @font-face

L’utilisation basique de @font-face est la suivante, pour une police TrueType « matypo.ttf » stockée dans le répertoire relatif « monrepertoire » :

@font-face {  
  font-family: matypo ;  
  src: url( monrepertoire/matypo.ttf ) format("truetype");  
}

On peut ensuite l’utiliser comme on le fait habituellement aves les polices standard :

.p { font-family: matypo, verdana, helvetica, sans-serif;  }

Ca fonctionnera avec la quasi totalité des navigateurs récents, à l’exception notable d’Internet Explorer qui ne sait pas gérer les polices TrueType! Il va donc falloir convertir la police au format EOT (Embedded Open Type), pour que sa majesté IE consente à nous l’afficher correctement. Microsoft fournit un outil pour ça, et il y a des convertisseurs en ligne comme celui ci, mais le plus simple reste d’utiliser Squirrel @font-face generator. Ce sympathique outil va non seulement convertir la police dans tous les formats utilisables mais aussi générer le code css @font-face correspondant :

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on February 25, 2011 */
@font-face {
    font-family: 'matypo';
    src: url('matypo-webfont.eot');
    src: url('matypo-webfont.eot?iefix') format('eot'),
         url('matypo-webfont.woff') format('woff'),
         url('matypo-webfont.ttf') format('truetype'),
         url('matypo-webfont.svg#webfontaPl2NyqY') format('svg');
    font-weight: normal;
    font-style: normal;
}

Comme on peut le voir, le générateur convertit aussi la police aux formats woff et svg (le mode Expert permet de sélectionner les formats). Ça maximise la compatibilité avec l’ensemble des navigateurs mais ça peut aussi ralentir le temps de chargement de la page. Les polices au format svg notamment peuvent être très lourdes, 2 à 3 fois la taille de la police TrueType, et elles ne sont nécessaires que pour un nombre limité d’anciens navigateurs.

Il n’y a plus qu’a ajuster le chemin de stockage de la police pour que ça fonctionne.

Liens

On peut télécharger des polices libres de droits ici ou
Un bon article sur les différents formats de polices web

No votes yet.
Please wait...

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur la façon dont les données de vos commentaires sont traitées.