Discussion :

[fweds]

Bonjour à tous,

Je viens apporter une petite contribution et vous indiquer comment j'ai pu intégrer une nouvelle police dans un site WebDev.
Après recherche sur le Net, la solution était d'utiliser les Google Fonts, Ok, mais pour une police n'existant pas dans Google Font, comment faire ?

La solution :
- Procurez vous les fichiers nécessaires pour la nouvelle police (ttf, eot, svg)
- Installez votre police sur votre poste local.
- Développez votre site et pour utiliser votre nouvelle police dans un libellé par exemple, ouvrez la description du champ, onglet Style, utilisez le bouton de parcours à côté du combo Polices et ajouter + sélectionnez votre nouvelle police. Votre police est donc utilisée dans l'éditeur et donc visible en édition.
- Relevez le nom exact de la police qui s'affiche, très important.
- Dans le répertoire WEB de votre site, créez par exemple un dossier 'fonts' et y mettre les fichiers de votre police.
- Dans le répertoire WEB, créez un fichier de style CSS, 'monstyle.css' par exemple et y mettre ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
@font-face {
font-family: 'NomExactDeLaPoliceAfficheeDansWebDev';
src: url('font/NomDuFichier.eot');
src: url('font/NomDuFichier.eot?#iefix') format('embedded-opentype'),
 url('font/NomDuFichier.woff') format('woff'),
 url('font/NomDuFichier.ttf') format('truetype'),
 url('font/NomDuFichier.svg#NomDeLaPolice') format('svg');
font-weight: Bold;
font-style: Bold;
}

- Dans la description de votre projet, onglet Ambiance et Styles, aller sur 'Feuilles de styles CSS libres...' et ajouter votre fichier de style CSS ci-dessus.

Déployez votre site et observez le résultat, compatible tous navigateurs
J'ai testé sur plusieurs machines qui ne possédent pas la police concernée en local et ça fonctionne...

J'espère que cette solution vous aidera, car j'ai cherché moi-même longtemps et je souhaites vous le faire partager et vous éviter de vous casser la tête

[courdi95]

Lors du dernier tdf, il y a une démonstration de l'utilisation d'une police et de son installation, mais ils ne vont pas jusqu'à modifier le fichier css à la main. Il faudrait regarder les différences.

[fweds]

Je n'ai pas vu le dernier TDF, j'ai simplement vu qu'en recherchant sur le net, aucune solution n'était proposée, d'où ma recherche et ce tuto

[courdi95]

C'est très bien ton initiative !!! Au contraire, l'intérêt c'est de partager, cela fait progresser tout le monde.

.... si j'ai le temps, je vais essayer regarder quelles sont les différences avec ce que PCSOFT a montré au TDF TECH.