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 :

Personnaliser sa font avec font-face


Sujet :

CSS

  1. #1
    Débutant  
    Profil pro
    Inscrit en
    mai 2005
    Messages
    2 989
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : mai 2005
    Messages : 2 989
    Points : 903
    Points
    903
    Par défaut Personnaliser sa font avec font-face
    Bonjour

    J'aimerais appliquer une font spéciale pour le titre de ma page.

    Pour cela j'ai téléchargé la font dans mon dossier /font.

    Puis, dans mon fichier css, j'ai ajouté ceci

    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
     
    @font-face{
    	font-family:"texgyreadventor";
    	src: url("../fonts/texgyreadventor-regular.otf") format("otf");
    }
     
    body{
    	font-size: 12px;
    	font-family: verdana;
    }
     
    .logo{
    	font-family: "texgyreadventor", verdana;
            font-size: 20px;
    }

    L'objectif est donc de n'avoir que la font voulu pour le contenu de '.logo'

    Il se trouve que toute ma page à la font voulu, alors que toutes cette page devrait avoir la font verdana. Je ne comprends pas pourquoi, car dans body, je demande bien la versana???

    Autre chose, dans le zip de la font que j'ai téléchargé, j'ai plusieurs variantes:

    texgyreadventor-bold.otf
    texgyreadventor-bolditalic.otf
    texgyreadventor-italic.otf
    texgyreadventor-regular.otf

    Comment dois-je modifier ma ligne font-face, pour pouvoir utiliser la variante bold, italic, etc?

    Dois.je créer plusieurs font-face comme cela

    Code CSS : 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
    @font-face{
    	font-family:"texgyreadventor";
    	src: url("../fonts/texgyreadventor-regular.otf") format("otf");
    }
     
    @font-face{
    	font-family:"texgyreadventor-bold";
    	src: url("../fonts/texgyreadventor-bold.otff") format("otf");
    }
     
    @font-face{
    	font-family:"texgyreadventor-bolditalic";
    	src: url("../fonts/texgyreadventor-bolditalic.otff") format("otf");
    }
     
    @font-face{
    	font-family:"texgyreadventor-italic";
    	src: url("../fonts/texgyreadventor-italic.otf") format("otf");
    }

    Ou puis définir les variantes dans une section $font-face?

    Merci et belle soirée
    Il ne suffit pas de tout savoir. Vouloir et persévérer, c'est déjà presque tout!

  2. #2
    Expert éminent sénior

    Homme Profil pro
    Développeur Web
    Inscrit en
    septembre 2010
    Messages
    5 261
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : septembre 2010
    Messages : 5 261
    Points : 10 115
    Points
    10 115
    Par défaut
    Citation Envoyé par pierrot10 Voir le message
    Il se trouve que toute ma page à la font voulu, alors que toutes cette page devrait avoir la font verdana. Je ne comprends pas pourquoi, car dans body, je demande bien la versana???
    Body est pris en compte tant qu'un autre style n'est pas défini plus loin. Et avec la règle de l'héritage il est probable que tes autres blocs de texte héritent de la div .logo. Donc soit tu restructure ton code, soit tu redéfini les styles de police pour tes autres conteneurs de texte.


    Code CSS : 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
    @font-face{
    	font-family:"texgyreadventor";
    	src: url("../fonts/texgyreadventor-regular.otf") format("otf");
    }
     
    @font-face{
    	font-family:"texgyreadventor-bold";
    	src: url("../fonts/texgyreadventor-bold.otff") format("otf");
    }
     
    @font-face{
    	font-family:"texgyreadventor-bolditalic";
    	src: url("../fonts/texgyreadventor-bolditalic.otff") format("otf");
    }
     
    @font-face{
    	font-family:"texgyreadventor-italic";
    	src: url("../fonts/texgyreadventor-italic.otf") format("otf");
    }
    Si tu fais comme cela, tu devras indiquer à chaque fois un font-family différent pour changer la police. Si tu veux pourvoir utiliser les styles il faut les indiquer dans les règles font-face. Par exemple :

    Code CSS : 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
    25
    26
    27
    @font-face{
    	font-family:"texgyreadventor";
    	src: url("../fonts/texgyreadventor-regular.otf") format("otf");
            font-weight: normal;
            font-style: normal;
    }
     
    @font-face{
    	font-family:"texgyreadventor";
    	src: url("../fonts/texgyreadventor-bold.otff") format("otf");
            font-weight: bold;
            font-style: normal;
    }
     
    @font-face{
    	font-family:"texgyreadventor";
    	src: url("../fonts/texgyreadventor-bolditalic.otff") format("otf");
            font-weight: bold;
            font-style: italic;
    }
     
    @font-face{
    	font-family:"texgyreadventor";
    	src: url("../fonts/texgyreadventor-italic.otf") format("otf");
            font-weight: normal;
            font-style: italic;
    }
    Au passage les navigateurs modernes utilisent plutôt "woff2" ou sinon "woff" (pour les plus anciens) plutôt que "otf".

  3. #3
    Débutant  
    Profil pro
    Inscrit en
    mai 2005
    Messages
    2 989
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : mai 2005
    Messages : 2 989
    Points : 903
    Points
    903
    Par défaut
    Hello
    Merci pour ta réponse et désolé de revenir aussi tard.

    Malheureusement je bloque toujours à ce sujet et j'aimerais apporter une correction.

    La font texgyreadventor doit etre maintenant appliqué à body.

    J'ai donc fait ceci


    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
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    @font-face{
    	font-family:"texgyreadventor";
    	src: url("../fonts/texgyreadventor-regular.otf") format("otf");
    	font-weight: normal;
      	font-style: normal;
    }
     
     
    @font-face{
    	font-family:"texgyreadventor";
    	src: url("../fonts/texgyreadventor-bold.otf") format("otf");
    	font-weight: bold;
      	font-style: normal;
    }
     
    font-face{
    	font-family:"texgyreadventor";
    	src: url("../fonts/texgyreadventor-bolditalic.otff") format("otf");
        font-weight: bold;
        font-style: italic;
    }
     
    @font-face{
    	font-family:"texgyreadventor";
    	src: url("../fonts/texgyreadventor-italic.otf") format("otf");
        font-weight: normal;
        font-style: italic;
    }
     
     
     
    body{
    	font-size: 15px;
    	font-family: "texgyreadventor", Verdana, Helvetica, sans-serif;
    	color:#000000;
    }
    mais malheureusement sans succès et il semble que c'est éa verdana qui est appliqué. J'ai donc du mal à comprendre. Est-ce que je n'utiliserais pas le format woff2?

    Je ne le trouve pas à part ceci https://github.com/esmep23/dulce/tree/master/css/font

    Devrais-je télécharger
    texgyreadventor-regular-webfont.woff2
    texgyreadventor-italic-webfont.woff2
    texgyreadventor-bolditalic-webfont.woff2
    exgyreadventor-bold-webfont.woff2

    mais dans ce cas, cette adaptation serait correcte?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    @font-face{
    	font-family:"texgyreadventor";
    	src: url("../fonts/texgyreadventor-italic.otf") format("otf");
           src: url("../fonts/texgyreadventor-italic-webfont.woff2") format("woff2");
        font-weight: normal;
        font-style: italic;
    }
    Il ne suffit pas de tout savoir. Vouloir et persévérer, c'est déjà presque tout!

  4. #4
    Débutant  
    Profil pro
    Inscrit en
    mai 2005
    Messages
    2 989
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : mai 2005
    Messages : 2 989
    Points : 903
    Points
    903
    Par défaut
    Ah par contre, le fait d'avoir ajouté ceci (font-weight, font-style)
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    body{
    	font-size: 15px;
    	font-family: "texgyreadventor", Verdana, Helvetica, sans-serif;
    	font-weight: normal;
    	font-style: normal;
    	color:#000000;
    }
    et d'avoir ajouté ceci
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    @font-face{
    	font-family:"texgyreadventor";
    	src: url("../fonts/texgyreadventor-italic.otf") format("otf");
    	src: url("../fonts/texgyreadventor-italic-webfont.woff2") format("woff2");
        font-weight: normal;
        font-style: italic;
    }
    pour les 4 variantes de texgyreadventor,
    ca change la donne!
    Il ne suffit pas de tout savoir. Vouloir et persévérer, c'est déjà presque tout!

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

Discussions similaires

  1. Utiliser une police personnalisée avec @font-face
    Par Jean Sympa dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 07/07/2015, 11h15
  2. Probleme font-face avec url entier
    Par mapi3 dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 18/02/2011, 14h35
  3. Syntaxe avec @font-face
    Par popeye13 dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 03/03/2009, 11h59

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