L'essentiel de Dreamweaver CC 2017

Incorporer ses propres fontes

Testez gratuitement nos 1247 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Les polices externes ont toute leur place dans la gestion du texte et des feuilles de style. Apprenez à gérer des polices externes aux navigateurs et aux systèmes des utilisateurs.
08:00

Transcription

Bien que ce chapitre s'adresse à du texte, il fait partie quand-même intègre des médias et des CSS. Donc je le place dans la partie des CSS. Nous pouvons être amenés à utiliser un certain nombre de fonts et pour ça, ici, voyez, vous avez des polices par défaut. Vous allez pouvoir venir depuis ce menu déroulant et choisir le font stack qui va mieux convenir. Donc, ici par exemple, si je prends l'Impact, ici, forcément le navigateur va essayer de trouver de la police Impact. S'il la trouve pas, il va prendre de la Haettenschweiler, Franklin Bold, ect., jusqu'à ce qu'il trouve, et au pire des cas il prendra une font sans-serif pour pouvoir écrire le texte. Mais depuis HTML5, et puis depuis la vulgarisation et la démocratisation de l'utilisation de typos sur le web, il est très facile aujourd'hui de gérer des polices, et d'utiliser des polices en ligne. Alors, le premier type de police qu'on va pouvoir utiliser c'est les Adobe Edge Web Font, qui sont fournies gratuitement, justement avec le compte CreativeCloud. Donc ici, on va pouvoir venir d'une première part dans le catalogue chercher des typos qui nous plaisent, et donc pour cela soit on prend des typos purement textuels, soit des typos qui vont faire du titre, soit les deux. Donc ici, si je pars sur la typo qui va faire que du titre, je vais pouvoir venir choisir une typo qui me convient. Sans-serif, serif, script, gothique, etc. Donc, on va pouvoir venir choisir dans ce marché ici. Alors, moi je vais prendre la Poiret One, ici, et je vais faire Terminé, tout simplement. Dès l'instant où j'ai fait ceci, rien ne se passe, mais j'ai simplement dit à Dreamweaver, voilà, je vais peut-être travailler avec cette typo. Alors, j'aurais pu en prendre 3, 4, 5, vous savez, je peux retourner ici et dire Gérer les polices, et puis dans le catalogue, à côté de la Poiret, ici, je vais reprendre cette partie-là, ici, à côté de la Poiret, je pourrais prendre par exemple la Cooper Black. J'en prends deux. Voilà, et j'ai fait Terminer. Et maintenant, quand je viens dans le menu déroulant, voyez, les deux sont apparues ici avec le petit icône webkit ici à côté. Alors, je pourrais très bien prendre le titre, ici, et puis dire à ce titre, dans l'Inspecteur des propriétés, voilà, ici, je vais pouvoir venir choisir une font parmi celles-ci. Alors, je vais passer dans le CSS Designer, ici, je vais dire que je veux créer un nouveau fichier CSS où que je puisse définir sur la page, directement. Je vais prendre aucune requête multimédia. Au niveau du sélecteur, je vais ajouter le sélecteur... Alors ici, j'ai sélectionné la balise H1, alors ici je vais prendre quand-même sur le global, pour qu'il puisse me laisser passer le sélecteur de type H1, ici. Et au niveau des propriétés, je vais prendre, dans la partie textuelle, font family, et je vais venir chercher par exemple là, Poiret One. Et ici, si j'écris cette fonte-là en Poiret One, vous voyez que ça m'a rajouté deux choses. La première, c'est un script. Alors, la première variable ici c'est simplement pour pouvoir évaluer combien de fois la typo est utilisée pour Edge Web Font, donc c'est purement facultatif. Et le second script, ici, c'est un script qui va pointer vers la typo en Javascript, directement, sur le serveur, pour pouvoir être utilisée. Et si vous regardez au niveau du style, ici qu'est-ce qu'on a? On a font-family poiret-one, normal, font size, etc. qui est utilisé. Ça c'est la première possibilité que j'ai d'utiliser de la typo. On en a une seconde, maintenant. Et on va retourner par Gérer les polices. Et donc pour ça, on va passer, cette fois-ci, par les Outils, voir qu'il y a plusieurs portes qui mènent à Rome. Et si je fais Gérer les polices, ici, je vais pouvoir choisir des polices locales. Alors, pour choisir une police locale, il me faut posséder, de préférence, l'intégralité des typos ici. Alors, soit je passe par un site de type FontSquirrel, mais il peut s'agir de DaFont, 1001Fonts, bref de tout site qui vous permet de télécharger de la typo. Ici, vous pouvez venir faire votre marché pour récupérer la typo qui vous convient, mais faites attention de récupérer l'intégralité du Webfont Kit. Alors, pour cela, on va partir par exemple vers la PT Sans, qui est une typo traditionnelle, on va dire, un peu classique, ici. Voilà, donc cette PT Sans, vous voyez ici, vous avez le Webfont Kit. Pensez toujours à venir vérifier si, dans la licence, vous avez les droits d'exploitation et d'utilisation pour votre site. Et puis, une fois que vous sélectionnez Webfont Kit, ici, vous voyez, vous avez l'intégralité des formats nécessaires. C'est à dire, TTF, EOT, WOFF, et SVG. Vous pouvez bien entendu venir récupérer un subset nécessaire. Mais sinon, vous pouvez également télécharger que le TTF ou si vous possédez le TTF d'une typo qui vous convient, vous pouvez venir dans le Generator, ici uploader ce fameux TTF et puis venir faire des réglages experts au niveau de l'exportation, afin de pouvoir obtenir une typo qui serait complètement optimisée, adaptée à vos besoins. Ici, bien entendu, vous avez l'agreement pour dire attention, je sais que j'ai le droit de pouvoir utiliser cette typographie. Et une fois que tous les réglages seront faits, alors ici simplement en cliquant cette partie-là, vous avez le bouton de download qui va pouvoir s'activer pour pouvoir les récupérer, et donc avoir ces quatre formats. Donc, si j'ai au moins la TTF ici, je vais pouvoir parcourir et pointer vers la TTF. Alors je vais aller sur un dossier temporaire où je sais qu'elle a été stockée, et je vais prendre la Eras Bold TTF ici. Et je vais la cocher. Alors, pour l'instant, il y a que la TTF. Si dans le dossier il y aurait eu l'EOT, le WOFF et le SVG, Dreamweaver aurait automatiquement rempli tout. Et c'est vrai qu'avec la True Type, on arrive déjà à couvrir un grand nombre de navigateurs à part Internet Explorer. Donc ici, si je détiens une licence appropriée pour pouvoir exploiter cette typo, je vais pouvoir l'ajouter à ma liste de polices locales. Je vais pouvoir Terminer. Il s'est strictement rien passé de ce côté-là, mais si je viens maintenant du côté du paragraphe, et que dans le paragraphe je vais rajouter une balise de type paragraphe, voilà, si je viens du côté de la typographie, au niveau font-family, quand je vais vouloir utiliser la font family, vous voyez, j'ai un autre icône qui est apparu, qui est ici la Eras Bold ITC. Et ici, j'ai pas créé de jeu de police avec, pour l'instant mais je vais pouvoir l'utiliser. Et voyez que ici j'ai pu utiliser directement ma Eras Bold. Qu'est-ce que ça a fait? Ça a fait un Import Webfont. Parce que si je regarde du côté des fichiers, maintenant ici, j'ai un dossier webfonts qui est apparu, et ce webfonts a créé un Eras Bold ITC ici avec tous les fichiers nécessaires, donc la TTF, et puis il y aurait eu le EOT, le WOFF, le SVG, etc. tout aurait été placé à ce niveau-là, également. Et si j'ouvre cette feuille de style, elle va faire quoi ? Elle me fait ni plus ni moins qu'un font-face qui me dit le font-family et la source où je vais pouvoir la trouver, c'est tout. Donc, la feuille de style qui va utiliser cet élément va faire simplement un import vers cette feuille de style-là. Pourquoi le dossier webfonts ? Parce que si je viens dans Dreamweaver ici à ce niveau-là, au niveau des paramètres avancés à ce niveau-là, j'ai les polices web. Et les polices web sont définies par défaut dans un dossier qui s'appelle webfonts. Libre à vous de venir, avant d'importer la typo, redéfinir ce dossier sous forme de font ou autre, Dreamweaver viendra les importer automatiquement là-dedans. Dernier élément à regarder, c'est si je reviens dans les outils ici pour gérer les polices, à ce moment-là j'ai un troisième onglet qui me permet de faire des piles de polices personnalisables. Alors, c'est vrai que maintenant, si je fournis la Eras Bold ou la Cooper, elle vont être là. Mais il se peut qu'elles ne soient pas téléchargées, que j'ai un souci de serveur. Et donc là je vais pouvoir venir créer un fontstack qui dira, je vais utiliser la Eras Bold, et si des fois je n'ai pas la Eras Bold, je viendrai chercher une police de type alors ici, ce serait une police sans-serif, je vais pouvoir l'ajouter, et donc je vais pouvoir venir créer un fontstack ici qui sera mieux adapté. Mais pour créer un fontstack, je vous propose vraiment de rechercher sur Google et de faire des recherches de type « fontstack optimisé », afin de pouvoir vraiment optimiser votre fontstack, parce que c'est pas le tout d'ajouter des typos pour se dire, voilà, je les ajoute pour ça. Allez un peu plus loin et cherchez comment vraiment optimiser le fontstack. Mais c'est à partir de là que Dreamweaver vous permettra de le régler. Voilà, donc Dreamweaver permet d'utiliser des typos depuis son outil de gestion de polices et ensuite depuis le CSS Designer. En important des typos soit depuis Edge Webfont ou des typos TTF que vous aurez utilisées vous-mêmes en les important dans votre dossier webfonts, placé sur l'arborescence de votre site.

L'essentiel de Dreamweaver CC 2017

Prenez en main l’environnement de travail de Dreamweaver. Créez des documents, utilisez les CSS, gérez les liens hypertexte, les fichiers multimédia, les formulaires, etc.

7h28 (98 vidéos)
Aucun commentaire n´est disponible actuellement
 
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :30 janv. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !