Partage

Gros probleme avec l'utilisation de @font-face

Sujet résolu
10 janvier 2018 à 13:12:43

Bonjour,

Ca fait 2 heures que je me bats pour faire fonctionner le @font-face. J'ai regardé le video, j'ai suivi les instructions du cours  à la lettre , j'ai cherché partout dans le forum,  j'ai regardé dans https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts, mais rien ; je n'arrive pas. Voila pourquoi je vous demande humblement de l'aide.

Je ne suis pas trés doué en informatique, je commence ma reconversetion professionnelle et le chemin est encore long. Je vous demande de la pacience, s'il vous plait.

D'abord , je voudrais vous montrer mon directoire dans mon PC , peut-etre le probleme vient de la:

organisation de mon directoire

Et voici mon code :

@font-face { /* Définition d'une nouvelle police nommée CAC Champagne */
    font-family: 'cac_champagneregular';
    src: url('fonts/cac_champagne-webfont.eot');
    src: url('fonts/cac_champagne-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/cac_champagne-webfont.woff2') format('woff2'),
         url('fonts/cac_champagne-webfont.woff') format('woff'),
         url('fonts/cac_champagne-webfont.ttf') format('truetype'),
         url('fonts/cac_champagne-webfont.svg#cac_champagneregular') format('svg');
   }

h1 /* Utilisation de la police qu'on vient de définir sur les titres */
{
    font-family: 'cac_champagneregular', Arial, serif;
}
Merci infinement de votre aide precieuse !

-
Edité par @Arobase 10 janvier 2018 à 13:40:03

Merci beaucoup !

Vous êtes demandeur d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur web junior

Je postule
Formation
en ligne
Financée
à 100%
10 janvier 2018 à 13:59:52

Bonjour,

D'après ta structure de fichiers tes chemins d'accès semblent bons.

Le code CSS est bon également.

Les fichiers sont bien présents dans le dossier "fonts" ? Pas d'erreur 404 ?

Ton fichier CSS est bien lié à ton fichier HTML ? 

Le reste de tes styles fonctionne correctement ?

As-tu tenté de vider le cache de ton navigateur ?

Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
10 janvier 2018 à 14:26:11

Bonjour,

Merci d'avoir pris le temps de me répondre.

"Les fichiers sont bien présents dans le dossier "fonts" ? Pas d'erreur 404 ?"

Pas d'erreur 404 à aucun moment.

Oui, j'ai suivi les instructions et le fichier html et .css sont ensemble dans sublime text, chacun dans une fenetre, coté à coté. Dans le dossier fonts j'ai enregistré le telechargement effectué sur le site indiqué sur le cours, si j'ouvre le fichier "fonts", il m'affiche d'abord un sous dossier nommé: (voir en bas) // ( notez svp que j'ai créée un nouveau dossier dans "mes documents" avec le nom : "cours css.html" et j'ai mis dedans tout ce qqu'il fallait , pour voir si ça marche, mais non):

Ton fichier CSS est bien lié à ton fichier HTML ? 

Oui, dans sublime text, ils sont cote a cote, chacun dans sa fenetre, comme indiqué dans le cours. regardez svp:

"Le reste de tes styles fonctionne correctement ?"

r: tout semble funcionner normalement, en dehors du @font-face. Quand j'affiche mon code dans le navigateur, voila ce qu'il me donne:


As-tu tenté de vider le cache de ton navigateur ?"

r: oui, je viens de le faire, mais cela n'a rien donné. Je deviens fou !!

Merci de votre pacience et bonne volontéMewen_bzh;

-
Edité par @Arobase 10 janvier 2018 à 14:28:19

Merci beaucoup !
10 janvier 2018 à 14:30:41

C'est ton chemin qui n'est pas bon. Tu le dis toi même, tu as un sous-dossier dans ton dossier fonts.

Donc on passe de :

    src: url('fonts/cac_champagne-webfont.eot');

à quelque chose comme :

    src: url('fonts/cac_champagne_regular_macroman/cac_champagne-webfont.eot');

A adapter selon tes dossiers bien sûr ;)

*****

Ton fichier CSS est bien lié à ton fichier HTML ? 

Oui, dans sublime text, ils sont cote a cote, chacun dans sa fenetre, comme indiqué dans le cours. regardez svp:

Alors là non. Ce n'est pas parce que deux fichiers sont dans le même dossier qu'ils sont liés. Pour lier un fichier de styles à un fichier HTML, ce dernier doit comporter une ligne du style :

<link rel="stylesheet" type="text/css" href="css/styles.css">



-
Edité par Mewen_bzh 10 janvier 2018 à 14:32:59

Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
10 janvier 2018 à 15:15:27

Rebonjour;

J'ai essayé de changer les chemins d'access, mais ça ne marche pas.

A propos du probleme de liaison entre les fichiers, j'ai suivi les instructions du cours et j'ai vu qu'ils etaient ensemble car j'avait  fait  des essais avant avec font-size, couleur et tout marchait. Vous me montrez des balises que je n'ai jamais vu cher ami : )

Je vais tout recommencer du début du cours CSS. C'est décourageant ! 

merci quand meme! 

Merci beaucoup !
10 janvier 2018 à 15:18:01

Si tu n'as jamais vu de balise link alors il y a un souci, elle est expliquée dès la première page du cours sur le CSS : https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/mettre-en-place-le-css

La création des liens est quant à elle expliquée encore plus tôt dans le cours : https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/creer-des-liens#/id/r-1609674

Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
10 janvier 2018 à 15:48:14

C'est tout à fait vrai cher ami !

Je viens de tout refaire depuis le début, et les balises de liaison sont bien la:

mon fichier HTML :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Premiers tests du CSS</title>
    </head>

    <body>
        <h1>Mon super site</h1>
        
        <p>Bonjour et bienvenue sur mon site !</p>
        <p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu !</p>
    </body>
</html>

             Mon fichier CSS : ( j'ai changé les chemins des dossiers comme tu m'avait dit de le faire, mais ça ne marche toujous pas ! )

@font-face {

    font-family: 'cac_champagneregular';

    src: url(fonts/cacchampagne_regular_macroman/'cac_champagne-webfont.eot');

          url(fonts/cacchampagne_regular_macroman/'cac_champagne-webfont.eot?#iefix') format('embedded-opentype'),

         url(fonts/cacchampagne_regular_macroman/'cac_champagne-webfont.woff2') format('woff2'),

         url(fonts/cacchampagne_regular_macroman/'cac_champagne-webfont.woff') format('woff'),

         url(fonts/cacchampagne_regular_macroman/'cac_champagne-webfont.ttf') format('truetype'),

         url(fonts/cacchampagne_regular_macroman/'cac_champagne-webfont.svg#cac_champagneregular') format('svg');

    font-weight: normal;

    font-style: normal;

}

p

{

    color: blue;

}

Le résulatat dans le navigateur:

HTML et CSS sont ensemble et connectés, comme on peut voir. Par contre, le @font-face ne marche toujours pas !!

Je commence vraiment à me demander si je suis fait pour le codage et le dévelopment web. J'ai pas dejeuné à cause de ce fichu @font. Ce n'est pas possible de rester coincé comme ça !

Help ! 

-
Edité par @Arobase 10 janvier 2018 à 15:52:00

Merci beaucoup !
10 janvier 2018 à 15:50:43

Tu as des guillemets simples en trop dans tes noms de fichiers.

Et bien sûr le lien relatif que j'ai mis était un exemple à adapter à ta structure de fichiers. Si tu as d'autres sous-dossiers avant d’accéder à tes fonts il faut bien sûr les ajouter dans le chemin.

Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
10 janvier 2018 à 16:10:39

Excuse-moi, je ne vois les guillmets de trop dans le nom des fichiers: 

le dossier c'est : fonts

le sous dossier avec le fichier telechargé style.css c'est : ( cacchampagne_regular_macroman )

il n'y a pas de guillemets ni en ( font ) , ni en ( cacchampagne_regular_macroman ), uniquement dans le nom des fonts ( 'cac_champagne-webfont.eot' ) et les autres. Si cela ne te gene pas, peux-tu me les montrer, stp?

d'ailleurs, crois-tu que je puisse continuer le cours malgré le probleme avec le @font-face ?

D'ailleurs , je me permets de montrer en détails le chemin exacte des dossiers en question, dans l'ordre:

 

et finalement le contenu du fichier stylesheet.css qui a été telechargé dans le site https://www.fontsquirrel.com/ :

@font-face {
    font-family: 'cac_champagneregular';
    src: url('cac_champagne-webfont.eot');
    src: url('cac_champagne-webfont.eot?#iefix') format('embedded-opentype'),
         url('cac_champagne-webfont.woff2') format('woff2'),
         url('cac_champagne-webfont.woff') format('woff'),
         url('cac_champagne-webfont.ttf') format('truetype'),
         url('cac_champagne-webfont.svg#cac_champagneregular') format('svg');
    font-weight: normal;
    font-style: normal;

}



-
Edité par @Arobase 10 janvier 2018 à 16:33:33

Merci beaucoup !
Staff 10 janvier 2018 à 16:20:39

Bonjour,

justement, les guillemets doivent englober tout le chemin, pas juste le nom du fichier.

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
10 janvier 2018 à 16:41:39

Bonjour,

j'ai le même problème. Pourtant j'ai déja un peu codé, j'ai vérifié mon css, la cohérence avec le html, j'ai suivi pas à pas, corrigé les chemins...mais ce doit être le grand âge, car je n'y arrive pas...en tout cas il semblerait que nous ayons le même blocage ....je cherche, je cherche; c'est forcément dans les chemins....

10 janvier 2018 à 16:46:09

Bonjour,

J'ai essayé de mettre les guillemets comme ça : (bien sur sur chaqu'un des liens)

src: url('fonts/cacchampagne_regular_macroman'/'cac_champagne-webfont.eot');  (au debut et à la fin de chaque etape du chemin )

ça ne marche pas : (

Et j'ai essayé aussi comme ça:

src: url('fonts/cacchampagne_regular_macroman/cac_champagne-webfont.eot');  (au debut et à la fin du chemin de bout à bout)

ça ne marche pas non plus .... 

tristesse ....

Merci beaucoup !
10 janvier 2018 à 16:52:39

Question sur la place du @font-face dans le css:

Spontanément j'ai commencé mon css en précisant les infos concernant:

body{

taille, marge, text-align, color etc.....

}

Puis je suis habituée à descendre dans la page pour préciser les différents div, blocks etc.....

Le @font-face, où se situe-t'il? Avant tous les autres éléments ( y compris body) ou dans body?

merci

10 janvier 2018 à 16:52:43

Je suppose que tu as pris soin de vider le cache de ton navigateur avant de poser la question ?
Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
10 janvier 2018 à 16:53:13

Joce 4 a écrit:

Bonjour,

j'ai le même problème. Pourtant j'ai déja un peu codé, j'ai vérifié mon css, la cohérence avec le html, j'ai suivi pas à pas, corrigé les chemins...mais ce doit être le grand âge, car je n'y arrive pas...en tout cas il semblerait que nous ayons le même blocage ....je cherche, je cherche; c'est forcément dans les chemins....

Cher ami, moi aussi je suis loin d'etre un jeune garçon ...plus en haut j'ai posté le chemin pas a pas, je ne vois pas  d'erreur ...



Merci beaucoup !
10 janvier 2018 à 17:02:44

Comme je le disais plus haut, penses à vider le cache de ton navigateur.

Si tu ne constates toujours aucun effet, regarde la console pour voir si les fonts sont en erreur 404.

Si tu ne vois aucune erreur 404, montre nous la totalité de ton HTML et de ton CSS.

Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
10 janvier 2018 à 17:04:53

Bonjour,

Je vais essayer de prendre part à la discussion.

Histoire de tout remettre à plat, peux tu s'il te plaît nous donner (@Curieux18) :

  • le contenu de ton fichier HTML page.html complet
  • le contenu de ton fichier CSS style.css complet

Nous connaissons maintenant ton arborescence de fichier, pas besoin d'autre chose pour régler ton problème.

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil
10 janvier 2018 à 17:18:42

Bonjour ;

Voici le code de ma "page.html":

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Premiers tests du CSS</title>
    </head>

    <body>
        <h1>Mon super site</h1>
        
        <p>Bonjour et bienvenue sur mon site !</p>
        <p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu !</p>
    </body>
</html>
Et voici le code de style.css :
@font-face {

    font-family: 'cac_champagneregular';

    src: url('fonts/cacchampagne_regular_macroman/cac_champagne-webfont.eot');

    src: url('fonts/cacchampagne_regular_macroman/cac_champagne-webfont.eot?#iefix') format('embedded-opentype');

         url('fonts/cacchampagne_regular_macroman/cac_champagne-webfont.woff2') format('woff2');

         url('fonts/cacchampagne_regular_macroman/cac_champagne-webfont.woff') format('woff');

         url('fonts/cacchampagne_regular_macroman/cac_champagne-webfont.ttf') format('truetype');

         url('fonts/cacchampagne_regular_macroman/cac_champagne-webfont.svg#cac_champagneregular') format('svg');

    font-weight: normal;

    font-style: normal;



}



h1 /* Utilisation de la police qu'on vient de définir sur les titres */

{

    font-family: 'cac_champagneregular', Arial, serif;

}



p

{

    color: blue;

}

-----------------------------------------------------------------------------------------------------------------------------------------------------------

C'est tout. Merci de votre aide.

-
Edité par @Arobase 10 janvier 2018 à 17:20:37

Merci beaucoup !
10 janvier 2018 à 17:24:24

Ok je crois que j'ai trouvé. Relis bien l'exemple du cours : https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/formatage-du-texte#/id/r-1610265

Et fais attention aux virgules et aux points-virgules... ;)

Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
10 janvier 2018 à 17:28:47

Edit : Bien vu Mewem_bzh ! C'est effectivement le problème !

-
Edité par Lord Morpheus 10 janvier 2018 à 17:30:54

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil
10 janvier 2018 à 17:35:31

Bonjour,

J'avais noté les points-virgules avant , il y a un apres le tag "font-family" et apres, tout à la fin, apres le dernier lien, juste aprés le .format('svg'). J'avais dejà essayé de rectifier cela, mais, malheuresement, le probleme n'est pas la. Regardez( avec la correction des virgules):

@font-face {
    font-family: 'cac_champagneregular';
    src: url('fonts/cacchampagne_regular_macroman/cac_champagne-webfont.eot'),
    src: url('fonts/cacchampagne_regular_macroman/cac_champagne-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/cacchampagne_regular_macroman/cac_champagne-webfont.woff2') format('woff2'),
         url('fonts/cacchampagne_regular_macroman/cac_champagne-webfont.woff') format('woff'),
         url('fonts/cacchampagne_regular_macroman/cac_champagne-webfont.ttf') format('truetype'),
         url('fonts/cacchampagne_regular_macroman/cac_champagne-webfont.svg#cac_champagneregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

      Mais, comme ça, il ne marche toujours pas ....

-
Edité par @Arobase 10 janvier 2018 à 17:39:50

Merci beaucoup !
10 janvier 2018 à 17:37:00

Tu n'as pas bien revu l'exemple dans le lien, tu avais un ";" à ne pas modifier... ;)
Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
10 janvier 2018 à 17:37:23

Parcequ'il y a encore une erreur !

La voici corrigé :

@font-face {
    font-family: 'cac_champagneregular';
    src: url('fonts/cacchampagne_regular_macroman/cac_champagne-webfont.eot');
    src: url('fonts/cacchampagne_regular_macroman/cac_champagne-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/cacchampagne_regular_macroman/cac_champagne-webfont.woff2') format('woff2'),
         url('fonts/cacchampagne_regular_macroman/cac_champagne-webfont.woff') format('woff'),
         url('fonts/cacchampagne_regular_macroman/cac_champagne-webfont.ttf') format('truetype'),
         url('fonts/cacchampagne_regular_macroman/cac_champagne-webfont.svg#cac_champagneregular') format('svg');
    font-weight: normal;
    font-style: normal;
 



Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil
10 janvier 2018 à 17:49:44

ALLELUIAHHHHH !!!!!  ça marche Morpheus !!!!!!

Mais porquoi il y a un point virgule apres :

src: url('fonts/cacchampagne_regular_macroman/cac_champagne-webfont.eot');

et pas à la fin de chaque lien (url) ?

je vois qu'il n'y a pas dans la ligne de code ci-dessus le mot "format", comme dans les autres liens.

Je vous embete encore avec cette derniere question afin de comprendre le probleme et etre capable de me debrouiller lors de mes futures codes.

Vous tous m'avez donné du courage à continuer;

Merci mille fois !!!!
:D

Ah, et pour le kiff je poste ma page web:

-
Edité par @Arobase 10 janvier 2018 à 17:53:55

Merci beaucoup !
10 janvier 2018 à 17:52:01

Es ce qu'avec cette façon d'écrire tu comprend mieux pourquoi ?

@font-face {
	font-family: 'cac_champagneregular';
	src: url('fonts/cacchampagne_regular_macroman/cac_champagne-webfont.eot');
	src: url('fonts/cacchampagne_regular_macroman/cac_champagne-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/cacchampagne_regular_macroman/cac_champagne-webfont.woff2') format('woff2'), url('fonts/cacchampagne_regular_macroman/cac_champagne-webfont.woff') format('woff'), url('fonts/cacchampagne_regular_macroman/cac_champagne-webfont.ttf') format('truetype'), url('fonts/cacchampagne_regular_macroman/cac_champagne-webfont.svg#cac_champagneregular') format('svg');
	font-weight: normal;
	font-style: normal;
}



Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil
10 janvier 2018 à 18:04:30

En fait, je suis très novice. C'est juste  que tous les url se presentent de la meme façon :

src: url ( ) ;

et que les url qui viennent apres la premiere ont , apres le parentheses, le mot "format":

src : url ( ) format ,

et celles la sont separés par des virgules.

Donc, la question serait:

quelle est la difference entre ceci:

src: url ( ) ;

et cela :

src : url ( ) format ,

?

De toute façon, je suis ravi d'avoir reussi à trouver la solution grace à vous tous.

Maintenant, aprés toute la journéé à coder, il faut 1 heure de Yoga pour rafraîchir la tète, le corps et l’âme.

Merci à tous !!

-
Edité par @Arobase 10 janvier 2018 à 18:24:04

Merci beaucoup !
10 janvier 2018 à 18:22:19 - Message modéré pour le motif suivant : Message complètement hors sujet


11 janvier 2018 à 12:45:54

Moi aussi j'ai compris à partir de la présentation en ligne des formats, au lieu de leur présentation l'un dessous de l'autre.

Après coup, c'est logique...merci à tous (y compris "Curieux 18") pour ces efforts et explications donnés avec patience et compréhension, qui m'ont également tirée de l'embarras.

Gros probleme avec l'utilisation de @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.
  • Editeur
  • Markdown