Utiliser une police personnalisée avec @font-face
Bonjour à toutes et à tous,
Utiliser une police personnalisée avec @font-face
Je place le fichier index.html dans le dossier travail.
Je place le fichier style.ccc dans un sous dossier du doossier travail.
Je télécharge, Learning-Curve-Pro-fontfacekit, sur font squirrel, et je l'installe.
Je fais de nombreux essais infructueux. J'ai utilisé d'autres police. Dans tous les cas,
je ne suis jamais parvenu à afficher la nouvelle police.
J'ai placé lla nouvelle police dans le dossier css (fichier stylesheet.css).
Voici une maquette dans laquelle, à titre de simplification, la nouvelle police est déclarée
dans le fichier style.css.
Index.html
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Travail</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/stylesheet.css">
<script type="text/javascript" src="sympa.js"> </script>
</head>
<body>
<h1>Le travail c'est la santé<h1>
<p>Le reste du contenu n'existe pas: c'est une maquette</p>
</body>
</html> |
Style.css
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
@font-face {
font-family: 'learning_curve_proregular';
src: url('LearningCurve_OT-webfont.eot');
src: url('LearningCurve_OT-webfont.eot?#iefix') format('embedded-opentype'),
url('LearningCurve_OT-webfont.woff') format('woff'),
url('LearningCurve_OT-webfont.ttf') format('truetype'),
url('LearningCurve_OT-webfont.svg#learning_curve_proregular') format('svg');
font-weight: normal;
font-style: normal;
}
p
{
font-size: 40px;
}
h1
{
font-family: 'learning_curve_proregular', Arial, serif;
font-size: 80px;
} |
où est l'erreur*?
Cordialement
Papy
Utiliser une police personnalisée avec @font-face
Merci ireaux62,
Mon problème doit provenir d'une mauvaise utilisation du fichier téléchargé.
Je procède de la manière suivante*:
Je télécharge, Learning-Curve-Pro-fontfacekit.zip, depuis font squirrel.
Je n'ai pas Winrar.
Pour l'ouverture de Learning-Curve-Pro-fontfacekit.zip, je choisis l'option par défaut, WinRar.ZIP(défaut).
J'enregistre le fichier dans le dossier Téléchargement de Windows 7,
Dans le dossier Téléchargement de Windows 7, j'ai le choix entre*:
Extraire les fichiers..
Extrire ici
Extraire vers Learning-Curve_Pro-fontfacekit/7-Zip
Ce choix m'embarrasse. Je décide d'utiliser extraire ici
J'avais fait des essais, on me demande de confirmer le remplacement du fichier.
Je réponds Oui pour tous. J’obtiens, dans un dossier nommé Learning-Curve_Pro-fontfacekit,
trois fichiers
web fonts
Blue Viny l Licence.txt et
How_to_use_webfonts.html
Je copie le dossier web fonts dans le dossier css de l'application
Le dossier web fonts contiens deux sous dossiers*:
learningcurvedashedpro_regular_macroman et,
learningcurvepro_regular_macroman.
J'ignore la différence existant entre ces deux fichiers.
J'ouvre le second, learningcurvepro_regular_macroman. Il contient*:
Code:
1
2
3
4
5
6
7
8
|
Dossier specimen-files
learningCurve_OT-demo.html
learningCurve_OT-webfont.eot
learningCurve_OT-webfont.svg
learningCurve_OT-webfont.ttf
learningCurve_OT-webfont.woff
stylesheet.css |
J'ai lu les informations.
Je ne sais pas utiliser les fichiers eot, svg, ttf et woff.
Je copie le fichier stylesheet dans le dossier css.
Dans le fichier index, il y a*:
Code:
1
2
3
|
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/stylesheet.css"> |
Après modifications voici mes fichiers
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
Index.html
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Travail</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/stylesheet.css">
<!--<style> -->
src: url('LearningCurve_OT-webfont.eot?#iefix') format('embedded-opentype'),
url('LearningCurve_OT-webfont.woff') format('woff'),
url('LearningCurve_OT-webfont.ttf') format('truetype'),
url('LearningCurve_OT-webfont.svg#learning_curve_proregular') format('svg');
<!--</style> -->
<script type="text/javascript" src="sympa.js"> </script>
</head>
<body>
<h1>Le travail c'est la santé<h1>
<p>Le reste du contenu n'existe pas: c'est une maquette</p>
</body>
</html> |
J'ai placé sans succès Les url avec et sans les balises style.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
Style.css
@font-face {
font-family: 'learning_curve_proregular';
src: url('LearningCurve_OT-webfont.eot');
src: url('LearningCurve_OT-webfont.eot?#iefix') format('embedded-opentype'),
url('LearningCurve_OT-webfont.woff') format('woff'),
url('LearningCurve_OT-webfont.ttf') format('truetype'),
url('LearningCurve_OT-webfont.svg#learning_curve_proregular') format('svg');
font-weight: normal;
font-style: normal;
}
p
{
font-size: 40px;
}
h1
{
font-family: 'learning_curve_proregular', Arial, serif;
font-size: 80px;
} |
Que les url soient ou non dans ce fichier ne change rien.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
stylesheet.css
@font-face {
font-family: 'learning_curve_proregular';
src: url('LearningCurve_OT-webfont.eot');
src: url('LearningCurve_OT-webfont.eot?#iefix') format('embedded-opentype'),
url('LearningCurve_OT-webfont.woff') format('woff'),
url('LearningCurve_OT-webfont.ttf') format('truetype'),
url('LearningCurve_OT-webfont.svg#learning_curve_proregular') format('svg');
font-weight: normal;
font-style: normal;
}
h1 /* Utilisation de la police qu'on vient de définir sur les titres */
{
font-family: 'learning_curve_proregular', Arial, serif;
font-size: 50px;
} |
Où est l'erreur*?
Cordialement
Papy
Installer une police personnalisée avec @font-face
Merci ireaux62,
Le problème est résolu. Il reste une question. Je ne comprends pas pourquoi
on place:
learningCurve_OT-webfont.eot
learningCurve_OT-webfont.svg
learningCurve_OT-webfont.ttf
learningCurve_OT-webfont.woff
dans le dossier css.
Pour être plus précis je ne comprends pas leur utilisation.
Cordialement
Papy
