H2 - P2019

Développement web

Cours 13 - 2016-01-04

• github : https://github.com/brunosimon/hetic-p2019
• site : http://bruno-simon.com/hetic/p2019/
• contact : bruno.simon@hetic.net

Fonts

Lorsque l'on utilise une font, il faut s'assurer que tous les utilisateurs peuvent la voir

Soit l'utilisateur possède déjà la font sur son ordinateur, soit il doit la télécharger en même temps que le site

L'at-rule @Font-face en CSS3 permet de faire cela

font-face

Compatibilité

@font-face {
    font-family:'myFont';
    src:url(myfont.ttf);
}

p {
    font-family:'myFont';
}
                    

@font-face peut contenir plusieurs propriétés qui vont permettre de définir le nom, le fichier source, le poids et le style de la police

/* Regular normal */
@font-face {
    font-family:'myFont';
    src:url(myfont-regular.ttf);
    font-weight:400;
    font-style:normal;
}

/* Regular italic */
@font-face {
    font-family:'myFont';
    src:url(myfont-regular-italic.ttf);
    font-weight:400;
    font-style:italic;
}

/* Bold normal */
@font-face {
    font-family:'myFont';
    src:url(myfont-bold.ttf);
    font-weight:700;
    font-style:normal;
}

/* Bold italic */
@font-face {
    font-family:'myFont';
    src:url(myfont-bold-italic.ttf);
    font-weight:700;
    font-style:italic;
}
                    

font-family

Le nom que vous désirez

Ne pas oublier les ' ou " si le nom contient des espaces

src

Le fichier

' ou " non obligatoire

font-weight

Le poids de la font

• lighter
• normal
• bold
• bolder

• 100 (lighter)
• 200 (extra-light)
• 300 (light)
• 400 (normal)
• 500 (book)
• 600 (semi-bold)
• 700 (bold)
• 800 (black)
• 900 (bolder)

font-style

Le style de la font

• italic
• normal

Formats

Il existe plusieurs formats de font et les navigateurs ne les supportent pas tous

Il est nécessaire de fournir les différentes formats au navigateurs

/* Regular normal */
@font-face {
    font-family:'myFont';
    src:url(myfont-regular.eot);
    src:url(myfont-regular.eot?#iefix) format('embedded-opentype'),
        url(myfont-regular.woff2) format('woff2'),
        url(myfont-regular.woff) format('woff'),
        url(myfont-regular.ttf) format('truetype'),
        url(myfont-regular.svg#myFont) format('svg');
    font-weight:400;
    font-style:normal;
}

/* Regular italic */
@font-face {
    font-family:'myFont';
    src:url(myfont-regular-italic.eot);
    src:url(myfont-regular-italic.eot?#iefix) format('embedded-opentype'),
        url(myfont-regular-italic.woff2) format('woff2'),
        url(myfont-regular-italic.woff) format('woff'),
        url(myfont-regular-italic.ttf) format('truetype'),
        url(myfont-regular-italic.svg#myFont) format('svg');
    font-weight:400;
    font-style:italic;
}

/* Bold normal */
@font-face {
    font-family:'myFont';
    src:url(myfont-bold.eot);
    src:url(myfont-bold.eot?#iefix) format('embedded-opentype'),
        url(myfont-bold.woff2) format('woff2'),
        url(myfont-bold.woff) format('woff'),
        url(myfont-bold.ttf) format('truetype'),
        url(myfont-bold.svg#myFont) format('svg');
    font-weight:700;
    font-style:normal;
}

/* Bold italic */
@font-face {
    font-family:'myFont';
    src:url(myfont-bold-italic.eot);
    src:url(myfont-bold-italic.eot?#iefix) format('embedded-opentype'),
        url(myfont-bold-italic.woff2) format('woff2'),
        url(myfont-bold-italic.woff) format('woff'),
        url(myfont-bold-italic.ttf) format('truetype'),
        url(myfont-bold-italic.svg#myFont) format('svg');
    font-weight:700;
    font-style:italic;
}
                    

Pour nous simplifier la vie, on utilise des générateurs de font-face

• Transfonter (???)
• Font Squirrel (restriction sur les fonts)
• Font2Web (moins pratique, peu de restriction sur les fonts)
• FontPrep (pas de restriction sur les fonts, dégradations occasionnelles)

Les hébergeurs de fonts

• www.fonts.com (payant, large choix)
• www.google.com/fonts (gratuit, faible choix)

Google fonts

Choisir une font et cliquer sur Add to Collection

Une fois les fonts sélectionnées, cliquer sur Use en bas

Choisir les poids et styles

Ne prendre que ce qui est vraiment nécessaire

Importer les fonts sur votre site, soit en HTML avec <link> soit en CSS avec @import

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);
                    

Préférer <link> car plus rapide à charger

Utiliser la font dans votre CSS

font-family:'Open Sans',sans-serif;
                    

Avantages

• Plus facile à mettre en place
• Plus rapide à charger (multi domaines)
• Cache navigateur (si font déjà téléchargées depuis un autre site)
• CDN

Inconvénients

• Nécessité d'être connecté
• Dépendant de l'hébergeur
• Choix limité de fonts

font-smoothing

Il est possible de modifier le rendu des fonts

La différence dépend de la font, mais se verra sur des écrans non retina avec des fonts fines

body {
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
                    

Aller plus loin

La déclaration @font-face parfaite (Paul irish)

WhatFont (Plugin Chrome)