[Résolu] Police qui ne s’applique pas…. (Créer un compte)

  • WordPress :5.7
  • Statut : résolu
15 sujets de 1 à 15 (sur un total de 35)
  • Auteur
    Messages
  • #2381687
    Kimakito
    Participant
    Padawan WordPress
    93 contributions

    Bonjour,

    Ma configuration WP actuelle

    Problème(s) rencontré(s) : Bonjour, je viens vers vous parce que j’ai un gros souci.

    Je n’arrive pas à imposer une police sur mon thème. Sur le serveur j’ai bien téléchargé les fichiers de la police : noto sans jp en ttf
    Dans style.css :

    @font-face {
        font-family: Noto-sans-JP-thin;
        src: url('/fonts/NotoSansJP-Thin.ttf');
        font-weight: 100;
    }
    
    @font-face {
        font-family: Noto-sans-JP;
        src: url('/fonts/NotoSansJP-Regular.ttf');
        font-weight: 400;
    }

    Dans personnalisation du thème > CSS j’ai mis :

    body {
    font-family: Noto-sans-JP !important;
    }
    p, a {
     font-family: Noto-sans-JP-thin !important;
    	font-weight: 100;
     }
    h1, h2, h3, h4, h5, h6, article {
     font-family: Noto-sans-JP !important;
    	font-weight: 400;
     }

    Sauf qu’au niveau du rendu du site ça fait Times new roman… alors que dans l’inspecteur il montre bien du noto.
    Je ne comprends pas je suis désespérée et j’ai vraiment besoin de vous.

    Merci pour toute aide ou réponse.

    • Ce sujet a été modifié le il y a 2 mois par Kimakito.
    #2381692
    mathieu42
    Participant
    Maître WordPress
    850 contributions

    vous avez marqué “dans style.css”, quel est le chemin complet de ce fichier ?

    #2381718
    Kimakito
    Participant
    Padawan WordPress
    93 contributions

    Merci pour votre aide.

    L’arborescence est la suivante : /www/staging/wp-content/themes/OceanWp_LeJustePlan/style.css
    Dans ce même répertoire, il y a le dossier fonts.

    #2381722
    mathieu42
    Participant
    Maître WordPress
    850 contributions

    ce fichier n’est pas chargé dans votre page. j’ai l’impression que vous avez activé le thème oceanwp au lieu du thème enfant.

    #2381723
    Kimakito
    Participant
    Padawan WordPress
    93 contributions

    Merci de votre réponse

    Pourtant dans apparence > Thème je l’ai bien activé:  Capture d’écran

    Et le functions.php fonctionne, j’ai créé des CPT et les appels fonctionnent correctement du coup il les récupère bien dans le dossier (le functions.php est dans le même dossier que style.css)

    je suis dépitée je ne vois pas du tout le problème

    Edit :
    Est-ce que le problème peut venir de là ? Au début de mon functions.php, le code hérite du style du thème parent, est-ce à cause de ça qu’il ne prend pas en compte mon fichier style.css ?

    <?php
    
      /* Ajoute la feuille de style du thème parent */
      add_action( 'wp_enqueue_scripts', 'wpchild_enqueue_styles' );
      function wpchild_enqueue_styles(){
        wp_enqueue_style( 'ns-theme-style', get_template_directory_uri() . '/style.css' );
      }

     

    Pourtant c’est généré automatiquement, il ne me semble pas que ce soit un problème…

     

    • Cette réponse a été modifiée le il y a 2 mois par Kimakito.
    #2381725
    mathieu42
    Participant
    Maître WordPress
    850 contributions

    ce code charge le fichier du thème parent, vous pouvez le voir dans le code source en cherchant “ns-theme-style”.

    pour le fichier du thème enfant vous pouvez utiliser

    wp_enqueue_style(
    	  "ns-theme-style"
    	, get_stylesheet_directory_uri() . "/style.css"
    );

    ou le code suivant :

    wp_enqueue_style(
    	  "ns-theme-style"
    	, get_stylesheet_uri()
    );

    à voir dans la documentation :

    https://developer.wordpress.org/reference/functions/get_stylesheet_uri/

    #2381729
    Kimakito
    Participant
    Padawan WordPress
    93 contributions

    Donc, juste pour être sûre et pas casser tout mon code … Désolée du dérangement mais je préfère juste avoir une validation

    Je remplace :

    <?php
    
      /* Ajoute la feuille de style du thème parent */
      add_action( 'wp_enqueue_scripts', 'wpchild_enqueue_styles' );
      function wpchild_enqueue_styles(){
        wp_enqueue_style( 'ns-theme-style', get_template_directory_uri() . '/style.css' );
      }

     

    par

    <?php
    
    add_action( 'wp_enqueue_scripts', 'wpchild_enqueue_styles' );
    function wpchild_enqueue_styles(){
    wp_enqueue_style( "ns-theme-style" , get_stylesheet_directory_uri() . "/style.css" );
    }

     

    #2381732
    Kimakito
    Participant
    Padawan WordPress
    93 contributions

    J’ai testé mais ça ne fonctionne pas.

    J’ai modifié le chemin des polices.

    @font-face {
    font-family: Noto-sans-JP-thin;
    src: url('/staging/wp-content/themes/OceanWp_LeJustePlan/fonts/NotoSansJP-Thin.ttf');
    font-weight: 100;
    }
    
    
    @font-face {
    font-family: Noto-sans-JP;
    src: url('/staging/wp-content/themes/OceanWp_LeJustePlan/fonts/NotoSansJP-Regular.ttf');
    font-weight: 400;
    }

    Je n’ai pas d’erreur dans la console. par contre la police ne s’applique pas. Dans l’inspecteur j’ai bien noto sans jp mais c’est du times new roman ou similaire à l’affichage.
    Je ne sais vraiment pas où est le problème

    #2381753
    mathieu42
    Participant
    Maître WordPress
    850 contributions

    il y a un changement, on voit maintenant dans l’onglet “réseau” que les fichiers ttf sont téléchargés.

    est ce que la police choisie doit afficher un menu comme cela ?

    #2381761
    Kimakito
    Participant
    Padawan WordPress
    93 contributions

    Oui tout à fait. La police noto-sans-JP thin doit s’appliquer sur tous les textes. Titres / contenus / menus, vraiment tous.
    Normalement je souhaitais Noto-sans-JP sur les titres et Noto-sans-JP-thin sur les contenus.

    Dans mon CSS j’ai essayé de forcer comme ceci :

    body {
    font-family: Noto-sans-JP-thin !important;
    }
    p, a {
     font-family: Noto-sans-JP-thin !important;
    	font-weight: 100;
     }
    h1, h2, h3, h4, h5, h6, article {
     font-family: Noto-sans-JP !important;
    	font-weight: 400;
     }

    A la base je voulais une graisse différente sur les titres etc. mais déjà si j’arrive à appliquer la police sur tout le site, ce serait une victoire, je ne sais plus quoi faire et ce qui cloche actuellement.

    • Cette réponse a été modifiée le il y a 1 mois et 4 semaines par Kimakito.
    #2381780
    pw-alter
    Participant
    Initié WordPress
    25 contributions

    bonjour,

    il faut également ajouter au fichier functions.php le code suivant:

    function ocean_add_custom_fonts() {
    return array( ‘NomDeVotrePolice’ );
    }

    • Cette réponse a été modifiée le il y a 1 mois et 4 semaines par pw-alter.
    #2381787
    Kimakito
    Participant
    Padawan WordPress
    93 contributions

    Merci, je viens de faire ce que vous suggérez, mon début de code de functions.php :

      add_action( 'wp_enqueue_scripts', 'wpchild_enqueue_styles' );
       function wpchild_enqueue_styles(){
       wp_enqueue_style( 'ns-theme-style' , get_stylesheet_directory_uri() . '/style.css' );  
      }
      function ocean_add_custom_fonts() {
       return array('Noto-sans-JP-thin', 'Noto-sans-JP');
       }

    Toujours ceci dans mon style.css :

    @font-face {
        font-family: Noto-sans-JP-thin;
        src: url('/staging/wp-content/themes/OceanWp_LeJustePlan/fonts/NotoSansJP-Thin.ttf');
        font-weight: 100;
    }
    
    @font-face {
        font-family: Noto-sans-JP;
        src: url('/staging/wp-content/themes/OceanWp_LeJustePlan/fonts/NotoSansJP-Regular.ttf');
        font-weight: 400;
    }

    et dans personnalisation CSS du thème

    body {
    font-family: Noto-sans-JP-thin !important;
    }
    p, a {
     font-family: Noto-sans-JP-thin !important;
    	font-weight: 100;
     }
    h1, h2, h3, h4, h5, h6, article {
     font-family: Noto-sans-JP !important;
    	font-weight: 400;
     }

    Mais ça ne s’applique toujours pas.  J’ai bien accès à ces 2 polices dans la typographie du thème (capture d’écran), mais les modifications ne s’ajoutent pas.

    J’avais converti le fichier de .otf en .ttf parce qu’il me semblait que c’était la bonne démarche mais maintenant je ne sais plus… est-ce un problème ?

    —————————- EDIT ——————————
    La police s’applique mais pas de partout… sur certains éléments comme les menus, ça ne marche pas… Je ne comprends pas le comportement !

    ça marche pour mes images avec leurs légendes (CPT)
    ça ne fonctionne pas pour les menus…

    #2381791
    Kimakito
    Participant
    Padawan WordPress
    93 contributions

    Non, en fait, erreur de ma part, ça ne fonctionne pas du tout. je ne comprends pas j’ai l’impression d’avoir balayé toutes les pistes. J’avais trouvé ceci et suivi comme vous me l’avez indiqué.

    J’ai enlevé le CSS puis remis pour voir mais … rien…

    J’ai converti en woff pour voir, ça n’est pas reconnu …

    @font-face {
        font-family: Noto-sans-JP-thin;
        src: url('/staging/wp-content/themes/OceanWp_LeJustePlan/fonts/NotoSansJP-Thin.woff') format('woff');
        font-weight: 100;
    }
    
    @font-face {
        font-family: Noto-sans-JP;
        src: url('/staging/wp-content/themes/OceanWp_LeJustePlan/fonts/NotoSansJP-Regular.woff') format('woff');
        font-weight: 400;
    }

    Quand, dans personnalisation > typographie, je change pour l’une de mes deux polices ça se remet en times new roman automatiquement… ça ne reconnait pas la police chargée…

     

    • Cette réponse a été modifiée le il y a 1 mois et 4 semaines par Kimakito.
    #2381793
    pw-alter
    Participant
    Initié WordPress
    25 contributions

    une question : OceanWp_LeJustePlan  = c’est bien le nom de votre thème enfant?

    il manque les signes ‘ dans votre font-face :

    font-family: 'Noto-sans-JP-thin';

     

     

    #2381807
    pw-alter
    Participant
    Initié WordPress
    25 contributions

    Vous pouvez essayer ceci:

    • dans les réglages d’Elementor : cocher la case pour désactiver les polices google pour que les polices du thèmes soient utilisées.
    • dans les réglages du thème : typographie : cocher “désactiver les polices google”.

    je vous propose donc d’essayer ceci :

    @font-face {
        font-family: 'Noto-sans-JP-thin';
        font-style: normal;
        font-weight: 100;
        src: url('NotoSansJP-Thin.woff') format('woff');
    }
    
    @font-face {
        font-family: 'Noto-sans-JP';
        font-style: normal;
        font-weight: 400;
        src: url('NotoSansJP-Regular.woff') format('woff');
    }

     

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