Les polices personnalisées comptent parmi les aspects les plus attrayants de CSS3 pour les concepteurs. Avec la règle font-face , vous pouvez rendre toute police en ligne dans le texte de votre page Web, que l'utilisateur l'ait ou non installé.
Comme avec la plupart des techniques CSS3, le code de base est assez simple, mais la réalité pratique est un peu plus complexe.
Dans ce court tutoriel, nous allons parcourir les bases de l'inclusion de polices personnalisées dans vos pages.
Tout d'abord, assurez-vous que la police que vous souhaitez utiliser est concédée sous licence pour une utilisation Web. Presque toutes les polices gratuites peuvent être utilisées sur un site Web et de nombreuses polices premium sont disponibles avec une licence couvrant l'utilisation du Web.
Ensuite, téléchargez votre police choisie sur votre serveur. Vous souhaiterez peut-être le stocker dans un répertoire "polices" dédié, mais cela est facultatif.
N'oubliez pas d'inclure les fichiers pour toutes les variantes de la police que vous prévoyez d'utiliser, comme en gras ou en italique. Vous pouvez utiliser les fichiers EOT (Embedded OpenType) pour Internet Explorer et OTF (OpenType) ou TTF (TrueType) pour le reste. (Les options supplémentaires incluent WOFF (Web Open Font Format) et SVG (Scalable Vector Graphics), mais nous nous en tiendrons à des types plus communs ici.)
Notez l'emplacement des fichiers de polices sur votre serveur.
Ouvrez le fichier HTML ou CSS de la page avec laquelle vous travaillez. Ajoutez une déclaration font-face au code de style:
@font-face {}D'abord dans la section font-face , donnez à la police un nom que vous pourrez utiliser plus tard pour vous y référer:
font-family: 'lovelyFont';Ensuite, toujours dans la section font-face , indiquez l'emplacement du fichier EOT:
src: url('fonts/lovely_font.eot');Modifiez l'emplacement et le nom de la police si nécessaire. Ajoutez ensuite une police OTF et / ou TTF:
src:url('fonts/lovely_font.otf')src:url('fonts/lovely_font.ttf') Ce sont les bases du code nécessaire, ce qui sera suffisant dans de nombreux cas. Cependant, nous pouvons prendre des mesures supplémentaires pour rendre le code plus fiable. Tout d'abord, étendez cette section pour inclure un indicateur du type de fichier de police:
src:url('fonts/lovely_font.otf')format('opentype');src:url('fonts/lovely_font.ttf')format('truetype');Comme autre mesure d'efficacité facultative, nous pouvons demander au navigateur de rechercher une copie locale de la police au cas où l'utilisateur l'aurait déjà. Etendez à nouveau votre code comme suit, en ajoutant la section locale avant de spécifier l'URL, afin que la police ne soit téléchargée que si nécessaire:
src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.otf')format('opentype');src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.ttf')format('truetype');L'addition est la même pour OTF et TTF. Nous spécifions le nom de la police après le mot-clé local .
Dans ce cas, nous avons deux lignes spécifiant la police locale car le nom de la police contient plusieurs mots. La version avec trait d'union tient compte de la façon dont les noms de police sont stockés sur certains systèmes d'exploitation - cette ligne supplémentaire n'est pas nécessaire si la police ne contient qu'un seul mot dans son nom. Si vous savez qu'une police peut avoir des noms différents sur différents systèmes, incluez chacune des possibilités dans votre section locale .
Enfin, nous pouvons appliquer la police aux éléments de la page. Dans le code CSS d'un élément particulier ou d'un groupe d'éléments, spécifiez simplement le nom de la police que vous avez utilisé, y compris les solutions de rechange que vous choisissez:
div { font-family: 'lovelyFont', sans-serif; }Si, par exemple, vous souhaitez également utiliser une version en gras de votre police, incluez simplement une autre section de police avec l'URL du fichier de police en gras et une déclaration de "font-weight: bold;". Spécifiez un poids de police en gras pour tout élément auquel la police personnalisée est appliquée et le navigateur affichera automatiquement la version en gras:
/*default version*/@font-face {font-family: 'lovelyFont';src: url('fonts/lovely_font.eot');src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.otf')format('opentype');}/*bold version*/@font-face {font-family: 'lovelyFont';src: url('fonts/lovely_font_bold.eot');src:local('Lovely Font Bold'),local('Lovely-Font-Bold'),url('fonts/lovely_font_bold.otf')format('opentype');font-weight: bold;}/*container element*/div { font-family: 'lovelyFont', sans-serif; }/*span elements inside the container div*/span { font-weight: bold; }C'est tout!
Utilisez-vous CSS3 pour développer les types de faces disponibles? Utilisez-vous un service comme Adobe Typekit ou les Webfonts de Google? Faites le nous savoir dans les commentaires.
Image / vignette en vedette, image des polices via Shutterstock.