Typo & web

Intégrer une typo

@font-face

Pour intégrer une police de caractères dans une page web, un seul fichier ne suffit pas pour assurer la compatibilité avec tous les navigateurs, bien qu’aujourd’hui, le support du format woff (Web Open Font Format) tende à se généraliser sur les navigateurs modernes.

L’emplacement des fichiers de typo est relatif au fichier CSS.

Chaque graisse (y compris les italiques) doit faire l’objet d’une déclaration @font-face, mais le nom de la famille doit être le même, de manière à pouvoir supporter les variations de graisses produites par des balises HTML comme <strong> ou <em>.

@font-face {
    font-family: 'MyWebFont';
    font-weight:400; /* Graisse : regular */
    src: url('fonts/webfont.eot'); /* IE9 */
    src: url('fonts/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('fonts/webfont.woff') format('woff'), /* Navigateurs modernes */
        url('fonts/webfont.ttf')  format('truetype'), /* Safari, vieux Android, vieux iOS */
        url('fonts/webfont.svg#svgFontName') format('svg'); /* Très vieux iOS : ) */
}
@font-face {
    font-family: 'MyWebFont';
    font-weight:700; /* Graisse : bold */
    src: url('fonts/webfont-bold.eot'); 
    src: url('fonts/webfont-bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/webfont-bold.woff') format('woff'), 
        url('fonts/webfont-bold.ttf')  format('truetype'), 
        url('fonts/webfont-bold.svg#svgBoldFontName') format('svg'); 
}            

Services

Le service webfonts de Google permet d’intégrer une police fournie par google en faisant simplement un lien avec la feuille de style qui la contient. D’autres services, tels Typekit ou fonts.com permettent également d’intégrer des typos (moyennant paiement), parfois via l’insertion d’un script javascript.

Sur la page ateliers.esapyrenees.fr/web/fonderies/ se trouve une liste de ces services.

Générer des webfonts

La page ateliers.esapyrenees.fr/web/fonderies/ liste également quelques fonderies numériques libre ou open-source (Velvetyne, OpenSourcePublishing…), qui peuvent vous permettre de télécharger leurs créations sans vous fournir l’ensemble des fichiers nécessaires.

Les fichiers téléchargés (souvent des .otf) devront être convertis pour pouoir être intégrés à vos pages.

Font Squirrel met à disposition un générateur de « packs » @font-face, qui vous permet de faire ces conversions.

Fontrep est une application Mac dédiée à la transformation de fichiers ttf et otf en webfonts.