[Résolu] Problème de fontes (Créer un compte)

  • WordPress :5.4
  • Statut : résolu
15 sujets de 1 à 15 (sur un total de 15)
  • Auteur
    Messages
  • #2346784
    halloy
    Participant
    Padawan WordPress
    53 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version de PHP/MySQL : 7.0
    • Thème utilisé : Beaver
    • Extensions en place :
    • Nom de l’hébergeur : O2Switch
    • Adresse du site :

    Problème(s) rencontré(s) :

     

    Bonjour,

    J’ai lu plusieurs posts à ce sujet et fait des recherches sur le Net, il me semble avoir correctement pratiqué mais ma fonte perso n’est pas prise en compte quand je teste avec l’inspecteur !

    Alors, de guerre lasse et avant d’envoyer le pc par la fenêtre, je viens voir si une âme charitable pourrait m’éclairer !

    Je souhaite installer la police Moon sur le site.
    On m’a fourni des fichiers otf.

    1. génération des autres formats avec Font Squirrel
    2. création d’un dossier fonts dans le dossier du thème (beaver)
    3. upload des fontes dans le dossier
    4. ajout du code fourni par Font Squirrel, adapté pour mon chemin de dossier :

    @font-face {
    font-family: ‘moonbold’;
    src: url(‘fonts/moon_bold-webfont.eot’);
    src: url(‘fonts/moon_bold-webfont.eot?#iefix’) format(’embedded-opentype’),
    url(fonts/’moon_bold-webfont.woff2′) format(‘woff2′),
    url(fonts/’moon_bold-webfont.woff’) format(‘woff’),
    url(‘fonts/moon_bold-webfont.ttf’) format(‘truetype’),
    url(‘fonts/moon_bold-webfont.svg#moonbold’) format(‘svg’);
    src: url(‘fonts/Moon Bold.otf’) format(‘otf’);
    font-weight: bold;
    font-style: normal;

    }

    Le fichier otf est le fichier original que j’ai ajouté.

    Si vous voulez tester voyez cette page 

    J’en ai marre, j’y ai passé la matinée !

    Il n’y a pas de module de cache, pas de CDN.

     

    Un tout grand merci d’avance !!!

     

    #2346788
    PhiLyon
    Modérateur
    Maître WordPress
    25887 contributions

    Bonjour.

    En testant avec l’inspecteur de Firefox, ce code fonctionne

    body {
        color: #808080;
        font-family: "Moonbold",Verdana,Arial,sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.45;
        word-wrap: break-word;
    }

    🙂

    #2346796
    halloy
    Participant
    Padawan WordPress
    53 contributions

    Bonjour PhiLyon

    Merci de t’être penché sur mon problème.

    Le code fonctionne mais c’est Verdana qui est affiché (enfin, chez moi). Si je retire Verdana, Arial et sans-serif, Moonbold ne fonctionne pas . J’ai changé de navigateur au cas où ce serait un souci de cache. Mais rien n’y fait !

    Le code css a l’air correct, non ? J’ai même dupliqué le dossier fonts dans le dossier du thème enfant au cas où (même s’il n’est pas utilisé à première vue. Ce n’est pas moi qui ai installé le site), ajouté le code css à la feuille de style du thème enfant, dans le module de css custom. Rien !!!

    Merci pour ton aide !

    #2346804
    Li-An
    Modérateur
    Maître WordPress
    23926 contributions

    Bonjour, si j’en crois cette page https://www.wpbeginner.com/wp-themes/how-to-add-custom-fonts-in-wordpress/ il faut mettre l’url en entier pour appeler la fonte.

    #2346842
    halloy
    Participant
    Padawan WordPress
    53 contributions

    Bonjour Li-An et merci pour ta réponse.
    J’avais déjà essayé avec l’url en entier, je viens de la remettre mais cela ne marche toujours pas ! C’est la première fois que ça m’arrive et je ne comprends absolument pas ce qui bloque !

    #2346895
    Li-An
    Modérateur
    Maître WordPress
    23926 contributions

    C’est normale qu’il y ait des guillemets pour font-family: ‘moonbold’; ?

    #2346897
    halloy
    Participant
    Padawan WordPress
    53 contributions

    sais pas, j’ai recopié le code fourni par FontSquirrel. Mais même en les supprimant, cela ne marche toujours pas quand je teste avec l’inspecteur 🙁

    #2346902
    Li-An
    Modérateur
    Maître WordPress
    23926 contributions

    Je n’ai pas pas d’autre piste. Désolé.

    #2346905
    PhiLyon
    Modérateur
    Maître WordPress
    25887 contributions

    Bonjour.

    Où as-tu eu ta font, je vais faire un essai, je n’ai pas ton thème mais je vais tester dans un thème de base.

    🙂

    #2346910
    halloy
    Participant
    Padawan WordPress
    53 contributions

    Bonjour PhiLyon

     

    Si tu veux je t’envoie la fonte à partir de laquelle j’ai créé les autres via FontSquirrel. Je dois faire une erreur quelque part mais où ??? Font Squirrel dit que cela peut provenir du htaccess du coup j’ai mis le htaccess de base de WP, sans changement.

    Sur le forum de Beaver, ils parlent même d’ajouter une fonctionnalité !! Mais comme d’autres disent avoir réussi avec la méthode classique je n’ai pas été plus loin (https://community.wpbeaverbuilder.com/t/adding-a-custom-font-to-bb-theme/2399/24)

     

    Alors en désespoir de cause, j’ai installé le plugin Use Any Font et là ça marche. Mais ça m’énerve et j’aimerais comprendre !

    A première vue, le site n’utilise pas le thème enfant (ce n’est pas moi qui l’ai créé).

     

    J’ai regardé comment le plugin ajoutait son font-face :

    @font-face {
    font-family: ‘moon-bold’;
    src: url(‘/wp-content/uploads/useanyfont/4244Moon-Bold.woff2’) format(‘woff2’),
    url(‘/wp-content/uploads/useanyfont/4244Moon-Bold.woff’) format(‘woff’);
    font-display: auto;
    }

    Donc même pas d’url complète. Par contre un font-display:auto. Serait-ce cela ???

    Ou alors la police s’appelant à la base Moon Bold, le fait d’avoir mis moonbold comme font-family l’aurait perturbé ?

     

    En tout cas, grâce au plugin ça marche. Mais je suis limitée à une seule fonte et je dois charger aussi la Regular. Donc faut que je trouve … ou que je paie 🙂

    Merci pour ton aide !

    #2346911
    Li-An
    Modérateur
    Maître WordPress
    23926 contributions

    Et vous avez essayé avec le code donné par le plugin ?

    #2346912
    PhiLyon
    Modérateur
    Maître WordPress
    25887 contributions

    Envoie le/les fichiers dans un dossier zippé.

    🙂

    #2346926
    halloy
    Participant
    Padawan WordPress
    53 contributions

    A LiAn : oui, j’ai copié le code créé par le plugin et l’ai mis dans style.css après avoir copié les fontes qu’il a créées dans le dossier fonts (et en faisant les modifs pour pointer sur le bon dossier) et cela ne fonctionne pas.

    Voilà son code avec le nom des polices qu’il a généré

    @font-face {
    font-family: ‘moon-bold’;
    src: url(‘fonts/4244Moon-Bold.woff2’) format(‘woff’),
    url(‘fonts/4244Moon-Bold.woff’) format(‘woff2’);
    font-display: auto;
    }

    J’ai essayé avec un / avant fonts, avec l’url complète, rien ne fonctionne.

    Le plugin, lui, met les fontes dans un dossier dans upload.

    A PhiLyon : je joins le zip tel qu’il a été créé par FontSquirrel

     

    Merci à tous les 2 !

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2346929
    halloy
    Participant
    Padawan WordPress
    53 contributions

    Bon, finalement je crois comprendre : le fichier style.css n’est pas pris en compte. Ni le custom css dans la personnalisation du thème. Car en mettant le code avec le module custom css, ça marche. Ca doit être un bazar de Beaver, c’est la première fois que je l’utilise.
    Merci à tous les 2 de vous être penchés sur mon souci, je peux le mettre en résolu.

    #2346935
    Li-An
    Modérateur
    Maître WordPress
    23926 contributions

    Ahhh, un mystère résolu.

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