Police dans CSS
h4xp2p
Messages postés
63
Statut
Membre
-
h4xp2p Messages postés 63 Statut Membre -
h4xp2p Messages postés 63 Statut Membre -
Bonjour, je debute dans la programmation de site web et j'essaye d'inserer dans ma page web la police "GoodDog" que j'ai telecharge ici:
https://www.fontsquirrel.com/fonts/GoodDog
Apres avoir dezippe le fichier j'obtiens un dossier "GoodDog-fontfacekit" avec a l'interieur 7 fichiers:
- demo.html
- Fonthead Standard EULA.txt
- GoodDog-webfont.eot
- GoodDog-webfont.svg
- GoodDog-webfont.ttf
- GoodDog-webfont.woff
- stylesheet.css
Je mets ensuite ces 7 fichiers dans mon dossier HTML qui comprends mon fichier style.css, mes deux pages test1.html et test2.html et d'autres fichiers audio et photos.
Voici mon fichier style.css:
h1, mark, .page2
{
color: blue;
}
.salutations
{
color: red;
}
p
{
font-size: 1em;
}
h1
{
font-size: 10em;
}
p
{
font-family: Verdana;
}
@font-face {
font-family: 'GoodDog';
src: url('GoodDog-webfont.ttf') format('truetype');
url('GoodDog-webfont.woff') format('woff'),
url('GoodDog-webfont.svg') format('svg');
}
h1
{
font-family: 'GoodDog', Arial, serif;
}
Et mon fichier test1.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Titre</title>
</head>
<body>
<h1> Helloooo ! </h1>
Bonjour et <span class="salutations"><strong>bienvenue</strong></span> sur mon site !
<h2> Mais... </h2>
<p> Pour l'instant c un peu vide mais vous allez voir apres<strong></strong>
</p>
<h3> T'inquietes! </h3>
<p> Vous ne serez pas decu! </p>
<p> Bientot ce site ressemblera a: <br />
<ol>
<li><mark> Un site au design irreprochable!</mark></li>
<li><mark> Un site avec un contenu irreprochable!</mark></li>
<li><mark> Un site a la securite irreprochable!</mark></li>
</ol>
<p> Ah! J'apprends avec <a href="https://openclassrooms.com/fr/" target="_blank" title= "On y apprend tout de zero">ce site </a> <br />
Alors si vous etes aussi interesse par l'informatique (comment creer un site, creer un logiciel, jetez-y un oeil ;-)
</p>
<p class= "page2">Cette page commence un peu a se remplir et j'ai apris a creer des liens vers une page web existante
donc maintenant je vais vous proposer d'aller (a l'aide d'un lien) sur <a href= "test2.html">la deuxieme page de mon site!
</p>
</body>
</html>
Cependant helloo ! reste toujours sur la meme police.
Pourquoi "Helloooo !" ne prend pas la bonne police.
Ps: Je suis sous Mac OS X avec comme navigateur Safari (cela ne marche pas non plus sur Chrome)
https://www.fontsquirrel.com/fonts/GoodDog
Apres avoir dezippe le fichier j'obtiens un dossier "GoodDog-fontfacekit" avec a l'interieur 7 fichiers:
- demo.html
- Fonthead Standard EULA.txt
- GoodDog-webfont.eot
- GoodDog-webfont.svg
- GoodDog-webfont.ttf
- GoodDog-webfont.woff
- stylesheet.css
Je mets ensuite ces 7 fichiers dans mon dossier HTML qui comprends mon fichier style.css, mes deux pages test1.html et test2.html et d'autres fichiers audio et photos.
Voici mon fichier style.css:
h1, mark, .page2
{
color: blue;
}
.salutations
{
color: red;
}
p
{
font-size: 1em;
}
h1
{
font-size: 10em;
}
p
{
font-family: Verdana;
}
@font-face {
font-family: 'GoodDog';
src: url('GoodDog-webfont.ttf') format('truetype');
url('GoodDog-webfont.woff') format('woff'),
url('GoodDog-webfont.svg') format('svg');
}
h1
{
font-family: 'GoodDog', Arial, serif;
}
Et mon fichier test1.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Titre</title>
</head>
<body>
<h1> Helloooo ! </h1>
Bonjour et <span class="salutations"><strong>bienvenue</strong></span> sur mon site !
<h2> Mais... </h2>
<p> Pour l'instant c un peu vide mais vous allez voir apres<strong></strong>
</p>
<h3> T'inquietes! </h3>
<p> Vous ne serez pas decu! </p>
<p> Bientot ce site ressemblera a: <br />
<ol>
<li><mark> Un site au design irreprochable!</mark></li>
<li><mark> Un site avec un contenu irreprochable!</mark></li>
<li><mark> Un site a la securite irreprochable!</mark></li>
</ol>
<p> Ah! J'apprends avec <a href="https://openclassrooms.com/fr/" target="_blank" title= "On y apprend tout de zero">ce site </a> <br />
Alors si vous etes aussi interesse par l'informatique (comment creer un site, creer un logiciel, jetez-y un oeil ;-)
</p>
<p class= "page2">Cette page commence un peu a se remplir et j'ai apris a creer des liens vers une page web existante
donc maintenant je vais vous proposer d'aller (a l'aide d'un lien) sur <a href= "test2.html">la deuxieme page de mon site!
</p>
</body>
</html>
Cependant helloo ! reste toujours sur la meme police.
Pourquoi "Helloooo !" ne prend pas la bonne police.
Ps: Je suis sous Mac OS X avec comme navigateur Safari (cela ne marche pas non plus sur Chrome)
A voir également:
- Police dans CSS
- Changer police facebook - Guide
- Police aptos - Accueil - Bureautique
- Police instagram - Guide
- Police bref ✓ - Forum Graphisme
- Police ticket de caisse - Forum Graphisme