IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Utiliser une police personnalisée avec @font-face


Sujet :

CSS

  1. #1
    Membre du Club

    Profil pro
    Inscrit en
    Novembre 2010
    Messages
    67
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2010
    Messages : 67
    Points : 62
    Points
    62
    Billets dans le blog
    1
    Par défaut 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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour Papy,

    qu'as-tu fait des fichiers LearningCurve_OT-webfont.eot, .woff,... ?
    Les as-tu bien mis dans le même dossier que la feuille de style ?

  3. #3
    Membre du Club

    Profil pro
    Inscrit en
    Novembre 2010
    Messages
    67
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2010
    Messages : 67
    Points : 62
    Points
    62
    Billets dans le blog
    1
    Par défaut 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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     
    <link rel="stylesheet" href="css/style.css">
     <link rel="stylesheet" href="css/stylesheet.css">
    Après modifications voici mes fichiers
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  4. #4
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    1/ Tu as un dossier nommé "css".
    DANS ce dossier, mets les fichiers :
    • learningCurve_OT-webfont.eot
    • learningCurve_OT-webfont.svg
    • learningCurve_OT-webfont.ttf
    • learningCurve_OT-webfont.woff


    2/ Inutile d'avoir 2 fichiers CSS style.css et stylesheet.css. UN SEUL suffit, avec tout dedans.
    DANS ce fichier (au début, de préférence) :

    style.css
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    @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;
    }
    /* suite des style ........; */

    3/ il ne reste plus qu'à utiliser la nouvelle font :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    h1 { font-family:'learning_curve_proregular', 'Comic Sans', sans-serif; }

    index.html
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <!doctype html>
    <html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Travail</title>
        <link rel="stylesheet" href="css/style.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>

  5. #5
    Membre du Club

    Profil pro
    Inscrit en
    Novembre 2010
    Messages
    67
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2010
    Messages : 67
    Points : 62
    Points
    62
    Billets dans le blog
    1
    Par défaut 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

  6. #6
    Invité
    Invité(e)
    Par défaut
    1/ Ce sont les fichiers qui contiennent les polices, encodées !

    Les navigateurs n'utilisent pas tous le même codage des fichiers.
    Voilà pourquoi il y a plusieurs extensions.

    2/ On peut les placer dans un autre dossier.
    Par exemple : dans un dossier "fonts", à coté du dossier "css".
    On devrait alors écrire :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    @font-face {
        font-family: 'learning_curve_proregular';
        src: url('../fonts/LearningCurve_OT-webfont.eot');
        src: url('../fonts/LearningCurve_OT-webfont.eot?#iefix') format('embedded-opentype'),
             url('../fonts/LearningCurve_OT-webfont.woff') format('woff'),
             url('../fonts/LearningCurve_OT-webfont.ttf') format('truetype'),
             url('../fonts/LearningCurve_OT-webfont.svg#learning_curve_proregular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    • ../ : on sort du dossier "css"
    • fonts/ : on entre dans le dossier "fonts"

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 0
    Dernier message: 29/11/2011, 21h19
  2. [Font] utiliser une police externe
    Par jerem721 dans le forum Débuter
    Réponses: 2
    Dernier message: 19/03/2009, 16h44
  3. Afficher du texte avec une police personnalisée.
    Par Rakken dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 21/12/2008, 21h06

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo