Skip to content

alsacreations/webfonts

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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;
}