Nous allons mainteannt voir comment utiliser une autre typo que les polices systèmes. Pour cela, deux choix s'offrent à nous :
Google font
La première solution consiste à utiliser une police isue de la bibliothèque de Google : Google Font.
Prenons par exemple la typo Roboto accessible ici :
https://fonts.google.com/specimen/Roboto
Si vous la sélectionnez, google vous donner un bout de code à insérer dans votre balise <head> :
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
Cette ligne de code permet d'incorporer la typo à votre site. Vous pouvez maintenant la déclarer dans votre CSS :
body{
font-family: 'Roboto';
}
Une bonne pratique consiste à déclarer, en plus de notre typo principale, une police de substitution.
En effet, si pour une raison X ou Y la Roboto ne serait pas chargée, le site prendra en remplacement une typo Safe Web Font à la place :
body{
font-family: 'Roboto', Arial, sans-serif;
}
Si la Roboto ne se charge pas, la Arial prend le relais. Si la Arial ne fonctionne pas, une sans-serif système sera utilisée.
La propriété @font-face
Une autre méthode consiste à importer manuellement les fichiers de notre police de caractère. Elle est plus complexe que Google Font mais permet un plus large choix de typo, notamment si vous avez une charte à respecter avec une font qui n'est pas disponible sur le service de Google.
intégrer des fichiers de typo à mon CSS
Pour intégrer ses propres fichiers, nous allons utiliser la propriété @font-face :
@font-face {}
La première étape consiste à définir le nom de ma typo avec font-family :
@font-face {
font-family: 'roboto_slab';
}
Ensuite, nous allons indiquer où se trouvent les fichiers d'un seul style avec l'attribut src.
C'est-à-dire que vous allez devoir répéter cette manipulation autant de fois qu'il y a de styles (italic, bold, bold italic, light, light italic …)
@font-face {
font-family: 'roboto_slab';
src: url('fonts/RobotoSlab-Light-webfont.eot'),
url('fonts/RobotoSlab-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/RobotoSlab-Light-webfont.woff') format('woff'),
url('fonts/RobotoSlab-Light-webfont.woff2') format('woff2'),
url('fonts/RobotoSlab-Light-webfont.svg#robotoSlab_light') format('svg');
}
En achetant une police ou en générant les fichiers via FontSquirrel, ces lignes de code vous sont données. Vous n'avez qu'à le copier / coller :)
Enfin, nous allons définir la graisse, le style et le stretch :
@font-face {
font-family: 'roboto_slab';
src: url('fonts/RobotoSlab-Light-webfont.eot'),
url('fonts/RobotoSlab-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/RobotoSlab-Light-webfont.woff') format('woff'),
url('fonts/RobotoSlab-Light-webfont.woff2') format('woff2'),
url('fonts/RobotoSlab-Light-webfont.svg#robotoSlab_light') format('svg');
font-weight: 100;
font-style: normal;
font-stretch: normal;
}
Voilà par exemple la typo Cover Sans avec tous ses styles :
@font-face {
font-family: 'cover_sans';
src: url('fonts/coversans-bold-webfont.eot');
src: url('fonts/coversans-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/coversans-bold-webfont.woff2') format('woff2'),
url('fonts/coversans-bold-webfont.woff') format('woff'),
url('fonts/coversans-bold-webfont.svg#cover_sansbold') format('svg');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'cover_sans';
src: url('fonts/coversans-bolditalic-webfont.eot');
src: url('fonts/coversans-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/coversans-bolditalic-webfont.woff2') format('woff2'),
url('fonts/coversans-bolditalic-webfont.woff') format('woff'),
url('fonts/coversans-bolditalic-webfont.svg#cover_sansbold_italic') format('svg');
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: 'cover_sans';
src: url('fonts/coversans-heavy-webfont.eot');
src: url('fonts/coversans-heavy-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/coversans-heavy-webfont.woff2') format('woff2'),
url('fonts/coversans-heavy-webfont.woff') format('woff'),
url('fonts/coversans-heavy-webfont.svg#cover_sansheavy') format('svg');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'cover_sans';
src: url('fonts/coversans-heavyitalic-webfont.eot');
src: url('fonts/coversans-heavyitalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/coversans-heavyitalic-webfont.woff2') format('woff2'),
url('fonts/coversans-heavyitalic-webfont.woff') format('woff'),
url('fonts/coversans-heavyitalic-webfont.svg#cover_sansheavy_italic') format('svg');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: 'cover_sans';
src: url('fonts/coversans-light-webfont.eot');
src: url('fonts/coversans-light-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/coversans-light-webfont.woff2') format('woff2'),
url('fonts/coversans-light-webfont.woff') format('woff'),
url('fonts/coversans-light-webfont.svg#cover_sanslight') format('svg');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'cover_sans';
src: url('fonts/coversans-semibold-webfont.eot');
src: url('fonts/coversans-semibold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/coversans-semibold-webfont.woff2') format('woff2'),
url('fonts/coversans-semibold-webfont.woff') format('woff'),
url('fonts/coversans-semibold-webfont.svg#cover_sanssemibold') format('svg');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'cover_sans';
src: url('fonts/coversans-semibolditalic-webfont.eot');
src: url('fonts/coversans-semibolditalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/coversans-semibolditalic-webfont.woff2') format('woff2'),
url('fonts/coversans-semibolditalic-webfont.woff') format('woff'),
url('fonts/coversans-semibolditalic-webfont.svg#cover_sanssemibold_italic') format('svg');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: 'cover_sans';
src: url('fonts/coversans-thin-webfont.eot');
src: url('fonts/coversans-thin-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/coversans-thin-webfont.woff2') format('woff2'),
url('fonts/coversans-thin-webfont.woff') format('woff'),
url('fonts/coversans-thin-webfont.svg#cover_sansthin') format('svg');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'cover_sans';
src: url('fonts/coversans-thinitalic-webfont.eot');
src: url('fonts/coversans-thinitalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/coversans-thinitalic-webfont.woff2') format('woff2'),
url('fonts/coversans-thinitalic-webfont.woff') format('woff'),
url('fonts/coversans-thinitalic-webfont.svg#cover_sansthin_italic') format('svg');
font-weight: 100;
font-style: italic;
}
@font-face {
font-family: 'cover_sans';
src: url('fonts/coversans-lightitalic-webfont.eot');
src: url('fonts/coversans-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/coversans-lightitalic-webfont.woff2') format('woff2'),
url('fonts/coversans-lightitalic-webfont.woff') format('woff'),
url('fonts/coversans-lightitalic-webfont.svg#cover_sanslight_italic') format('svg');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: 'cover_sans';
src: url('fonts/coversans-medium-webfont.eot');
src: url('fonts/coversans-medium-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/coversans-medium-webfont.woff2') format('woff2'),
url('fonts/coversans-medium-webfont.woff') format('woff'),
url('fonts/coversans-medium-webfont.svg#cover_sansmedium') format('svg');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'cover_sans';
src: url('fonts/coversans-mediumitalic-webfont.eot');
src: url('fonts/coversans-mediumitalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/coversans-mediumitalic-webfont.woff2') format('woff2'),
url('fonts/coversans-mediumitalic-webfont.woff') format('woff'),
url('fonts/coversans-mediumitalic-webfont.svg#cover_sansmedium_italic') format('svg');
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: 'cover_sans';
src: url('fonts/coversans-regular-webfont.eot');
src: url('fonts/coversans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/coversans-regular-webfont.woff2') format('woff2'),
url('fonts/coversans-regular-webfont.woff') format('woff'),
url('fonts/coversans-regular-webfont.svg#cover_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'cover_sans';
src: url('fonts/coversans-regularitalic-webfont.eot');
src: url('fonts/coversans-regularitalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/coversans-regularitalic-webfont.woff2') format('woff2'),
url('fonts/coversans-regularitalic-webfont.woff') format('woff'),
url('fonts/coversans-regularitalic-webfont.svg#cover_sansregular_italic') format('svg');
font-weight: normal;
font-style: italic;
}
Comment générer des fichiers de typo webproof
Pour convertir vos fichiers .otf et .ttf, il suffit de passer par le WebFont Generator :)
FontSquirrel met à disposition des typos libres de droits, mais aussi un générateur en ligne de fichiers webproof. À utiliser sans modération !