Quelles Webfonts gratuites utiliser pour une police res­pon­sive ?

Si vous re­cher­chez une police pour votre site Web, vous pouvez puiser dans la riche offre de Webfonts dis­po­nibles sur Internet et adaptées au design Web res­pon­sive.

Comment fonc­tion­nent les Webfonts en design res­pon­sive ?

Les Webfonts cons­ti­tuent une base idéale pour la ty­po­gra­phie en design res­pon­sive, car elles reposent sur des tracés vec­to­riels fa­ci­le­ment re­di­men­sion­nables. Lors du char­ge­ment d’une page Web utilisant des Webfonts, les polices sont té­lé­char­gées depuis un serveur, puis rendues di­rec­te­ment dans le na­vi­ga­teur de l’uti­li­sa­teur. Les Webfonts adaptées au res­pon­sive design répondent ainsi aux exigences du na­vi­ga­teur et de l’appareil utilisé.

De nom­breuses pla­te­formes en ligne proposent des Webfonts adaptées au res­pon­sive design, dis­po­nibles en té­lé­char­ge­ment gratuit ou payant. Parmi les four­nis­seurs connus de polices payantes, on trouve par exemple Adobe Fonts ou Fonts­pring, qui proposent un large choix de polices sous licence. Vous pouvez également vous appuyer sur une offre très riche de Webfonts gratuites. On trouve aussi des col­lec­tions libres, notamment sur Google Fonts, Font Squirrel ou DaFont.

Toutes les polices dis­po­nibles ne con­vien­nent pas forcément à un usage général : certaines sont très dé­co­ra­tives et adaptées à des cas spé­ci­fiques, d’autres ne prennent pas en charge tous les ca­rac­tères. L’étendue des jeux de ca­rac­tères varie donc fortement selon les polices. Il est donc important de choisir une police suf­fi­sam­ment complète et adaptée aux besoins de votre design res­pon­sive. À titre d’exemple, nous vous pré­sen­tons quelques Google Fonts po­ly­va­lentes idéales pour une police res­pon­sive.

Quels exemples de polices res­pon­sives trouve-t-on sur Google Fonts ?

La pla­te­forme Google Fonts est utilisée par de nombreux con­cep­teurs Web comme source de polices pour une ty­po­gra­phie res­pon­sive. Le service est en ligne depuis 2010. Dès le début, seules des polices open source gratuites ont été proposées, uti­li­sables à des fins privées comme com­mer­ciales. Aujourd’hui, vous avez accès à près de 2 000 Webfonts dif­fé­rentes. Vous pouvez les intégrer à votre site Web via un simple code, afin de mettre en place une ty­po­gra­phie adaptée au design res­pon­sive.

Open Sans

Open Sans fait partie des Webfonts les plus utilisées. Il s’agit d’une police sans em­pat­te­ment au style épuré et moderne. Conçue par Steve Matteson, elle est optimisée pour le Web, les appareils mobiles et l’im­pres­sion, ce qui en fait une ex­cel­lente police res­pon­sive.

Close

Lato

Lato est une autre police sans em­pat­te­ment très populaire. Conçue par Łukasz Dziedzic et soutenue par Google, elle offre un bon équilibre entre li­si­bi­lité et modernité, ce qui la rend adaptée à un usage res­pon­sive.

Close

Roboto

Roboto a été ini­tia­le­ment dé­ve­lop­pée pour l’interface du système Android et a depuis été largement adoptée sur le Web. Cette Webfont sans em­pat­te­ment se ca­rac­té­rise par des lettres re­la­ti­ve­ment étroites, ce qui permet d’afficher davantage de texte sur une ligne, un avantage pour le res­pon­sive design.

Close

Source Serif 4

Source Serif 4 est une police dé­ve­lop­pée par Adobe et fait partie de la famille Source. Cette police avec em­pat­te­ments peut être combinée avec la sans em­pat­te­ment Source Sans 3 et la monospace Source Code Pro, également dis­po­nibles gra­tui­te­ment, afin de créer une identité ty­po­gra­phique cohérente et adaptée au res­pon­sive design.

Close

Playfair Display

Si vous souhaitez utiliser une police avec em­pat­te­ments élégante, la Webfont Playfair Display est un bon choix. Vous pouvez choisir entre dif­fé­rents styles de cette police plutôt dé­co­ra­tive, tout en con­ser­vant une bonne li­si­bi­lité dans un usage res­pon­sive.

Close

Comment intégrer des Webfonts via Google Fonts ?

De nom­breuses Webfonts sont dis­po­nibles dans les bases de données de plusieurs four­nis­seurs. Les polices pré­sen­tées ici se trouvent par exemple sur Google Fonts et Font Squirrel. Voici un exemple d’in­té­gra­tion de la police Open Sans via Google Fonts pour une uti­li­sa­tion dans une ty­po­gra­phie res­pon­sive.

• Saisissez Open Sans dans le champ de recherche et sé­lec­tion­nez la police. Cliquez ensuite sur « Get font ».
• Les in­for­ma­tions es­sen­tielles con­cer­nant la Webfont s’affichent. Cliquez ensuite sur « Get embed code ».
• Un code d’in­té­gra­tion est généré pour le <head> de vos pages Web ainsi que pour votre fichier CSS. Vous pouvez sé­lec­tion­ner les styles de police souhaités avant de générer le code.
• Pour intégrer Open Sans en HTML, insérez le code dans la section <head> de votre page. L’ins­truc­tion se présente gé­né­ra­le­ment comme suit :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Intégrer une Webfont de Google</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
</body>
</html>

Vous dé­fi­nis­sez ensuite la police dans le code CSS :

/ *Appliquer la police – exemple pour Open Sans* /
body {
    font-family: "Open Sans", sans-serif;
    font-weight: 400; / *Poids normal* /
    font-style: normal;
}

Comme vous pouvez le constater, l’in­té­gra­tion d’une Webfont via Google Fonts reste donc re­la­ti­ve­ment simple. En plus de cette méthode, il est également possible d’utiliser la règle CSS @import pour intégrer une police res­pon­sive issue de Google Fonts.

En résumé : de nom­breuses polices gratuites pour le design Web res­pon­sive

Pour les sites Web adap­ta­tifs, une large palette de polices est dis­po­nible. Vous pouvez utiliser sans problème des Webfonts gratuites issues de Google Fonts, Font Squirrel et d’autres pla­te­formes. Il faut toutefois garder à l’esprit que les polices po­pu­laires comme Open Sans, Roboto ou Lato sont très largement utilisées sur le Web. Une police vé­ri­ta­ble­ment unique ou propre à une marque n’est gé­né­ra­le­ment pas dis­po­nible gra­tui­te­ment sous forme de Webfont. Les polices libres offrent néanmoins une grande flexi­bi­lité pour la ty­po­gra­phie et les mises en page res­pon­sives. Leur in­té­gra­tion est rapide et simple, ce qui permet aux visiteurs de bé­né­fi­cier ra­pi­de­ment de Webfonts adaptées au design res­pon­sive.