Nous allons maintenant étudier la solution d'hébergement à distance pour les polices web.
Nous allons utiliser les polices Adobe Edge Fonts, qui sont parfaitement intégrées avec Dreamweaver CC.
Le processus est très simple.
Il faut tout d'abord mettre un sélecteur en surbrillance.
Je réduis la section Requêtes multimédias, je sélectionne .textSizePx puis, sous Propriétés, je clique sur Texte.
La police Gill Sans est appliquée.
Je clique ici puis, en bas, je choisis Gérer les polices.
Une boîte de dialogue du même nom s'affiche.
Elle permet de consulter les polices Edge Web Fonts disponibles.
Vous pouvez les utiliser gratuitement ; elles ont été sélectionnées par Google, Adobe et d'autres designers.
Je l'ai dit, ce service est gratuit.
Vous pouvez donc utiliser librement toutes ces polices.
Si vous en cherchez une en particulier, tapez son nom dans ce champ.
Vous pouvez aussi n'afficher que les polices recommandées pour les titres ou celles recommandées pour les paragraphes.
Je désélectionne ces filtres.
On peut aussi filtrer par style, par exemples les polices Sans ou Serif.
Il y a aussi des polices Slab et d'autres filtres encore.
Vous cherchez une police décorative ?
Cliquez sur le filtre correspondant pour afficher les polices décoratives, puis choisissez-en une qui vous plaît.
En l'occurrence, je vais en choisir une qui illustre bien la dimension décorative.
Celle-ci, par exemple.
Quand une police est sélectionnée, une coche s'affiche dessus.
En bas, un message indique qu'en cliquant sur Terminé, vous acceptez les conditions d'utilisation du service.
Pour en savoir plus à ce sujet, cliquez sur le lien Conditions d'utilisation.
Quand vous cliquez sur Terminé, le texte ne change pas, mais la police est désormais disponible dans font-family.
La voici, en bas.
Elle est associée à une icône spéciale et possède sa propre section dans la liste, ce qui facilite la distinction entre les polices web hébergées, en l'occurrence une police web hébergée à distance via Adobe Edge Web Fonts, et les polices du haut installées en local.
Je sélectionne donc cette police.
Ensuite, si j'avais appliqué des propriétés de police à ce texte auparavant, j'aurais été averti qu'elles allaient sans doute être modifiées.
Pour les visualiser, il faut activer le mode En direct.
Dans ce mode, la personnalisation du texte est visible.
En coulisses, quelles sont les différences avec la déclaration @font-face utilisée dans la vidéo précédente ?
Dans le code source, il n'y a que du JavaScript.
Ce code pointe simplement vers un fichier JavaScript sur les serveurs d'Adobe.
Vous le voyez, l'utilisation des polices web hébergées à distance est très simple.
Par ailleurs, vous pouvez créer une pile de polices pour disposer d'une sauvegarde en cas de problème de chargement ou pour tout autre motif.
Songez-y !
Quoi qu'il en soit, l'utilisation des polices Edge Web Fonts dans Dreamweaver est très simple.
Il s'agit d'une avancée significative en matière de web design.
La personnalisation du texte n'était pas vraiment possible il y a encore quelques années.
Il fallait créer des images pour le texte personnalisé à utiliser.
Tout cela est révolu.
Le référencement des pages web n'en pâtit plus, car on n'utilise plus d'images à la place de texte.
Voilà, vous savez maintenant comment utilisez les polices dans Dreamweaver.
