28172 sujets

CSS et mise en forme, CSS3

Bonjour
je dois absolument changer la police de certains éléments de mon site. J'ai bien réussi a identifier et isoler ces différents éléments sur mon css. Mais quand je rentre la commande font-family aucun changement ce produit.
La police que je souhaiterai employé est bien répertorié il s'agit de "Amatic SC "
Prenons par exemple mon titre:


<html  lang="en">
<head>
    <meta charset="UTF-8">
    <title>Wild Circus</title>
    <meta name="description" content="International Circus">
</head>

<body style="background-image:url(https://zupimages.net/up/19/30/p9e7.jpg); ">
 
    <header style="background-image:url(https://zupimages.net/up/18/13/76vc.jpeg); ">
      
      <h1 class="wild">Wild Circus</h1>
      <nav>
        <ul>
            <!-- TODO: Les liens du menu doivent nous emmener vers les sections correspondantes dans la page -->
            <li><a href="#Performances">||Performances|</a></li>              
            <li><a href="#About-Us">|About Us|</a></li>
            <li><a href="#Prices">|Prices|</a></li>
            <li><a href="#Contact">|Contact|</a></li>
          
        </ul>
      </nav>
    </header>

Dans cette partie je voudrais changer la police de mon titre
 <h1 class="wild">Wild Circus</h1> 


Pour cela j'ai d'abord essayer d'appliquer la modification comme cela:

.wild{
  font-family: 'Amatic SC';
  color: gold;
  font-size: 100px;    
}


Pas de changement, alors j'ai essayer ceci :


header{
  background-repeat:no-repeat; 
  display:flex;
  background-position:center;
  text-align: center;
  justify-content: center;
  flex-direction: column;
  color: white;
  font-family: 'Amatic SC';  
}

Pas de changement non plus.
Me suis je tromper dans les sélecteurs?
Ou le problème vient d'autre part? C'est la première fois que je réalise ce type d'exercice.
Merci d'avance.
Modérateur
Salut,

Il faut déclarer ta font perso dans un @font-face et importer tes fichiers de font. Jette un oeil a l'article : https://www.alsacreations.com/astuce/lire/630-fonte-personnalisee-site-web.html

Si tu e veut pas t'embeter tu peux utiliser Googlefont et rajouter :
<link href="https://fonts.googleapis.com/css?family=Amatic+SC&display=swap" rel="stylesheet">

https://fonts.google.com/specimen/Amatic+SC?selection.family=Amatic+SC

Mais généralement c'est mieux si tu l'importe toi même. Il faut juste que tu télécharge la font, que tu la mette avec ton site et que tu l'importe dans ton CSS (cf l'article)
Meilleure solution
Bonjour _laurent
merci de ta réponse.
Vue que c'est un exercice d'admission a une formations, l'implantation via googlefont devrai suffire
Mais je viens bien tout lire a fin de mieux comprendre.
Merci pour tout.

Et cela fonctionne parfaitement maintenant. =D
Modifié par detale51 (29 Jul 2019 - 11:03)
Modérateur
detale51 a écrit :
Vue que c'est un exercice d'admission a une formations, l'implantation via googlefont devrai suffire

Juste pour éclairer un peu plus ton choix : utiliser un service externe te rend dépendant de lui. Si un jour Google décide de supprimer la font ou de la renommer ton site sera impacté directement et tu ne sera pas notifié ! Smiley lol
Si tu importa ta font en local tu es sur que tu l'auras.

Bonne continuation !