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:
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;
}
"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;
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 :
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 !
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 ! )
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 !
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.
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/ :
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....
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 ...
<!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;
}
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):
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.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil
Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil
Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil
Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil