Les récompenses du design, de la créativité et de l’innovation sur internet

L’utilisation de la typographie comme principal élément de design dans les dernières tendances, fait de Google Fonts une ressource plus précieuse que jamais. Son interface et son système de téléchargement sont très intuitifs et confortables, tout en vous permettant de comparer toutes les polices et tous les styles disponibles pour satisfaire le paysage créatif actuel qui fusionne la typographie audacieuse, les polices à empattement et d’affichage, les grands paragraphes, les styles décoratifs, etc. Pour en savoir plus sur la typographie, cliquez ici La typographie est le nouveau noir. Tendances du web design

Top recommended Google Web Fonts

Vous trouverez ici une sélection de polices que nous avons choisies en raison de leur aspect esthétique, mais surtout fonctionnel, contenant des familles avec de nombreux styles et poids.
Nous avons mis en avant des polices optimisées pour les interfaces, UI Optimized web fonts, et d’autres qui sont particulièrement lisibles dans les paragraphes, ou particulièrement confortables à lire sur mobile et lisibles sur n’importe quel appareil – que ce soit un smartphone, un ordinateur de bureau ou une tablette.

  • Alegreya Alegreya Google Fonts Web Fonts
  • B612 B612. Google Fonts Web Fonts
  • Muli Muli Google Fonts Web Fonts
  • . Titillium Web Titillium Web Google Fonts Web Fonts
  • Varela Varela Google Fonts Web Fonts
  • Vollkorn Vollkorn Google Fonts Web Fonts
  • IBM Plex IBM Plex Google Fonts Web Fonts
  • Crimson Text Crimson Text Google Fonts Web Fonts
  • Le Caire Le Caire Google Fonts Web Fonts.
  • BioRhyme BioRhyme Google Fonts Web Fonts
  • Karla Karla Google Fonts Web Fonts
  • Lora Lora Google Fonts Web Fonts
  • Frank Ruhl Libre Frank Ruhl Libre Google Fonts Web Fonts
  • Playfair Display Playfair Display Google Fonts Web Fonts
  • Archivo Archivo Google Fonts Web Fonts
  • Archivo Archivo Google Fonts Web Fonts

  • Spectral Spectral Google Fonts Web Fonts
  • Fjalla One Fjalla One Google Fonts Web Fonts
  • Roboto Roboto Google Fonts Web Fonts
  • Montserrat Montserrat Google Fonts Web Fonts
  • Rubik Rubik Google Fonts Web Fonts
  • Source Sans Source Sans Google Fonts Web Fonts
  • Cardo Cardo Google Fonts Web Fonts
  • Cormorant Cormorant Google Fonts Web Fonts
  • Work Sans Work Sans Google Fonts Web Fonts
  • Rakkas Rakkas Google Fonts Web Fonts
  • Concert One Concert One Google Fonts Web Fonts
  • Yatra One Yatra One Google Fonts Web Fonts
  • Arvo Arvo Google Fonts Web Fonts
  • Lato Lato Google Fonts Web Fonts
  • Abril FatFace Abril Fatface Google Fonts Web Fonts
  • Ubuntu Ubuntu Google Fonts Web Fonts
  • PT Serif PT Serif Google Fonts Web Fonts
  • Old Standard TT Old Standard TT Google Fonts Web Fonts
  • Oswald Oswald Google Fonts Web Fonts

Fonts Optimized for UI

  • PT Sans PT Sans Google Fonts Mobile Fonts UI
  • Poppins Poppins Google Fonts Mobile Fonts UI
  • Fira Sans Fira Sans Google Fonts Mobile Fonts UI
  • Nunito Nunito Google Fonts Mobile Fonts UI
  • Oxygen Oxygen Google Fonts Mobile Fonts UI

Fonts Optimized for Legibility and Readability

  • Exo 2 Exo 2 Google Fonts Mobile Fonts UI
  • Open Sans Open Sans Google Fonts Mobile Fonts UI
  • Merriweather Merriweather Google Fonts Mobile Fonts UI

  • Noto Sans Noto Sans Google Fonts Mobile Fonts UI
  • Source Sans Pro Source Sans Pro Google Fonts Mobile Fonts UI

Comment utiliser les polices Web

À ce stade, tout le monde sait comment utiliser les polices Web, mais si vous n’êtes pas sûr, il vous suffit de savoir qu’il existe deux façons. La première consiste à utiliser des services de polices Web comme Google Fonts, Webtype, Fonts.com ou Typekit et à télécharger la police depuis leurs serveurs, comme vous le verrez dans l’exemple suivant : 1. Services d’intégration de polices Web

La seconde consiste à héberger la police sur votre serveur et à utiliser la règle @font-face dans votre feuille de style, comme vous pouvez le voir ici : 2. Intégration de polices à l’aide de la règle @font-face

Services d’intégration de polices Web

Gogle Web Fonts (GWF) ou Typekit sont des systèmes qui permettent d’utiliser des polices hébergées sur leurs serveurs. GWF est gratuit à utiliser, n’exige pas que vous ayez un compte, et n’a pas de limite de trafic ou de domaines contrairement à Typekit. Typekit fixe le coût du service en fonction du nombre de domaines dans lesquels la police est utilisée, ou du trafic mensuel du site. L’une des caractéristiques les plus appréciées de GWF est la possibilité de télécharger une version de bureau des polices pour les utiliser dans la phase de conception du projet.

Mise en œuvre

C’est vraiment rapide et simple :

1. Choisissez une police. Vous pouvez l’ajouter à votre collection ou utiliser « utilisation rapide » pour générer le code et les options pour cette police.

2. Copiez et collez le code généré dans votre <Head>

 <head> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> </head>

3. La police est maintenant accessible dans votre code CSS

 body { font-family: 'Tangerine', serif; font-size: 48px; }

Vous pouvez consulter ici un manuel étendu pour les styles, les sous-ensembles de script et l’utilisation de plusieurs polices.

Intégration des polices à l’aide de la règle @font-face

Les polices sont hébergées sur le serveur de l’utilisateur indépendamment des services externes. @font-face était une règle CSS2 dépréciée qui a été réintroduite dans les spécifications CSS3 et est prise en charge par presque tous les navigateurs modernes. Une police web est une police personnalisée qui est prise en charge par différents navigateurs et se présente sous des formats tels que TTF, WOFF, EOT et SVG.

 @font-face { font-family: 'ChunkFiveRegular'; src: url('Chunkfive-webfont.eot'); src: url('Chunkfive-webfont.eot?#iefix') format('embedded-opentype'), url('Chunkfive-webfont.woff') format('woff'), url('Chunkfive-webfont.ttf') format('truetype'), url('Chunkfive-webfont.svg#ChunkFiveRegular') format('svg'); font-weight: normal; font-style: normal; }

.