Partage
  • Partager sur Facebook
  • Partager sur Twitter

probleme css inserer nouvelle police

Sujet résolu
    1 juillet 2019 à 16:03:12

    Bonjour !

    Je commence dans le html et le css, et je bloque à l'insertion d'une nouvelle police; j'ai donc mes fichiers css et html dans le meme dossier, et j'ai créer un sous dossier "lobster" avec ma police .

    voici mon code :

    @font-face {
        font-family: 'lobsterregular';
        src: url('lobster/lobster-regular-webfont.eot');
        src: url('lobster/lobster-regular-webfont.eot?#iefix') format('embedded-opentype'),
             url('lobster/lobster-regular-webfont.woff2') format('woff2'),
             url('lobster/lobster-regular-webfont.woff') format('woff'),
             url('lobster/lobster-regular-webfont.ttf') format('truetype'),
             url('lobster/lobster-regular-webfont.svg#lobsterregular') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }
    
    
     *
     {
    	font-family: 'lobsterregular', sans-serif;
     }

    Je ne comprend pas pourquoi la police ne s'affiche pas, vous avez des idées ?

    merci d'avance !

    -
    Edité par KatAnna 1 juillet 2019 à 16:04:45

    • Partager sur Facebook
    • Partager sur Twitter
      1 juillet 2019 à 16:15:58

      Bonjour,

      A première vue il n'y a pas d'erreurs dans ton CSS. Et si tes dossiers sont organisés comme tu le dis alors tes chemins d'accès semblent bons.

      As-tu essayé de vider ton cache ?

      As-tu un message d'erreur dans la console de l'inspecteur ? Et, si oui, lequel ?

      Pourrais-tu nous fournir un screenshot de ta structure de dossiers et de fichiers stp ?

      • Partager sur Facebook
      • Partager sur Twitter
      Je ne réponds pas aux messages privés.
        1 juillet 2019 à 16:35:10

        Voila le screenshot de ma structure, le fichier css est "testc" et le html associé est "testh".structure dossier

        Au départ, le dossier "lobster" était dans le sous dossier "polices", mon code était : 

        src: url('polices/lobster/lobster-regular-webfont.eot'); 

        mais cela ne fonctionnait pas donc je pensais qu'en le rapprochant ça allait marcher mais apparemment non..

        je viens de vider mon cache et rien ne change. Et non je n'ai pas de messages d'erreurs

        -
        Edité par KatAnna 1 juillet 2019 à 16:38:32

        • Partager sur Facebook
        • Partager sur Twitter
          2 juillet 2019 à 17:31:49

          Salut,

          au vu de ton screen ton code est correct.

          si les fonts sont bien dans le dossier lobster et qu'elles ont le même nom que ce que tu as mis dans la CSS tu ne devrait pas avoir de problème.

          On voit qu'il y a un autre dossier lobster, tu ne les aurait pas mises là par hasard ?

          • Partager sur Facebook
          • Partager sur Twitter
          Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !
            2 juillet 2019 à 17:53:51


            Frogweb a écrit:

            Salut,

            au vu de ton screen ton code est correct.

            si les fonts sont bien dans le dossier lobster et qu'elles ont le même nom que ce que tu as mis dans la CSS tu ne devrait pas avoir de problème.

            On voit qu'il y a un autre dossier lobster, tu ne les aurait pas mises là par hasard ?


            il n'y a qu'un seul dossier lobster et les fonts sont bien dedans

            et j'ai intégré la police dans body cette fois comme ceci : 

            body
             {
            	background-color: navy;
            	color: white;
            	font-family: "lobsterregular", arial, sans-serif;
             }



            et cela ne fonctionne toujours pas :colere2:
            merci pour votre aide en tout  cas

            -
            Edité par KatAnna 2 juillet 2019 à 18:03:33

            • Partager sur Facebook
            • Partager sur Twitter
              2 juillet 2019 à 18:13:20

              @KatAnna je viens de sortir votre dernier message des spams.
              • Partager sur Facebook
              • Partager sur Twitter
                2 juillet 2019 à 18:15:45

                AbcAbc6 a écrit:

                @KatAnna je viens de sortir votre dernier message des spams.


                merci, j'ai apparemment trop modifié mon message, desolé !
                • Partager sur Facebook
                • Partager sur Twitter
                  2 juillet 2019 à 23:20:05

                  Ton @font-face est la seule propriété CSS qui ne fonctionne pas ou bien tu as d'autres soucis ?

                  C'est peut-être juste le fichier CSS qui serait mal lié au fichier HTML ? 

                  • Partager sur Facebook
                  • Partager sur Twitter
                  Je ne réponds pas aux messages privés.
                    3 juillet 2019 à 10:43:23

                    Salut,

                    on va faire le plus simple possible pour éliminer plusieurs pistes d'erreurs.

                    Mets tes fichiers font au même endroit que ton fichier html.

                    Dans ton fichier html mets ce code dans le <head> :

                    <style>
                    @font-face {
                        font-family: 'lobsterregular';
                        src: url('lobster-regular-webfont.eot');
                        src: url('lobster-regular-webfont.eot?#iefix') format('embedded-opentype'),
                             url('lobster-regular-webfont.woff2') format('woff2'),
                             url('lobster-regular-webfont.woff') format('woff'),
                             url('lobster-regular-webfont.ttf') format('truetype'),
                             url('lobster-regular-webfont.svg#lobsterregular') format('svg');
                        font-weight: normal;
                        font-style: normal;
                     
                    }
                    body
                     {
                        font-family: lobsterregular, sans-serif;
                     }
                    </style>


                    Et teste.

                    • Partager sur Facebook
                    • Partager sur Twitter
                    Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !
                      3 juillet 2019 à 12:38:15

                      moi aussi ça m'avait fait sa du coup j'ai demander de l'aide autours de moi et on m'a dis que c'est parce que la police n'est pas adapter au navigateur essaie plu sieur police pour voir si c'est sa le problème
                      • Partager sur Facebook
                      • Partager sur Twitter
                        3 juillet 2019 à 17:53:06

                        Mewen_bzh a écrit:

                        Ton @font-face est la seule propriété CSS qui ne fonctionne pas ou bien tu as d'autres soucis ?

                        C'est peut-être juste le fichier CSS qui serait mal lié au fichier HTML ? 


                        il y a aussi l'image en background qui ne fonctionne pas, le fond se met en blanc; mon code :

                         body
                         {
                        	background-image: url("fond_etoile.png");
                        	color: white;
                        	font-family: "lobsterregular", arial, sans-serif;
                         }



                        • Partager sur Facebook
                        • Partager sur Twitter
                          3 juillet 2019 à 19:25:35

                          Bonjour, pour ton fond, est-ce que l'image est bien dans le même répertoire que le fichier css?

                          As tu réalisé la proposition de frogweb? Cela élimine plusieurs pistes d'erreurs comme il le dit.

                          Donne nous ton code HTML/CSS complet après avoir déplacé tous les fichiers dans un seul et unique répertoire.

                          -
                          Edité par AbcAbc6 3 juillet 2019 à 19:26:34

                          • Partager sur Facebook
                          • Partager sur Twitter
                            4 juillet 2019 à 20:06:32

                            Frogweb a écrit:

                            Salut,

                            on va faire le plus simple possible pour éliminer plusieurs pistes d'erreurs.

                            Mets tes fichiers font au même endroit que ton fichier html.

                            Dans ton fichier html mets ce code dans le <head> :

                            <style>
                            @font-face {
                                font-family: 'lobsterregular';
                                src: url('lobster-regular-webfont.eot');
                                src: url('lobster-regular-webfont.eot?#iefix') format('embedded-opentype'),
                                     url('lobster-regular-webfont.woff2') format('woff2'),
                                     url('lobster-regular-webfont.woff') format('woff'),
                                     url('lobster-regular-webfont.ttf') format('truetype'),
                                     url('lobster-regular-webfont.svg#lobsterregular') format('svg');
                                font-weight: normal;
                                font-style: normal;
                             
                            }
                            body
                             {
                                font-family: lobsterregular, sans-serif;
                             }
                            </style>


                            Et teste.

                            je viens de tester et rien ne change

                            • Partager sur Facebook
                            • Partager sur Twitter
                              4 juillet 2019 à 21:44:29

                              Essaie de changer ta police et vois si sa marche
                              • Partager sur Facebook
                              • Partager sur Twitter
                                4 juillet 2019 à 22:17:07

                                Bonsoir.

                                D'après ce que j'ai pu voir, la font que tu tentes d'utiliser, sembles ne pas être compatible pour le Web, mais seulement pour le Desktop.

                                Attention, ce n'est pas une affirmation, car le site où est disponible la font ne donne pas beaucoup d'infos.

                                -
                                Edité par Lartak 4 juillet 2019 à 22:22:33

                                • Partager sur Facebook
                                • Partager sur Twitter

                                Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.

                                  7 juillet 2019 à 15:58:35

                                  AbcAbc6 a écrit:

                                  Bonjour, pour ton fond, est-ce que l'image est bien dans le même répertoire que le fichier css?

                                  As tu réalisé la proposition de frogweb? Cela élimine plusieurs pistes d'erreurs comme il le dit.

                                  Donne nous ton code HTML/CSS complet après avoir déplacé tous les fichiers dans un seul et unique répertoire.

                                  -
                                  Edité par AbcAbc6 hier à 19:26

                                  je viens de tout mettre dans un seul dossier

                                  mon code css en entier : 

                                  @font-face {
                                      font-family: 'lobsterregular';
                                      src: url('lobster-regular-webfont.eot');
                                      src: url('lobster-regular-webfont.eot?#iefix') format('embedded-opentype'),
                                           url('lobster-regular-webfont.woff2') format('woff2'),
                                           url('lobster-regular-webfont.woff') format('woff'),
                                           url('lobster-regular-webfont.ttf') format('truetype'),
                                           url('lobster-regular-webfont.svg#lobsterregular') format('svg');
                                      font-weight: normal;
                                      font-style: normal;
                                    
                                  }
                                  
                                  
                                   *
                                   {
                                  	text-align: center;
                                  	clear: both; 
                                   }
                                   
                                   .nous
                                   {
                                  	font-style: italic;
                                   } 
                                   h1
                                   {
                                  	text-decoration: blink;
                                  	font-size: 45px;
                                   }
                                   
                                   .giphy-embed
                                   {
                                  	float: none;
                                  	
                                   }
                                   
                                   body
                                   {
                                  	background-image: url("fond_etoile.png");
                                  	background-color: #0f0733;
                                  	color: white;
                                  	font-family: "lobsterregular", arial, sans-serif;
                                  	background-repeat: repeat;
                                   }
                                   
                                   p
                                   {
                                  	font-size: 20px ;
                                   }
                                  mark
                                  {
                                  	background-color: #6908A1;
                                  	opacity: 0,2;
                                  }
                                  
                                   .definition
                                   {
                                  	background-color: #000810;
                                  	
                                   }
                                   
                                   .titre
                                   {
                                  	border: 1px inset #E63B10;
                                  	border-radius: 10px;
                                   }

                                  mon code html en entier : 

                                  <!DOCTYPE html>
                                  <html>
                                  	<head>
                                  		<meta charset="utf-8" />
                                  		<link rel="stylesheet" href="Testc.css" />
                                  		<title> blue sky</title>
                                  		<style>
                                  @font-face {
                                      font-family: 'lobsterregular';
                                      src: url('lobster-regular-webfont.eot');
                                      src: url('lobster-regular-webfont.eot?#iefix') format('embedded-opentype'),
                                           url('lobster-regular-webfont.woff2') format('woff2'),
                                           url('lobster-regular-webfont.woff') format('woff'),
                                           url('lobster-regular-webfont.ttf') format('truetype'),
                                           url('lobster-regular-webfont.svg#lobsterregular') format('svg');
                                      font-weight: normal;
                                      font-style: normal;
                                    
                                  }
                                  body
                                   {
                                      font-family: lobsterregular, sans-serif;
                                   }
                                  </style>
                                  	</head>
                                  
                                  	<body>
                                  		<h2 class="titre"> l'univers est grand </h2>
                                  		<p> <iframe src="https://giphy.com/embed/3og0IFrHkIglEOg8Ba" width="200" height="320" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/universe-spiral-galaxy-star-cluster-vortex-konczakowski-3og0IFrHkIglEOg8Ba"></a></p>
                                  		<p> Parmis un nombre énorme d'atomes, des <mark> milliards de milliards</mark> de galaxies, encore plus d'étoiles, un vide immense, il y a....  <span class="nous">nous</span>. </p>
                                  		<p> <span class="definition"> L'Univers est l'ensemble de tout ce qui existe, régi par un certain nombre de lois.
                                  
                                  La cosmologie cherche à appréhender l'Univers d'un point de vue scientifique, comme l'ensemble de la matière distribuée dans l'espace-temps. Pour sa part, la cosmogonie vise à établir une théorie de la création de l'Univers sur des bases philosophiques ou religieuses. La différence entre ces deux définitions n'empêche pas nombre de physiciens d'avoir une conception finaliste de l'Univers (voir à ce sujet le principe anthropique).
                                  
                                  Si l'on veut faire correspondre le mouvement des galaxies avec les lois physiques telles qu'on les conçoit actuellement, on peut considérer que l'on n'accède par l'expérience qu'à une faible partie de la matière de l'Univers1, le reste se composant de matière noire. Par ailleurs, pour expliquer l'accélération de l'expansion de l'Univers, il faut également introduire le concept d'énergie sombre. Plusieurs modèles alternatifs ont été proposés pour faire correspondre les équations et nos observations en prenant d'autres approches </span> </p>
                                  	</body>
                                  </html>	

                                  et enfin ma structure de dossier :



                                  merci à tous pour votre intérêt à m'aider à résoudre mon souci :)

                                  (je n'ai pas eu accès a mon pc ces derniers jours désolé pour l'absence)

                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                    7 juillet 2019 à 16:30:09

                                    Bonjour, tu appelles le fichier Testc.css dans ton HTML et ton fichier s'appelle testc.css . Ce n'est pas la même chose.

                                    Normalement tu ne devrais n'avoir aucun style sur ta page!!

                                    Après avoir télécharger la police et le kit complet sur fontsquirrel et copier le tout dans un seul et unique répertoire. Après avoir copier tout ton code en nomment correctement le fichier CSS j'ai bien le style qui s'affiche. 

                                    Attention tu as une erreurs HTML dans ton code au niveaux des paragraphe, tu as une ouverture de paragraphe juste après l'iframe.

                                    Place l'iframe dans le lien, si tu veux faire un lien sur celle ci, car ton lien est vide.

                                    Le premier titre de la page c'est un <h1> pas un <h2>. Tu ne peux avoir de h2 si tu na pas de h1 avant. C'est comme la table des matières d'un livre, tu ne sautes pas de chapitres.....

                                    >> (je n'ai pas eu accès a mon pc ces derniers jours désolé pour l'absence)

                                    Pas de problème tu passes quand tu sais/peux.

                                    -
                                    Edité par AbcAbc6 7 juillet 2019 à 16:36:13

                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                      8 juillet 2019 à 11:36:56

                                      Bonjour KatAnna, tu pourrais tout simplement tenter d'enlever les parenthèses de ton url. Ce qui te donnerait:

                                      @font-face

                                      {

                                      font-family: 'lobsterregular';
                                          src: url(lobster-regular-webfont.eot);
                                      }
                                      Pour moi, c'est ainsi que cela fonctionne. 
                                      :)
                                      Après relecture, tu es sûre qu'il n'y a pas de tiret entre lobster et regular ? 
                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                        11 juillet 2019 à 17:54:01

                                        merciiiii mille fois cela a enfin marché ! merci pour votre temps et votre attention !
                                        • Partager sur Facebook
                                        • Partager sur Twitter

                                        probleme css inserer nouvelle police

                                        × 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