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

Marie...

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

Lamecarlate

30 novembre 2021 à 9:30:15

Bonjour,

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

Pas d'aide concernant le code par MP, le forum est là pour ça :)

msarraute

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 !

Marie...

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

Lamecarlate

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 ?

Pas d'aide concernant le code par MP, le forum est là pour ça :)

msarraute

30 novembre 2021 à 10:18:19

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

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

Marie...

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

Lamecarlate

30 novembre 2021 à 10:32:02

Pardon, c'est moi qui suis trop rapide par moments 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à ), 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';
}

Pas d'aide concernant le code par MP, le forum est là pour ça :)

CSS3 : font-face

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

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

CSS3 : font-face

Impossible d'intégrer une police

CSS3 : font-face

Supprimer

Modérer

Signaler le message aux modérateurs