Vidéo: La technique pour ajouter des polices personnalisées avec CSS3 et Google Fonts 2024
L'un des moyens les plus simples d'utiliser Dreamweaver pour ajouter des polices personnalisées à votre site est proposé par Google. Google Web Fonts offre une collection limitée de polices, mais vous pouvez utiliser toutes leurs polices gratuitement. Suivez ces étapes pour ajouter l'une des polices du site Google Web Fonts à vos pages:
-
Ouvrez un navigateur Web et accédez au site Web Google Fonts .
-
Recherchez parmi les polices disponibles sur le site en sélectionnant le type et le style de police que vous recherchez.
Pour affiner votre recherche, utilisez Filtres (dans la colonne de gauche). Vous pouvez modifier le texte affiché dans chaque police en modifiant le champ Aperçu du texte en haut de l'écran.
-
Trouvez une police que vous aimez, puis cliquez sur le bouton bleu Ajouter à la collection en bas à droite, juste en dessous de chaque nom de police.
-
Cliquez sur les cases à cocher en regard de chacun des styles de police que vous souhaitez utiliser sur votre page Web.
La plupart des polices du répertoire de polices de Google n'ont qu'un seul style. Bien que vous puissiez être tenté de choisir tous les styles, il est préférable de ne sélectionner que ceux que vous utiliserez. Comme le met en garde Google, plus vous choisissez de styles de police, plus il faudra de temps pour télécharger votre page Web.
-
Faites défiler la page vers le bas et sélectionnez l'option Latin (pour l'anglais).
Si vous avez besoin des caractères supplémentaires pour une autre langue, sélectionnez plutôt l'option Latin étendu.
-
Faites défiler la page jusqu'à la case bleue avec trois onglets; cliquez sur le premier onglet pour lier la police à votre site Web.
Google propose trois options: Standard, @import et JavaScript. Vous trouverez des descriptions détaillées des trois sur le site Google.
-
7. Copiez le lien de l'onglet Standard sur Google, tout comme vous copiez tout autre texte ou code d'une page Web.
-
Dans Dreamweaver, collez le lien dans la zone d'en-tête de votre page Web entre les balises d'ouverture et de fermeture.
-
Revenez au site Polices Web de Google et, au bas de la page, copiez le nom de la famille de polices.
Vous pouvez trouver le nom de la famille de polices dans la zone Intégrer les polices dans votre CSS.
Dans votre définition de style, vous devez inclure le nom de la police exactement comme Google l'écrit. Copier-coller est le meilleur moyen de s'assurer que le nom de la police correspond.
-
Dans Dreamweaver, collez le nom de la famille de polices dans la règle CSS dans laquelle vous souhaitez utiliser la police.
-
Appliquez la règle au texte de votre page Web.
Si vous utilisez la police dans un style de sélection de tag, tel que la balise
, lorsque vous appliquez la balise au texte, la police sera automatiquement appliquée dans le cadre de la règle. Si vous utilisez la police dans un style de classe ou d'ID, le style doit ensuite être appliqué à une balise qui entoure le texte, telle qu'une balise
ou une balise.
-
Publiez la page sur un serveur Web, puis prévisualisez la page dans un navigateur Web pour voir la police.
Notez que lorsque vous utilisez les polices Web Google, vous ne voyez peut-être pas la police affichée dans Dreamweaver, même si vous utilisez l'option Affichage en direct. Pour vous assurer que la police fonctionne sur votre page, vous devrez peut-être transférer la page sur un serveur Web via FTP et prévisualiser la page après sa publication en ligne.
