Problème police personnalisé

6 novembre 2018 à 15:59:16

Bonjour,

Je suis en train de suivre le cours sur le site web en HTLM et CSS.

J'en suis a la troisième partie au niveau du TP du site internet et là rien a faire je n'arrive pas a changer ma police avec une police personnalisé.

J'ai tout essayé, j'ai même repris les codes que j'avais utilisé lors du cours précédent ou j'avais réussi a le faire.... rien ne veux fonctionner.

J'ai re crée un fichier de départ HTML et CSS avec quasiment rien dessus afin de facilité la recherche d'erreur mais je n'arrive pas a trouver pourriez vous m'aider svp ?

HTML :

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<link rel="stylesheet" href="style.css" />

<title>Site Eric</title>

</head>

<body>

<h1>Zozor</h1>

</body>

CSS :

style.css

@font-face {

    font-family: 'airstreamregular';

    src: url('Airstream-webfont.eot');

    src: url('Airstream-webfont.eot?#iefix') format('embedded-opentype'),

         url('Airstream-webfont.woff2') format('woff2'),

         url('Airstream-webfont.woff') format('woff'),

         url('Airstream-webfont.ttf') format('truetype'),

         url('Airstream-webfont.svg#airstreamregular') format('svg');

    font-weight: normal;

    font-style: normal;

}

h1

{

font-family: "airstreamregular", sans-serif;

}

PS : j'ai un fichier nommé "site" sur le bureau et dedans il y a le fichier HTML, le css et les fichiers de polices.

-
Edité par DevRico 12 novembre 2018 à 18:24:54

Ivaalo

8 novembre 2018 à 12:46:58

Hello !

À première vue, ton CSS a l'air correct. Tu indiques que tes polices sont dans le même dossier que le fichier CSS, c'est le cas ?

Le secret du SEO. Merci !

DevRico

12 novembre 2018 à 18:13:19

bonjour,

En effet j'ai tout mis en vrac dans un seul dossier avec le fichier html le style.css et les différents fichiers polices.. Je sais que c'est mieux d'organiser dans des sous dossiers mais la encore quand je rajoutais le nom du sous dossier devant ça fonctionnait plus...

Je viens de ré essayer la manip dans un fichier le plus simple possible car j'ai effacé l'ancien projet ci-dessus et ca marche toujours pas...

J'ai créer un dossier TEST sur le bureau avec dedans un sous dossier polices avec les fichiers police ainsi que le style.css dedans..

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Test</title>
<body>
	<h1>TESTTTT</h1>
	<p>zjkdkzqdjkzqdkmzdjkqjdkzqjdkjzqd</p>
</body>
</html>

et le CSS :

style.css

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

}

h1 + p
{
	font-family: "airstreamregular"; Arial;
}

-
Edité par DevRico 12 novembre 2018 à 18:28:59

AliasDmc

12 novembre 2018 à 18:41:04

Bonjour DevRico,

Tu as une faute après airstreamregular pas un ";" mais une ","

généralement c'est un problème de chemin :

Si style.css est dans un dossier nommé "Css" alors ton dossier "polices" doit être dans ce dossier

Si ton dossier "polices"est au même niveau que "Css" alors dans les urls de tes polices tu dois redescendre d'un répertoire soit mettre devant "../" ou "/"

Découvrez les Css avec la zonecss.fr

Redstruct90

12 novembre 2018 à 23:14:37

AliasDmc a écrit:

Bonjour DevRico,

Tu as une faute après airstreamregular pas un ";" mais une ","

généralement c'est un problème de chemin :

Si style.css est dans un dossier nommé "Css" alors ton dossier "polices" doit être dans ce dossier

Si ton dossier "polices"est au même niveau que "Css" alors dans les urls de tes polices tu dois redescendre d'un répertoire soit mettre devant "../" ou "/"

Tout a fait!

DevRico

13 novembre 2018 à 13:02:56

J'ai corriger l'erreur après airstreamregular merci !

Par contre j'ai pas très bien compris le reste...

J'ai un dossier TEST sur le bureau dans ce dossier il y a le fichier HTML, le style.css ainsi qu'un sous dossier "polices".

Est ce que tu me demandes de mettre le fichier css dans le sous dossier polices ? sachant que j'ai essayé ca fonctionne pas..

J'ai également essayé de rajouter TEST/polices/... devant le reste ca fonctionne pas non plus.. donc je commence a me dire que c'est peut être pas un problème de chemin

Redstruct90

13 novembre 2018 à 15:25:07

Essaie de voir si la police est dispo sur google font. En suite si c'est le cas, tu peux la charger avant ton Css dans ton fichier HTML.

Etape:

Tu va sur google font,

tu cherche ta police,

tu click sur ajouter ou un truc comme ca,

une petite fenetre va apparaitre en bas

tu click sur la fenetre,

et tu copie le text entre les balise lien. Je suis desole c est super dur a expliquer pour moi...