AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    [Astuce + Tuto] Polices dans vos forums (CSS)

    Partagez
    avatar
    Minishiro
    FémininAge : 21Messages : 288

    le Mer 19 Déc 2012 - 0:41

    Rappel du premier message :

    Bonjour!

    Je me suis rendue compte que plusieurs forums ces jours-ci utilisent des polices qui sortent de l'ordinaire dans leurs designs. Le problème avec ces polices particulières, c'est que le codeur du thème doit sélectionner des polices alternatives au cas où le visiteur n'ait pas cette police installée sur son ordinateur. Ça gâche parfois l'effet que le codeur recherchait. Il existe toutefois une solution à ce problème qui garantit que tous les utilisateurs verront la police, peu importe celle que vous utiliserez. Voici un petit tutoriel rapide pour intégrer votre police directement dans votre site web/blog/forum.

    Un petit remerciement pour voir, s'il vous plaît!

    I. Trouver, télécharger et installer votre police

    Plusieurs sites sont à votre disposition pour ce faire, des sites où les polices sont gratuites et libres de droits pour les utilisations non-commerciales. En voici quelques uns:
    • DaFont
      Probablement le plus connu et le plus utilisé parmi les francophones car il offre un bon support des artistes et une interface en français.
    • Acid Fonts
      Plus utilisé que DaFont donc plus grande variété; bon support des artistes également et guides pour créer vos propres polices.
    • Abstract Fonts
      Un autre site avec un bon support, recherche aisée.
    • 1001 Fonts
      Le deuxième plus populaire dans le monde, jolie interface et beaucoup de variété.

    Il y en a de nombreux autres et ceux-ci ne sont que suggestions. Une fois que vous avez trouvé une police qui vous convient, il vous suffit de la télécharger. Certains fichiers seront compressé en .zip ou .rar et auront besoin d'être décompressés (jZip, Winrar, WinZip ou celui que vous avez déjà installé sur votre ordinateur (inclus sur Mac)). Une fois le fichier décompressé si nécessaire, il vous suffira de double-cliquer sur le fichier .ttf pour ouvrir l'assistant Windows et de cliquer sur «Installer» (veuillez prendre note qu'il vous faudra les droits d'administrateur pour se faire). La procédure est similaire sous iOS. Si vous recevez des messages d'erreur, c'est probablement que la police est déjà installée sur votre ordinateur.


    II. Héberger votre police

    Les hébergeurs supportant les fichiers .ttf sont malheureusement rares. Il y en a toutefois un qui le fait, il s'appelle Dropbox. C'est un logiciel gratuit, rapide et sécuritaire qui vous laisse héberger en ligne jusqu'à 2Go de contenu (abonnement possible jusqu'à 500Go). Non ce n'est pas une pub volontaire, c'est juste que dans ma recherche d'hébergeur de fichiers .ttf, je n'en ai pas trouvé d'autre. Sinon, si vous avez votre site personnel hébergé sur serveur, il y a de bonnes chances que celui-ci supporte les fichiers .ttf.

    Bon, maintenant que vous savez comment et où l'héberger, voici comment vous allez récupérer votre police (Windows 7/Vista). Dans le menu Démarrer, vous accéderez au Panneau de configuration. Dans ce dernier, vous aurez le volet «Polices» (dossier avec une lettre A qui sort). Le temps de chargement sera plus ou moins long dépendant du nombre de polices sur votre ordinateur. À cet endroit, vous avez une liste de toutes les polices d'écriture installées sur votre ordinateur. Allez chercher la police que vous venez d'installer. Vous n'aurez qu'à copier/coller la police dans votre dossier Dropbox, sous-dossier Public.

    III. Installer votre police (CSS)

    Vous aurez évidemment besoin d'un lien dont l’extension est .ttf. Il vous faudra donc le lien direct vers votre fichier hébergé. Voici le code qu'il vous faudra intégrer dans le CSS de votre forum (PA > Affichage > Couleurs > Feuille de style CSS):
    Code:
    @font-face {
    font-family: nomdevotrepolice;
    src: url('urldevotrepolice.ttf');
    }
    Ensuite, pour utiliser cette police, il vous suffira d'utiliser son nom à la place du nom de n'importe quelle police normale, comme ceci:
    Code:
    .title {
    font-family: nomdevotrepolice;
    }

    Voici un petit aperçu de ce que ça peut donner (il s'agit d'un blog mais le principe est le même): clic!

    Tutoriel étape par étape avec DaFont et Dropbox ici: clic!

    En espérant que ça vous a plu et que ça vous sera utile! Si vous connaissez d'autres hébergeurs qui prennent le format .ttf, n'hésitez pas à partager. :)



    avatar
    Yukihyo
    MasculinAge : 19Messages : 58

    le Jeu 14 Jan 2016 - 3:39

    Merci
    avatar
    Hadès.
    MasculinAge : 18Messages : 36

    le Ven 15 Jan 2016 - 14:35

    merci !
    avatar
    Elocha
    FémininAge : 66Messages : 255

    le Ven 15 Jan 2016 - 15:12

    merci !



    eLoChA.
    avatar
    Shylanova
    FémininAge : 27Messages : 14

    le Dim 31 Jan 2016 - 19:23

    Bien utile merci (:
    avatar
    Dearborn
    FémininAge : 22Messages : 108

    le Dim 31 Jan 2016 - 19:57

    Merci!
    avatar
    Kilda
    FémininAge : 36Messages : 69

    le Dim 7 Fév 2016 - 10:40

    merci
    avatar
    Shaneliae
    FémininAge : 20Messages : 764

    le Lun 22 Fév 2016 - 11:00

    merci



    avatar
    Tempy
    FémininAge : 18Messages : 76

    le Mar 23 Fév 2016 - 16:34

    Merci beaucoup ! Voilà qui est vraiment très utile !
    avatar
    Elissane
    FémininAge : 16Messages : 31

    le Jeu 25 Fév 2016 - 21:27

    Merci beaucoup ❤ moi qui me cassait les dents dessus...
    avatar
    Fiery Aura
    FémininAge : 18Messages : 54

    le Ven 26 Fév 2016 - 21:08

    Merci bien !
    avatar
    Tinkky
    FémininAge : 26Messages : 85

    le Sam 27 Fév 2016 - 4:41

    Merci du partage ^_^
    avatar
    Shi
    MasculinAge : 25Messages : 57

    le Sam 27 Fév 2016 - 10:55

    Merci beaucoup =D
    avatar
    FanDeFofo
    MasculinAge : 40Messages : 16

    le Mer 2 Mar 2016 - 16:51

    fg
    avatar
    Antithée
    FémininAge : 20Messages : 69

    le Sam 12 Mar 2016 - 16:33

    Ça m'intéresse beaucoup, merci pour le partage !
    avatar
    Edward Speleers
    FémininAge : 28Messages : 332

    le Ven 1 Avr 2016 - 15:11

    Merci



    avatar
    Unleash
    MasculinAge : 17Messages : 79

    le Sam 9 Avr 2016 - 18:56

    merci
    avatar
    SillyDoo
    FémininAge : 24Messages : 13

    le Jeu 21 Avr 2016 - 17:53

    Merci !
    avatar
    Evalla
    FémininAge : 24Messages : 43

    le Jeu 12 Mai 2016 - 19:28

    merci
    avatar
    Pokebip
    MasculinAge : 19Messages : 69

    le Dim 15 Mai 2016 - 20:55

    merci
    avatar
    Ahina
    FémininAge : 35Messages : 44

    le Mer 18 Mai 2016 - 15:57

    roh alors ça c'est cool ! merci beaucoup :)
    avatar
    Kyandi
    FémininAge : 18Messages : 157

    le Dim 22 Mai 2016 - 20:16

    Merci je cherchais ça depuis longtemps !






    avatar
    Saik
    MasculinAge : 21Messages : 45

    le Dim 22 Mai 2016 - 23:29

    Merci !
    avatar
    Discorde
    FémininAge : 19Messages : 50

    le Dim 5 Juin 2016 - 15:45

    Merci !
    avatar
    Liia
    FémininAge : 21Messages : 91

    le Lun 6 Juin 2016 - 19:35

    Merci ♥
    avatar
    Calkrys
    FémininAge : 19Messages : 49

    le Lun 15 Aoû 2016 - 16:42

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Mer 29 Mar 2017 - 11:18