Découvrez la technique pour personnaliser vos polices de caractères.
Et avec Google Fonts, utilisez rapidement des polices de caractères originales et compatibles avec la majorité des navigateurs des ordinateurs, smartphones et tablettes.
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
La technique pour ajouter des polices personnalisées avec CSS3 et Google Fonts
Bonjour à tous et bienvenu sur Développement Facile.
Dans ce nouveau qu’on vous allez apprendre à utiliser vos polices de texte personnalisées directement avec CSS 3 pour les intégrer dans vos sites Internet. Rappelez-vous dans un cours précédent, il y a déjà quelques semaines, une ou deux semaines, vous avez appris à intégrer, à choisir des polices de caractères, mais uniquement parmi les polices système, donc les polices présentes sur l’ordinateur de votre internaute, cette fois vous allez pouvoir intégrer des polices qui ne sont pas présentes sur l’ordinateur de l’internaute mais qu’il va télécharger, grâce à CSS et vous pourrez utiliser des polices complètement originales sur votre site Internet en étant sur que vos internautes les ont.
Les polices personnalisées
C’est le but de l’importation et l’utilisation de police partagée, grâce à la propriété font-face, donc vous devez d’abord dire aux navigateurs de l’internaute de télécharger la police pour ensuite l’utiliser dans la page, vous faites font-face {font-family: le nombre de votre police et ensuite vous précisez l’URL, donc remarquez je vous ai mis Google font, donc l’URL de Google font, il propose des tonnes et des tonnes de polices personnalisées toutes plus ou moins sympas, et en tout cas que vous pouvez utiliser sans problème sur vos sites Internet, vous avez le choix sur Google font profitez-en c’est très pratique. Je vous remettrais l’URL bien évidemment en-dessous de ce cours vidéo.
Excusez-moi, il existe plusieurs types de format de polices, les Web fonts. Vous avez le format eot (Embedded Open Type) c’est une forme compacte de la police open type c’est un format propriétaire de Microsoft, vous avez le format ttf (True Type Font) qui est un format de police de caractère le plus répandu sur le Web aujourd’hui, vous avez le format otf (Open Type Font) qui est une évolution du format ttf avec des possibilités typographiques améliorées, le format otf on le rencontre de plus en plus sur les sites Internet maintenant, et enfin vous avez un format très récent, c’est le format woff (Web Open Font Format) c’est un format de polices de caractères compressés pour le Web très intéressant et très optimisé à utiliser pour vos sites Internet, c’est le format que je vous conseille.
Il faut savoir que encore une fois en fonction du navigateur, ils ne prennent pas tous en compte le même format de police, vous avez la possibilité de charger des polices de caractères, sous plusieurs formats dans votre feuille de style, vous utilisez l’attribut SRC pour spécifier des URL de votre police de caractère au format eot, woff, ttf ainsi, vous aurez plus de chance que votre police de caractère s’affiche correctement chez votre visiteur. Je vous conseille d’utiliser le site Internet fontsquirrel pour générer une police dans plusieurs formats, je vous ai mis l’URL qui s’affiche sur votre écran, l’avantage c’est que si vous avez une police de caractère dans un seul format, vous allez sur ce site, vous donnez votre fichier de police et vous pourrez le récupérer dans plusieurs formats, et ainsi ajouter plusieurs URL pour que votre police personnalisée s’affiche correctement quel que soit le navigateur de votre internaute, très important.
Je vous ai mis un exemple de code source, on va utiliser aFontSpace font family dev facile, src dev facile.ttf, tout en sachant que je vous encourage à utiliser l’attribut SRC en spécifiant les différentes URL, dans les différents formats et ensuite on l’applique aux classes styles bloc 1 et on met cette classe CSS bloc 1 sur une div avec le Lorem ipsum est simplement du faux texte employé et vous verrez que quand vous allez reprendre ce code source dans vos documents HTML, ce sera une police personnalisée que, bien évidemment, si vous ne l’avez pas sur votre PC, elle sera téléchargée en direct et appliquée en direct sur votre page web.
Il y a encore Google font API, qui vous simplifie encore plus la vie, vous allez sur Google font Api vous pouvez utiliser des polices personnalisées sur vos pages Web, mais, l’avantage sans vous préoccuper de aFontText, sans vous préoccuper du style CSS et vos polices seront parfaitement compatibles avec la majorité des navigateurs. Il faut savoir que Google fait beaucoup de choses pour les webmasters, une fois de plus, je vous conseille d’utiliser Google font Api pour utiliser les polices adaptées qu’il vous fournis, elles sont adaptées aux navigateurs et elles ont un poids minimal, il vous suffit d’aller sur le site, il vous donne un code à ajouter directement dans votre page HTML pour obtenir la police, en principe le code ressemble à ce que vous voyez sur votre écran link c’est un lien vers la police hreffont.GoogleApi.com avec le nom de la police utilisée.
Je vous ai mis un exemple ou on utilise la police de Google font Api qui s’appelle Revalia, on met link href Revalia dans votre feuille de style CSS vous spécifiez font family Revalia,Arial au cas où, et vous voyez quand vous allez reprendre ce code source dans votre document HTML, le lorem ipsum (du faux texte) il va s’afficher avec la police de caractères Revalia tout simplement.
Afficher des lettres creuses
Vous avez d’autres propriétés CSS pour créer des effets sur le texte, donc les lettres creuses avec webkit-text-stroke, ça va vous permettre d’afficher vos textes sous forme de lettres creuses, vous définissez l’épaisseur du bord des lettres avec width, la couleur avec color, stroke c’est un raccourci des deux valeurs précédentes enfaite, collées côte à côte valeur couleur, et vous pouvez définir aussi fill color, la couleur de remplissage des lettres, ou de les laisser en transparent.
Je vous ai mis un exemple de code source, vous prenez une police personnalisée de Google font API, toujours Revalia, et vous faites un effet lettre creuse, webkit-text-stroke de 5 pixels, la couleur, et webkit-text-fill-color, la couleur de remplissage des lettres qui est définie, et vous verrez l’affichage du lorem ipsum avec cet effet de lettres creuses, amusez-vous, reprenez ce code source dans vos documents HTML, faites des tests avec les polices partagées, les polices personnalisées de Google, les effets de lettre creuse etc.
Votre plan d’actions !
Retrouvez un code source à télécharger sous ce cours vidéo, si vous avez des questions posez-les directement sous la vidéo, et ah oui, attention quand vous utilisez des polices de caractères personnalisées ou originales grâce à CSS 3, pensez que c’est l’internaute qui va télécharger cette police de caractères sur son PC, donc en principe, n’en abusez pas trop, mettez une, deux, voire trois maximum polices de caractères personnalisées dans votre site Internet, mais pas plus pour que votre site s’affiche toujours aussi rapidement sur l’ordinateur de votre internaute. Je vous dis à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple CSS3
Retrouvez un exemple de code avec des polices partagées de Google Fonts Library.
Téléchargement du code source Exemple CSS3 et polices personnalisées Google Fonts
