Mauvais rendu de ma police d’écriture Helvetica Neue light (Créer un compte)

  • Statut : non résolu
15 sujets de 16 à 30 (sur un total de 32)
  • Auteur
    Messages
  • #994241
    lefevre
    Membre
    Chevalier WordPress
    255 contributions

    Oui mais ma page change tout le temps, c’est un site test. Il n’existe même plus maintenant. J’en ai quand même refait un pour l’exemple : lien
    Idéalement, ce serait vraiment super que la police rende pareil que sur les descriptions de vidéo Vimeo : https://vimeo.com/63577712

    Rien de bien méchant pourtant puisque Vimeo utilise aussi du Helvetica. J’ai testé aussi les typos Google font via un plugin et manuellement, mais c’est vraiment pareil, ça ne va pas. C’est vraiment gênant… Donc…

    #994242
    lefevre
    Membre
    Chevalier WordPress
    255 contributions

    Ah, je n’avais pas vu le dernier commentaire. Oui, helvetica serait banal pour un logo, il vaut mieux éviter, mais quand c’est joli comme sur Vimeo, pour le contenu, ça rend vraiment hyper bien… Je reste sur Helvetica et je vais essayer de custom tout ça pour que ça rende bien, même si de toute évidence ça ne va pas être facile. De toute façon, comme je l’ai dit, google font ne me satisfait pas non plus, mais là, ce n’est pas que ça rend pas bien (un peu quand même), c’est surtout que je n’apprécie pas trop les polices (oui je chipotte un peu). HEEELVEETICA mon idole : je mange helvetica, je bois helvetica, j’ai des posters helvetica !

    #994243
    ouistiti.net
    Participant
    Maître WordPress
    1879 contributions

    Bon, on reprends depuis le début, sur le site mentionné ci-dessus dans la feuille de style

    On y trouve le code:

    Body {
        font-family: Helvetica,Arial,sans-serif;
        font-size: 14px;
        line-height: 20px;
        min-width: 960px;
    }

    1. Ce n’est pas l’Helvetica Neue, mais bel et bien la font Helvetica
    2. Ils l’ont codé comme une police système, donc si l’utilisateur n’a pas cette police installée sur son propre ordinateur, c’est l’Arial qui fait foi, si l’Helvetica et Arial ne sont présentes, alors la Sans-Serif s’affichera à l’écran … (C’est le ba-ba du Web…).

    Voilà pourquoi on utilise Google Fonts ou/et dans le CSS3 -> @font-face, afin d’avoir toujours la même typo, sans se soucier, de savoir si celles-ci sont installées où pas sur l’ordinateur. C’est un choix ….

    Voici la liste des polices système pour Mac et PC
    http://www.jollystone.be/typo_web_police.php

    Dans le haeder de votre site on y trouve:

    @font-face {
    	  font-family: « header-font »;
    	  src: url(« http://recherche.thewip.fr/wp-content/uploads/fonts/HelveticaBQ-Light.otf »);
    	}
    	@font-face {
    	  font-family: « body-font »;
    	  src: url(« http://recherche.thewip.fr/wp-content/uploads/fonts/Helvetica.otf »);
    	}
    	@font-face {
    	  font-family: « lists-font »;
    	  src: url(« http://recherche.thewip.fr/wp-content/uploads/fonts/HelveticaBQ-Light.otf »);
    	}h1, h2, h3, h4, h5, h6, h7	{
    	font-family: « header-font »!important;
    	}p, em, div	{
    		font-family: « body-font »!important;
    	}
    	li	{
    		font-family: « lists-font »!important;

    Je suppose que c’est le plugin qui ajoute ce bout de code et je doute sincèrement que ce soit une « vraie » Helvetica. Mais je peux me tromper …

    Si vous prenez la licence pour cette police, assurez-vous que tous les formats (cités dans le lien: http://css.mammouthland.net/css3/font-face.php) font partie du package.

    Ben… c’est bien plus simple avec un lien, hein! ^^

    PS: Les tests dont je vous ai parlés concerne la Helvetica Neue qui a un corps beaucoup plus fin que la Helvetica, le rendu était bof, bof …

    #994244
    ouistiti.net
    Participant
    Maître WordPress
    1879 contributions

    Je viens de me relire, et je suis navrée pour les fautes qui se trouvent dans le texte … 😉

    #994245
    ouistiti.net
    Participant
    Maître WordPress
    1879 contributions

    Vu que je suis un crevée et j’ai de la peine à me concentrer, je me permets de vous mettre ce lien qui explique un peu mieux les choses que mon texte ci-dessus.

    http://www.commentcamarche.net/faq/3951-webmaster-les-polices-dans-les-pages-web

    #994246
    lefevre
    Membre
    Chevalier WordPress
    255 contributions

    Un homme doit avoir son heure de repos ! En tout cas, merci pour tous les petits liens. Je peine à me concentrer aussi donc j’analyserai ça demain et reviendrai alors sur ce forum. En tout cas, bizarre cette affaire d’Helvetica… Comment se fait-il que je puisse en avoir une fausse…

    #994247
    lefevre
    Membre
    Chevalier WordPress
    255 contributions

    Comme exemple de site qui a une belle typo, y’a aussi celui-ci mac génération
    Apparemment, c’est de l’arial, mais ça m’irait aussi. J’avais pourtant testé aussi de l’arial sur mon site et le rendu était toujours aussi moche. Je suis maudit…

    #994248
    ouistiti.net
    Participant
    Maître WordPress
    1879 contributions
    lefevre wrote:
    Un homme doit avoir son heure de repos !

    Oui, je ne savais plus comment on écrivait: fonte ou font (en français, en anglais), ba-ba = b.à ba :D, j’en passe et des meilleurs.

    1- Pour commencer, désactivez le plugin, car vos modifications ne seront pas prises en compte tant que celui-ci sera actif dans votre thème.

    2- Ensuite, il est conseillé de faire un thème enfant, afin de ne pas perdre vos modifications CSS lors de la prochaine mise à jour de votre thème.

    http://wpchannel.com/creer-themes-enfants-child-themes-wordpress/

    3- Enfin, il sera possible de peaufiner, le résultat de la fonte (en français) sur votre site.

    #994249
    lefevre
    Membre
    Chevalier WordPress
    255 contributions

    C’est avec beaucoup de retard que je réponds ici. Pendant ce temps, je suis allé sur pas mal de sites du genre myfont pour voir comment rendait la police Helvetica, Open Sans, Myriad Pro etc etc. En 18, le rendu est comme sur mon blog : moche, donc ce n’est pas ma police qui déconne. Je pense donc que pour que ça rende bien en 18, il faudrait (hypothétiquement) appliquer un style (en CSS ?) à ma police. Mais jusqu’ici, moi j’ai juste réussi à modifier la taille, à la rendre plus grasse, à changer la couleur bien sûr, mais ça ne va pas plus loin. Si tu as des idées là-dessus, je suis preneur.
    Parce qu’il n’y a pas de raison que certains aient une superbe police Helvetica sur leur blog ! grrr tant que je n’aurais pas réglé cette histoire, ça va rester dans ma tête !!

    #994250
    ouistiti.net
    Participant
    Maître WordPress
    1879 contributions

    Avez-vous lu mes deux dernières réponses, et les lien qui si trouvent??
    http://www.commentcamarche.net/faq/3951-webmaster-les-polices-dans-les-pages-web
    http://wpchannel.com/creer-themes-enfants-child-themes-wordpress/

    Avez-vous créé un thème enfant??

    #994251
    lefevre
    Membre
    Chevalier WordPress
    255 contributions

    Oui, j’avais bien lu ces liens, mais pas la peine de créer un thème enfant, j’utilise un site de test que je ne mettrai pas à jour. Et les autres liens ne m’aident pas, puisque de toute façon, je suis toujours sur la même machine : un mac avec Chrome et il n’y a pas de raison qu’une police s’affiche bien sur beaucoup de sites, et pas sur le mien.
    Et j’ai trouvé le rendu parfait pour la police d’écriture :

    https://github.com/pengwynn/flint

    Il faut noter que lorsqu’on inspecte l’élément, il s’agit bien de la police Helvetica qui est utilisée et je ne sais toujours pas comment avoir le même rendu…

    #994252
    lefevre
    Membre
    Chevalier WordPress
    255 contributions

    mince j’ai mis l’url en code… https://github.com/pengwynn/flint

    #994253
    ouistiti.net
    Participant
    Maître WordPress
    1879 contributions

    Désinstallez le plugin ou ces ligne de codes

    @font-face {
          font-family: « header-font »;
          src: url(« http://recherche.thewip.fr/wp-content/uploads/fonts/HelveticaBQ-Light.otf »);
        }
        @font-face {
          font-family: « body-font »;
          src: url(« http://recherche.thewip.fr/wp-content/uploads/fonts/Helvetica.otf »);
        }
        @font-face {
          font-family: « lists-font »;
          src: url(« http://recherche.thewip.fr/wp-content/uploads/fonts/HelveticaBQ-Light.otf »);
        }h1, h2, h3, h4, h5, h6, h7    {
        font-family: « header-font »!important;
        }p, em, div    {
            font-family: « body-font »!important;
        }
        li    {
            font-family: « lists-font »!important;

    supprimez de même dans le head cette ligne

    <link rel='stylesheet' id='sab-author-name-font-css'  href='http://fonts.googleapis.com/css?family=Oswald:400,700,400italic,700italic' type='text/css' media='all'

    C’est un peu le foutoir … 😗

    Insérez helvetica en tant que typo système…

    Je me répète un peu là …. 😕

    En ce qui concerne le thème enfant, il est mieux d’apprendre les bonnes pratiques dès le point de départ. Un jour, vous allez bien le mettre en ligne …

    #994254
    ouistiti.net
    Participant
    Maître WordPress
    1879 contributions

    Insérez helvetica en tant que typo système dans le CSS,

    Body {
        font-family: Helvetica,Arial,sans-serif;
        font-size: 14px;
        line-height: 20px;
        min-width: 960px;
    }

    Si vous le pouvez, demandez à une personne (non virtuelle) que vous connaissez ou pas de vous donner un coup de main et de vous expliquer en même temps. C’est plus facile …

    Pour la suite, je passe mon tour ….

    #994255
    lefevre
    Membre
    Chevalier WordPress
    255 contributions

    Youhou, je pense être sur la bonne voie : http://darklg.me/2012/03/font-face-avec-anti-aliasing-windows/

    ça explique comment « lisser » une police sur le web. C’est exactement mon problème. En inspectant l’élément d’une de mes pages au hasard, j’ai donc désactivé

    webkit-font-smoothing: antialiased;

    et depuis le rendu est identique à ces sites dont j’ai parlé. Maintenant, il faut que j’applique tout ça en CSS pour que ça s’affiche réellement : pas facile (mais j’y arriverai 😉 )

    Surtout que mon site déconne (en jouant avec le plugin font uploader et la feuille de style.css). Je verrai tout ça demain (oups, cette après-midi sans doute du coup).

15 sujets de 16 à 30 (sur un total de 32)
  • Vous devez être connecté pour répondre à ce sujet.