Ajouter une Police en V8

Une police Google

Cette page en image vous montre comment ajouter une police Google de façon à l'avoir en permanence sur votre site.

Cela permet de gagner un peu de temps au chargement car on ne va plus sur le site de Google

1

liste des polices standard
La liste standard de TOWeb

2

style de police Arial
la police choisie

3

fenêtre CSS d'ajout des polices
après un clic sur " + " devant Famille

4

liste dans le zip
Ce qu'il y a dans le fichier zip suivant le choix de la police

5

copie-colle le css
après avoir Copié/Collé le CSS

6

nouvelle fenêtre
un clic sur Suivant, on arrive ici, cliquez sur Explorer

7

fichier zip décompilé
allez rechercher le zip téléchargé

8

fin d'installation
sans commentaire

9

nouvelle liste
la police est ajoutée en début de liste

10

nouvelle police installée

11

nouvelle police
la nouvelle police est sélectionnée

12

police existante
Elle existait mais elle serait téléchargée du site de Google à chaque ouverture d'une page

Une autre police

Si vous récupérez une police sur un site quelconque, il y a 2 possibilités concernant le CSS, et puis même le fichier .zip.

Si vous trouvez votre police avec le fichier zip et un fichier .css  (style.css ou autre), vous faites les mêmes manipulations que ci-dessus, vous ouvrez le fichier .css pour récupérer le texte à coller dans TOWeb.

Si votre police se résume à un fichier (souvent un .ttf (mais pas toujours, voir dans l'image 4 les extensions)), vous devez zipper ce fichier (sous Windows, clic droit sur le fichier puis Envoyer vers --> fichier compressé ). Vous devez ensuite écrire dans un éditeur de texte tel que le Bloc notes de Windows un code CSS minimal pour le COLLER dans la fenêtre de l'image 5

@font-face{
font-family:'nom-de-la-police';
font-style:normal;
font-weight:normal;
src:url('../_fonts/nomdufichier.ttf');
}

Puis vous continuez à l'image 6 etc...(en 7 il n'y aura donc qu'un fichier dans Contenu).


Exemple : Je veux installer la police  Alien-Encounters à partir de ce site . Après avoir téléchargé le .zip, je regarde ce qu'il y a dedans soit 8 fichiers et je crée le CSS en conséquence :


@font-face{
font-family:'Alien-Encounters';
font-style:normal;
font-weight:normal;
src:url('../_fonts/Alien-Encounters-Italic.ttf'),
    url('../_fonts/Alien-Encounters-Bold.ttf'),
    url('../_fonts/Alien-Encounters-Bold-Italic.ttf'),
    url('../_fonts/Alien-Encounters-Regular.ttf'),
    url('../_fonts/Alien-Encounters-Solid-Italic.ttf'),
    url('../_fonts/Alien-Encounters-Solid-Bold.ttf'),
    url('../_fonts/Alien-Encounters-Solid-Bold-Italic.ttf'),
    url('../_fonts/Alien-Encounters-Solid-Regular.ttf');
}

Puis je suis le reste de la procédure d'installation.


En conclusion : Pour une police, vous devez avoir 1 fichier .zip contenant le ou les fichiers de police et 1 code css.

L'idéal est d'avoir une police avec le maximum de fichiers comme celles de Google.