Forum : Police de caractère spécifique pour un site internet

Auteur

Réponse acceptée

Bonjour à tous,

Après réflexion, j'ai modifié mon CSS comme suit:

/* Code définissant body */ 
body {font-family: "century gothic", "Trebuchet MS", "arial", sans-serif;}

Ce me permet de garder ma police de prédilection.

Si le Pc de l'utilisateur ne l'a pas, la font sera remplacée en cascade par trebuchet puis par arial et enfin la générique.

Les utilisateurs n'auront donc plus times new roman qui est une police de type serif.

Néanmoins, je garde en mémoire la proposition que vous m'avez fournie (@font-face) qui permet de d'intégrer et loader sur son site des polices particulières.

Encore merci à tous.

Adel

Bonjour Daemon,

Tu peux également utiliser la balise @font-face.
Tu en sauras plus ici : http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Adel

Nairolf

Sinon tu vas sur ce site pour convertir la font:

http://www.fontsquirrel.com/

Et le proposer dans ton site

Adel

En effet Nairolf, la police de caractère Century Gothic étant courante, il ne devrait pas y avoir de soucis

Daemon

Auteur

Bonjour à tous,

Merci pour les réponses.

Je ne connaissais pas la balise @font-face.

En allant essayer sur fontsquirrel, j'ai eu la désagréable surprise qu'il n'acceptait pas la transformation de la police de caractère Century Gothic...

Donc pas moyen de l'intégrer avec @font-face

Daemon

Auteur

Re-bonjour.

J'ai trouvé une police "libre" qui pourrait aller avec mon site.

J'ai intégrer dans le CSS les codes de Font-page:

/* Code définissant balise @font-face */ 
    @font-face 
    {
        font-family: 'muli';
        src:    url('../fonts/muli-regular-webfont.eot?') format('eot'),
                url('../fonts/muli-regular-webfont.otf') format('truetype'),
                url('../fonts/muli-regular-webfont.woff') format('woff'),
                url('../fonts/muli-regular-webfont.svg#muliregular') format('svg');
        font-weight: normal;
        font-style: normal;
    }

    @font-face 
    {
        font-family: 'muli';
        src: url('../fonts/muli-italic-webfont.eot?') format('eot'),
                url('../fonts/muli-italic-webfont.otf') format('truetype'),
                url('../fonts/muli-italic-webfont.woff') format('woff'),
                url('../fonts/muli-italic-webfont.svg#muliitalic') format('svg');
        font-weight: normal;
        font-style: normal;
    }

    @font-face 
    {
        font-family: 'muli';
        src: url('../fonts/muli-light-webfont.eot?') format('eot'),
                url('../fonts/muli-light-webfont.otf') format('truetype'),
                url('../fonts/muli-light-webfont.woff') format('woff'),
                url('../fonts/muli-light-webfont.svg#mulilight') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    @font-face 
    {
        font-family: 'muli';
        src: url('../fonts/muli-lightitalic-webfont.eot?') format('eot'),
                url('../fonts/muli-lightitalic-webfont.otf') format('truetype'),
                url('../fonts/muli-lightitalic-webfont.woff') format('woff'),
                url('../fonts/muli-lightitalic-webfont.svg#mulilight_italic') format('svg');
        font-weight: normal;
        font-style: normal;
    }

    /* Code définissant body */ 
    body {
    font-family: muli, Century Gothic;
    }

En local, cela fonctionne mais pas qu'en je le met en ligne...

Sans doute un problème dans l'url mais j'ai pas encore trouvé la solution.

Les répertoires css et fonts se trouve à la racine de mon site.

J'ai mis Century Ghotic en police de substitution pour pouvoir observer quand cela fonctionne.

Xtr3me

Tu as mis muli pour chaque type de police ce qui est problématique puisqu'en appelant du même nom ce toujours la dernière qui sera appelée.
Donne leur des noms différentes du genre muli pour la police de type regular, muli-it pour la seconde etc...

Daemon

Auteur

Je me suis bien posée cette question.

Et comment vais-je intégrer alors dans mes pages les textes italiques, gras, etc. puisque j'utilise les balises de html?

Je suis néophyte donc je pose peut-être des questions stupides... ;)

Xtr3me

En CSS pardi tu utiliseras pour l'élément body par exemple la font-family:"muli";
En gros tu veux utiliser la police italique pour tout les h2 tu mettras une règle css pour les h2 avec

font-family:"muli-it";

Daemon

Auteur

J'avais compris cela.

Je pensai que je pouvais passer outre les balises span pour par exemple mettre un paragraphe en italic...

Edit:
Quoique qu'il en soit, en local, il charge bien la police.

Par contre, en ligne pas du tout.

Concernant l'italic, firefox, il met bien en italic avec la balise html mais pas IE, ni google chrome...

Edit:
En mettant en css:

/* Code définissant l'italique */ 
    .italique {font-family:muli-it;}

Et dans le fichier html

<p class="italique"> 
BlaBla</p>
</p>

Cela ne fonctionne toujours pas

Xtr3me

Tu as bien mis dans font-face une police avec comme font-family:"muli-it"; ?
Pourquoi deux fermetures de paragraphes ?
Il faut que tu définisses chaque police avec leur style donc:

@font-face 
{
    font-family: 'muli-it';
    src: url('../fonts/muli-italic-webfont.eot?') format('eot'),
            url('../fonts/muli-italic-webfont.otf') format('truetype'),
            url('../fonts/muli-italic-webfont.woff') format('woff'),
            url('../fonts/muli-italic-webfont.svg#muliitalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

De ce fait en utilisant la police muli-it tu auras une police en italique si tout se passe bien ;) .
Si ta police est la version grasse tu mettras font-weight:bold; etc...

Daemon

Auteur

Je vais repartir du début tranquillement en redéfinissant chaque police car j'ai passé toute l'aprem dessus et à mon avis, j'ai du manquer quelque chose...

En tout cas merci pour les réponses. Je vous tiens informé.

Police de caractère spécifique pour un site internet

12 réponses