Comment utiliser des polices personnalisées à partir du web fonts site de Google dans Dreamweaver

Une des façons les plus faciles à utiliser Dreamweaver pour ajouter des polices personnalisées pour votre site est offert par Google. Google Web Fonts propose une collection limitée de polices mais vous pouvez utiliser toutes leurs polices gratuitement. Suivez ces étapes pour ajouter l'une des polices à partir du site Google Web Fonts à vos pages:

  1. Ouvrez un navigateur Web et visiter Web Fonts site de Google.

  2. Faites une recherche parmi les polices disponibles sur le site en sélectionnant le type et le style de police que vous cherchez.

    Pour affiner votre recherche, utiliser des filtres (dans la colonne de gauche). Vous pouvez modifier le texte qui est affiché dans chaque police en modifiant le champ Texte de prévisualisation en haut de l'écran.

    image0.jpg
  3. Trouver une police que vous voulez, puis cliquez sur le bouton bleu Ajouter à la collection dans le coin inférieur droit, juste en dessous de chaque nom de police.

  4. Cliquez sur les cases à cocher à côté de chacun des styles de police que vous souhaitez utiliser sur votre page web.

    La plupart des polices dans le Google Font Directory ont un seul style. Bien que vous pourriez être tenté de choisir tous les styles, il est préférable de ne sélectionner que celles que vous utilisez. Comme avertit Google, les styles plus de polices que vous choisissez, plus il faudra pour télécharger votre page Web.




  5. Faites défiler la page et sélectionnez l'option latine (pour l'anglais).

    Si vous avez besoin des caractères supplémentaires pour une autre langue, sélectionnez l'option Extended latine à la place.

  6. Faites défiler la page plus bas à la boîte bleue avec trois Onglets- cliquez sur le premier onglet de lier la police à votre site Web.

    Google propose trois options: Standard,import, et javascript. Vous trouverez des descriptions détaillées de tous les trois sur le site de Google.

    image1.jpg
  7. 7. Copiez le lien du champ onglet Standard sur Google comme vous le feriez copier tout autre texte ou un code à partir d'une page Web.

  8. Dans Dreamweaver, collez le lien dans la zone de la tête de votre page web ouverte entre le et à proximité balises.

  9. Retour à la Web Fonts site Google et au bas de la page, copier le nom de la famille de polices.

    Vous pouvez trouver le nom de la famille de la police dans l'Intégrer les polices de caractères dans votre zone de CSS.

    Dans la définition de votre style, vous devez inclure le nom de la police exactement comme Google l'écrit. Copier-coller est la meilleure façon de vous assurer que le nom de la police correspond.

  10. Dans Dreamweaver, collez le nom de la famille de la police dans la règle CSS où vous voulez utiliser la police.

  11. Appliquer la règle au texte dans votre page web.

    Si vous utilisez la police dans un style de sélecteur de Tag, comme le

    tag, lorsque vous appliquez la balise au texte, la police sera appliquée automatiquement dans le cadre de la règle. Si vous utilisez la police dans un style de classe ou ID, le style doit ensuite être appliqué à une balise qui entoure le texte, comme un

    tag ou d'un

    tag.

  12. Publier la page sur un serveur Web, puis aperçu de la page dans un navigateur web pour voir la police.

    Notez que lorsque vous utilisez Google Web Fonts, vous ne pouvez pas voir la police affichée dans Dreamweaver, même si vous utilisez l'option Live View. Pour veiller à ce que la police fonctionne sur votre page, vous pouvez avoir besoin de transférer la page sur un serveur Web utilisant le protocole FTP et de prévisualiser la page après qu'il a publié en ligne.


» » » » Comment utiliser des polices personnalisées à partir du web fonts site de Google dans Dreamweaver