28172 sujets

CSS et mise en forme, CSS3

[Résolu] Ajout d'une police

upload/1640523524-48192-capturedaeacran2021-12-26aa13.png Bonjour à tous,
Deux petits soucis de débutant aujourd'hui Smiley confus
Le premier est que je n'arrive pas à ajouter une police.
J'ai bien mis (mais je ne sais pas si c'est nécessaire) :
@font-face { font-family: Chunkfive; src: url('Chunkfive.otf'); }

Mes autres CSS
          #bgfadewrap > div > div h1 {
                text-align: right;
                color: #FFFFFF;
                opacity: 0.7;
                text-decoration: none;
                text-shadow: 1px 1px #000000;
                font: 10vw/8vw 'Chunkfive','Alfa Slab One', cursive, Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
                bottom: 10px;
                right: -10%;
                position: absolute;

}
et les fichiers sont bien dans le dossier "font".
J'en ai rajouté des polices il y a longtemps, mais là, j'ai du oublié un truc Smiley hum
Merci pour votre aide et bonnes fêtes de fin d'années.
ED
Modifié par el_debutanti (26 Dec 2021 - 13:58)
Modérateur
Bonjour,

Le fichier "Chunkfive.otf" semble ne pas être sur ton disque dur. Ça n'aide pas ! Smiley lol

Amicalement,
Bonjour parsimonhi
Exact Smiley lol
Merci pour ta réponse Smiley cligne
maintenant mes CSS resemblent à ça :
          #bgfadewrap > div > div > div h1 {
                text-align: left;
                color:  #00CC99;
                opacity: 0.7;
                text-decoration: none;
                text-shadow: 1px 1px #000000;
                font: 10vw/8w 'ChunkFive-Regular','Alfa Slab One', cursive, Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
                bottom: 10px;
                left: -10%;
                position: absolute;
          }

et mon dossier à cela (img).
Le h1 reste malgré tout en Alfa Smiley hum
Bon, ça fait des années que j'ai pas tripoté des fonts Smiley murf
Merci pour ton aide,
ED upload/1640529494-48192-capturedaeacran2021-12-26aa15.png
Modérateur
Salut !

Alors comme ca fait des années il faut surement une petite piqure de rappel Smiley ravi

Pour mettre une font il y a 2 choses importantes :
- le path vers le fichier
- le nom donné à la font

@font-face {
  font-family: "cocolasticot";
  src: url("path/cocolasticot-webfont-regular.woff");
}

body {
  font-family: "cocolasticot", serif;
}

from : https://developer.mozilla.org/fr/docs/Web/CSS/@font-face

Donc ici le @fontface sert a relier le fichier WOFF (ou OTF dans ton cas) à un nom qu'on va utiliser dans la suite du CSS. C'est ce qui pèche chez toi, ce que parsimonhi a mis en avance mais que tu n'a pas remis dans ta réponse. Donc il faut que tu saches quels fichiers de font tu veux inclure (selon ton screenshot tu en a 5 : otf eot svg ttf et woff), les inclures dans le @font-face, donner un nom à ta font et l'utiliser dans le code.

Smiley smile
Salut laurent,
J'ai du mal avec les fonts aujourd'hui. Je pense avoir fait tout ce que tu m'as dit...
Je suis repassé par Font Squirrel.
Mes CSS :
@font-face {
    font-family: 'chunkfiveregular';
    src: url('fonts/chunkfive-webfont-webfont.woff2') format('woff2'),
         url('fonts/chunkfive-webfont-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

et
          #bgfadewrap > div > div > div h1 {
                text-align: left;
                color:  #00CC99;
                opacity: 0.7;
                text-decoration: none;
                text-shadow: 1px 1px #000000;
                font: 10vw/8w 'chunkfiveregular','Alfa Slab One', cursive, Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
                bottom: 10px;
                left: -10%;
                position: absolute;
          }

Je n'ai conservé que le .woff
upload/1640541497-48192-capturedaeacran2021-12-26aa18.png
AI-je bien fait ?
Toujours de l'Alfa dans mon h1 Smiley bawling
J'ai tenté autre chose (encore une autre font) pour un h2 de ma page, même processus et même résultat. J'ai raté quelque chose Smiley hum
Merci pour ton aide,
ED
Modérateur
Super !

Tout à l'air OK (+1 pour le choix de ne garder que woff2 et woff);

La seule chose ou j'ai encore un doute c'est le chemin. Ok ta font est dans le dossier fonts, mais ton fichier CSS et ou ? Smiley ravi
Salut laurent,
a écrit :
mais ton fichier CSS et ou ?

Bah j'ai copié le code dans mon fichier CSS. Fallait pas ?
Bonne journée et merci,
ED
Modérateur
Bonjour,

el_debutanti a écrit :
Bah j'ai copié le code dans mon fichier CSS. Fallait pas ?
Bonne journée et merci,
ED


Les chemins que tu mets devant les noms de fichiers de police dans le fichier css dépend de l'endroit où se trouve le fichier css. C'est ça que voulait dire Laurent. Il n'est pas sûr (et moi de même) que le chemin que tu mets actuellement permette de trouver les fichiers de police.

Actuellement, tes chemins pré-supposent que le fichier css et le dossier "fonts" sont tous les deux dans le même dossier. Si ce n'est pas le cas, il faut adapter les chemins devant les noms de fichier de police dans le fichier css.

Amicalement,
Bonjour parsimonhi,
a écrit :
Actuellement, tes chemins pré-supposent que le fichier css et le dossier "fonts" sont tous les deux dans le même dossier

Effectivement, c'est le cas. Smiley murf Le problème est ailleurs Smiley hum
Bonne journée et merci,
ED
ReBonjour,
Alors, voici ce que j'ai en CSS 
@font-face {
    font-family: 'ralewayextralight';
    src: url('fonts/raleway.extralight-webfont.woff2') format('woff2'),
    url('fonts/raleway.extralight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

J'ai tenté de mettre la font dans un h1, voici le résultat Smiley hum
Mais le gros problème vient des CSS
#intro h1 {
	font: 'Alfa Slab One', cursive, Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	padding-top: 0px;
	margin-bottom: 20px;
	color: #000000;
	font-size: 6vw;
	line-height: 6vw;
}
#intro h2 {
	font-size: 4vw;
	font: 'ralewayextralight', sans-serif;
}

Aucun résultat si je fais des modif. Rien ne se passe excepté si je change le font-size du h1.
La font du h2 n'est pas du 'ralewayextralight' Smiley fache
Je suis perdu Smiley bawling
Merci pour votre aide,
ED upload/1640690626-48192-capturedaeacran2021-12-28aa12.png
En changeant le <h2> en <p>, ça fonctionne !!!
#intro p {
	font-size: 4vw;
	font: 'ralewayextralight', sans-serif;
	line-height: 4.5vw;
}

Quelqu'un peut me dire pourquoi je ne peux rien changer dans mes h1 et h2 ?
Merci pour votre aide, bonne journée,
ED
Pareil, je tente de mettre cette font
@font-face {
    font-family: 'chunkfive_exregular';
    src: url('fonts/chunkfive_ex-webfont.woff2') format('woff2'),
         url('fonts/chunkfive_ex-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

ici
          #bgfadewrap > div > div h1 {
                text-align: right;
                color: #FFFFFF;
                opacity: 0.7;
                text-decoration: none;
                text-shadow: 1px 1px #000000;
                font: 10vw/8vw  'chunkfive_exregular', 'Alfa Slab One', cursive, Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
                bottom: 10px;
                right: -10%;
                position: absolute;
          }

seul l'Alfa est affiché. Si je supprime l'Alfa, c'est la cursive qui s'affiche alors que les .woff sont bien dans le dossier "fonts".
Merci pour votre aide,
ED
Modérateur
Bonjour,

el_debutanti a écrit :
Quelqu'un peut me dire pourquoi je ne peux rien changer dans mes h1 et h2 ?


Tu fais un test. Tu mets dans le body d'un fichier html uniquement un h1. Et dans le fichier css uniquement le @font-face et le style du h1. Et tu regardes si ça marche ou pas. Si ça marche, c'est qu'il y a ailleurs dans ton css quelque chose qui change la valeur de la propriété "font" pour ton h1.

"font" est une propriété css qui regroupe en fait plusieurs propriétés : "font-family", "font-size", etc. Du coup, ce n'est pas très sain de mélanger des "font" avec des "font-size" par exemple, car on a vite fait de modifier la valeur de "font" sans s'en rendre compte.

Si tu ne mets que des noms de police comme valeur de la propriété "font", alors il vaut mieux utiliser "font-family". En fait, je te conseille même de ne pas utiliser "font", mais plutôt "font-family", "font-size", etc.

Par exemple :
font-family: 'ralewayextralight', sans-serif;

à la place de
font: 'ralewayextralight', sans-serif;


Amicalement
Meilleure solution
Bonsoir! J'ai ce site Web avec le thème Generatepress. Je voudrais utiliser css pour changer la couleur des textes comme je le souhaite. Existe-t-il une liste de codes que je peux utiliser ou une vidéo pour les débutants ? Merci
https://voyager-monde.net/
Merci beaucoup pour ces précisions parsimonhi Smiley cligne
Bon, j'ai tenté autre chose, j'ai dit que je pouvais changer la police de
#intro p
mais pas de 
#intro h2

Bon, alors j'ai tenté de mettre la 'chunkfive_exregular' dans 
#Intro p
.
pareil, police "invisible" ! Smiley bawling 
#intro p {
	font-size: 4vw;
	font-family: 'chunkfive_exregular', sans-serif;
	line-height: 5vw;
}

Par contre, il n'y a plus 
font-family: 'ralewayextralight', sans-serif;
mais elle est toujours affichée !
Smiley fache Une histoire de dingue. Je n'ai mis le 'ralewayextralight' nul part ailleurs !
Encore merci et bonne soirée,
ED
Modérateur
Bonjour,

Peut-être une histoire de cache du navigateur.

Quand tu ré-affiches une page (en cliquant sur une sorte de flèche circulaire à côté de la barre d'adresse), appuie sur la touche "majuscule" en même temps. Ça force le navigateur à recharger les ressources dont il a besoin.

Quand on fait du développement, c'est une bonne habitude à prendre.

Amicalement,
Modifié par parsimonhi (28 Dec 2021 - 18:18)
Merci pour l'astuce. J'ai déjà eu des "gros" problèmes inexistants... problème de cache Smiley ravi
Mais là, ce n'est pas le cas Smiley bawling
Testé sur Firefox, Safari et Chrome. Je ne sais que dire...
Bonne soirée,
ED
Bonjours à tous,
Le problème est ailleurs le sujet est donc résolu.
Merci parsimonhi et _Laurent,
Bonne St-Sylvestre,
ED
Sujet clos
Aller à