Partage
  • Partager sur Facebook
  • Partager sur Twitter

CSS3 : font-face

Impossible d'intégrer une police

Sujet résolu
    30 novembre 2021 à 9:28:21

    Bonjour,

    Je suis depuis deux jours sur l'exercice qui consiste à modifier la police de mon CV en l'intégrant à partir de fontsquirrel.

    Voici mon arborescence :

    Mon fichier HTML ne comprend aucune ligne concernant les polices, mais fait bien le lien avec mon CSS :

    		<link rel="stylesheet" href="04_styleCSS.css" />

    Dans mon CSS, à l'exception de toutes autres mises en forme que j'ai commenté, voici le code :

    @font-face {
        font-family: 'blokletters_balpenbalpen';
        src: url('04_fonts/Blokletters-Balpen-webfont.eot');
        src: url('04_fonts/Blokletters-Balpen-webfont.eot?#iefix') format('embedded-opentype'),
             /*url('04_fonts/Blokletters-Balpen-webfont.woff2') format('woff2'),*/
             url('04_fonts/Blokletters-Balpen-webfont.woff') format('woff'),
             url('04_fonts/Blokletters-Balpen-webfont.ttf') format('truetype'),
             url('04_fonts/Blokletters-Balpen-webfont.svg#blokletters_balpenbalpen') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    
    font-family {
        font-family: 'blokletters_balpenbalpen';
    }

    J'ai vérifié mille et une fois la syntaxe, je ne vois pas mon erreur, j'ai lu bon nombre de sujets traitant cette question
    sur le forum, j'ai suivi des liens et lu tout ce qui aurait pu me donner une idée du problème rencontré, mais rien... rien de rien,
    je ne m'en sors pas :'(

    Alors merci à vous de me permettre de dépasser ce problème en me donnant un petit coup de main 


    • Partager sur Facebook
    • Partager sur Twitter

    Marie...

    You know what ? ... I'm happy !

      30 novembre 2021 à 9:30:15

      Bonjour,

      relis ta ligne 13 ;) tu vas trouver ton erreur d'inattention.

      • Partager sur Facebook
      • Partager sur Twitter

      Pas d'aide concernant le code par MP, le forum est là pour ça :) (en plus je n'y connais rien en C)

        30 novembre 2021 à 9:41:41

        Oups ! décidément !

        Il semble que cette directive s'écrive comme ça, tu as l'oeil :

        @font-face {
            font-family: 'blokletters_balpenbalpen';
            src: url('04_fonts/Blokletters-Balpen-webfont.eot');
            src: url('04_fonts/Blokletters-Balpen-webfont.eot?#iefix') format('embedded-opentype'),
                 /*url('04_fonts/Blokletters-Balpen-webfont.woff2') format('woff2'),*/
                 url('04_fonts/Blokletters-Balpen-webfont.woff') format('woff'),
                 url('04_fonts/Blokletters-Balpen-webfont.ttf') format('truetype'),
                 url('04_fonts/Blokletters-Balpen-webfont.svg#blokletters_balpenbalpen') format('svg');
            font-weight: normal;
            font-style: normal;
        }
        
        {
            font-family: 'blokletters_balpenbalpen';
        }

        Pourtant, cela ne change rien à mon problème : 

        Merci !

        • Partager sur Facebook
        • Partager sur Twitter

        Marie...

        You know what ? ... I'm happy !

          30 novembre 2021 à 10:06:06

          Non plus :) il faut un sélecteur quand même. Sur quoi veux-tu que ta police s'applique ?
          • Partager sur Facebook
          • Partager sur Twitter

          Pas d'aide concernant le code par MP, le forum est là pour ça :) (en plus je n'y connais rien en C)

            30 novembre 2021 à 10:18:19

            Bon, je t'avais prévenue que j'étais lente... :o

            Alors à priori (et surtout pour faire simple), sur tout le 'site'.
            Est-ce que cela veut dire que je dois la mettre sous une balise <body> ?

            Magnifique !!!!

            Mais pourquoi des choses aussi basiques nous échappent-elles lorsqu'on est débutant alors qu'on passe des heures à rechercher nos erreurs ???

            Un grand merci, Lamecarlate (:magicien:), pour ta patience et la façon dont tu m'amènes à la résolution de mon problème !!!

            -
            Edité par msarraute 30 novembre 2021 à 10:31:48

            • Partager sur Facebook
            • Partager sur Twitter

            Marie...

            You know what ? ... I'm happy !

              30 novembre 2021 à 10:32:02

              Pardon, c'est moi qui suis trop rapide par moments :D j'ai l'œil, c'est une question d'expérience.

              Je te fais un mini-cours résumé, pour remettre les pendules à l'heure :) (en espérant ne pas t'embrouiller)

              En CSS, on parle de sélecteur, pas de balise. Une balise, c'est en HTML, et c'est un exemplaire d'un élément (un <p>, un <body>, etc). Quand on veut cibler un ou plusieurs éléments, en CSS, on utilise le nom des éléments (p, body) et/ou une classe qui est sur une balise (.class) et/ou un id qui est sur une balise (#id). Et on peut les combiner dans le CSS.

              Prenons une analogie.

              Tu as un <tiroir> rempli de <cuillère>s. Si tu veux cibler en CSS le tiroir, tu vas écrire tiroir { }. Si tu veux cibler toutes les <cuillère>s, tu vas écrire cuillère { }.

              Ici, si tu veux appliquer ta police, le plus simple est en effet de l'appliquer sur body (mon analogie s'arrête là :D ), car font-family est héritable : ça veut dire qu'un descendant de body (c'est-à-dire toute balise se trouvant à l'intérieur de <body>) va profiter de la police choisie.

              Donc oui, tu dois mettre ta font-family sur body, comme ça :

              body {
                 font-family: 'blokletters_balpenbalpen';
              }



              • Partager sur Facebook
              • Partager sur Twitter

              Pas d'aide concernant le code par MP, le forum est là pour ça :) (en plus je n'y connais rien en C)

              CSS3 : font-face

              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
              • Editeur
              • Markdown