une collection de webfonts optimisées pour le web
CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
alexbrush-regular
calendas-plus-regular
droidsans-bold
droidsans-regular
grandhotel-regular explications Dec 28, 2015
hack-bold
hack-bolditalic
hack-italic
hack-regular
lato-bold
lato-italic
lato-regular
leaguegothic-regular
merriweather-bold
merriweather-regular
opensans-bold
opensans-italic
opensans-light
opensans-regular
oswald-regular
roboto-bold
roboto-italic
roboto-regular
README.md

README.md

webfonts collection

  • parce que vous n'utilisez pas le CDN de Google Font ou Typekit (et que vous avez probablement raison),
  • parce que vous cherchez et installez vos fontes à la main,
  • et qu'ensuite vous les adaptez et optimisez pour le web,
  • systématiquement à chaque nouveau projet...

Alors il y a des chances que vous trouviez ici votre bonheur déjà prêt à l'emploi : une collection de fontes libres, prêtes à l'emploi et optimisées pour le web.

Les critères en considération pour figurer dans cette liste :

  • être une fonte couramment employée sur le web, libre et gratuite
  • proposer le format .woff2 prioritairement (alternatives en .woff et .ttf fournies)
  • se limiter aux caractères latins, accents et devises uniquement (subsetting)
  • disposer d'hauteur de "x" adaptée pour fontes alternatives ajustées ("arial" pour fontes sans-serif et "georgia" pour fontes serif)
  • proposer le fichier CSS @font-face fourni
  • ajouter le hack ?#iefix pour éviter le chargement inutile de fichiers sur les anciens IE
  • ne pas tenir compte de IE8 et antérieur (pas de .eot, ils afficheront la fonte alternative)
  • fournir les licences dans le dossier de fonte

N'hésitez pas à proposer vos contributions de fontes, sous condition qu'elles respectent les critères ci-dessus.

Exemple de @font-face fourni :

/* Fonts */

@font-face {
    font-family: 'merriweather';
    src: url('merriweather-bold.woff2?#iefix') format('woff2'),
         url('merriweather-bold.woff') format('woff'),
         url('merriweather-bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

Usage :

h1 {
  font-family: merriweather, georgia, serif;
}