Inclure des polices personnalisées à l'aide de .ttf et CSS

Vous souhaitez intégrer une police .ttf dans votre page Web mais rencontrez des difficultés. Examinons votre code :

@font-face {
    font-family: 'oswald';
    src: url('/font/oswald.regular.ttf');
}

Où est le problème ?

L'inclusion d'un seul fichier .ttf ne suffit pas pour assurer la compatibilité entre navigateurs. Pour couvrir un large éventail de navigateurs, vous avez besoin de plusieurs formats de police.

Solution complète :

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Ce code suppose que vous disposez des formats .eot, .woff, .ttf et SVG pour votre police Web. Les générateurs de polices Web comme Font Squirrel ou Transfonter peuvent automatiser ce processus.

Approche moderne :

Les navigateurs modernes préfèrent les polices .woff, vous pouvez donc également simplifier votre code :

@font-face {
    font-family: 'MyWebFont';
    src: url('myfont.woff') format('woff'), /* Chrome 6 , Firefox 3.6 , IE 9 , Safari 5.1  */
         url('myfont.ttf') format('truetype'); /* Chrome 4 , Firefox 3.5, Opera 10 , Safari 3—5 */
}

Ressources supplémentaires :

• Astuces CSS : Utilisation de @font-face : https://css-tricks.com/snippets/css/using- font-face/
• Puis-je utiliser fontface : https://caniuse.com/fontface